How to test 2 images on category page?

  • Resolved cutu234

    (@cutu234)


    2 years, 4 months ago

    Hi,

    we would like to AB-test 2 images on a Woocommerce category page. The question is simple: which image generates more clicks? How would I set up the test? The standard options (page, custom post type, headline etc.) will not work here. I thought about using the CSS option to add CSS that would hide one image and show the other one. I can see the added CSS in the javascript part like so:

    <script data-cfasync="false" id='nelio-ab-testing-main-js-after'>
		window.nabAddSingleAction( "main-init-available", function() { nab.init( {"alternativePostIds":[],"experiments":{"540097":{"alternatives":[[],{"name":"Waschimobil im Einatz","css":".showimage {\n  display: block;\n}\n.hideimage {\n  display: none;\n}\n"}],"goals":[{"id":0,"conversionActions":[{"type":"nab\/click","attributes":{"mode":"css","value":"camping-hero-thumb"}}]}],"segments":[],"type":"nab\/css"}},"heatmapTracking":[],"optimizeXPath":true,"gdprCookie":false,"participationChance":100,"siteId":"fe153738-cdd4-44e4-acf8-128164f653ab","timezone":"+02:00","trackingUrl":"https:\/\/api.nelioabtesting.com\/v1\/site\/fe153738-cdd4-44e4-acf8-128164f653ab\/event","useSendBeacon":true} ); } );
		window.nabAddSingleAction( "main-ready", function() { nab.view( [540097] ); } );
</script>

    But his does not help, since I need the CSS on page load. To be honest, I’m not even sure that I understand how the code would work.

    Any help would be appreciated.

    Thank you!

    • This topic was modified 2 years, 4 months ago by cutu234.
Viewing 1 replies (of 1 total)
  • Plugin Author David Aguilera

    (@davilera)

    As you’ve already pointed out, the only possible solution would be to run a CSS test and limit its scope to the URL of your WooCommerce category page. Here’s what you need to do:

    1. Add two images in your category page
    2. Add CSS classes or IDs to those images so that you can hide/show them via CSS
    3. Tweak your theme’s CSS style (you can use WordPress’ customizer, for example, if your theme supports it) to hide your second image
    4. Create a CSS test
    5. The alternative CSS rule needs to hide the first image and show the second one (thus overwriting the CSS rule defined in 3)
    6. Fill in the remaining test fields and don’t forget to set the test scope (i.e. the URL(s) in which it should run)
    7. Start the test

    And that’s it! That should do the trick ??

Viewing 1 replies (of 1 total)
  • The topic ‘How to test 2 images on category page?’ is closed to new replies.