Rich-text Reply

Test is lost on paging

vencompras 08-29-17
Accepted Solution

Test is lost on paging

Hello, a greeting to everyone.

I have set up a test on my site, but it is lost when a user uses the page.

For example, when a user visits a category (https://vencompras.com/19-compra-de-perfumes-and-lotions-original-for-man-), the test is displayed perfectly, but when it goes to a next page of The same category (https://vencompras.com/19-compra-de-perfumes-and-lociones-originales-para-hombre#/page-2) loses the test. Note that the pagination is executed with ajax.

In the configuration of my experiment I placed it to be executed in the url "19-purchase-of-perfumes-and-lotions-original-for-man" and with regular expression.

Would you please let me know if I am doing something wrong? And how does optimizely work?

Thank you

JasonDahlin 08-30-17
 

Re: Test is lost on paging

[ Edited ]

Hi @vencompras,

The experiment does run on "page 2", so your URL targeting is fine.

What is happening, however, is that your experiment is modifying the page by adding classes to certain elements.  However, when pagination fires and new elements are loaded into the page, they appear "normal" because your experiment has already run and does not automatically appy the classes to the elements that were just added to the page.

 

A couple ways to fix this:

1- Make your experiment do what it does when the page loads, but then *also* do it again after pagination has loaded the new elements into the page.  For this, you will need to either listen for AJAX Complete or ask your developer if there is a trigger that you can listen for.  A specific trigger for "pagination complete" would be more efficient, but what I put together below works 100% when run in the browser's console.

 

For this we set up a function that applies the classes to the elements, set up your AJAX listener so that the function fires when pagination completes, and we run the function once on page load:

 

/* Set up the function that adds the classes to the elements */
window.optimizelyAddToCartABTest = function(){
  console.log('modifying ATV');
    $("a.ajax_add_to_cart_button").addClass("ajax_add_to_cart_button_ab");
    $("a.ajax_add_to_cart_button_ab").removeClass("ajax_add_to_cart_button");
    $("div.ajax_add_to_cart_button").addClass("ajax_add_to_cart_button_ab");
    $("div.ajax_add_to_cart_button_ab").removeClass("ajax_add_to_cart_button");
};

/* Set up a listener for AJAX Complete so you can run the function when pagination completes */
try {
    window.$( document ).ajaxComplete(function( event, xhr, settings ) {
        try {
            /* modify this if condition to be whatever indicates this is pagination */
            if ( settings.url.indexOf('/blocklayered/blocklayered-ajax.php') > -1 ) {
                /* if this is pagination, run the code that adds the experiment's classes to the elements */
                window.optimizelyAddToCartABTest();
            }
        } catch(e) { }
    });
} catch(e) {}

/* Run the function once when the page loads */
window.optimizelyAddToCartABTest();

 

 

2- If you don't like the idea of listening to AJAX Complete and your DEV cannot add a trigger that signals "pagination complete", you could also try - instead of adding a class to each specific element, add a class to the <body> of the page and create CSS that applies the desired styles to those elements when the body class is present.

 

For example, instead of this:

 

$("a.ajax_add_to_cart_button").addClass("ajax_add_to_cart_button_ab");

Do this:

 

 

$("body").addClass("ATC_ab");

Then re-work your CSS so that instead of being like:

 

 

.button.ajax_add_to_cart_button_ab div  { stuff } 

It is structure like this:

 

 

.ATC_ab a.ajax_add_to_cart_button .button div  { stuff } 

Since you already have your CSS built to support the class being added to each element, I expect you'll probably want to use the AJAXComplete route, however, this second approach is my preferred method for modifying what the page looks like since we do not actually have to modify any elements on the page other than the <body> tag, which means dynamic content will automagically pick up the new styling.

--Jason Dahlin
Analytics and Testing Guru Smiley Happy


Experimentation Hero
vencompras 08-30-17
 

Re: Test is lost on paging

Excellent!

Thank you very much for the reply. The solution worked perfectly for my purpose.

Greeting