Rich-text Reply

Different Versions in one Session

Mat2e 08-22-17

Different Versions in one Session

Hey Everyone,

I set up an A/B Test and changed the colour of an "direct booking" sign on the product pictures of a searching page for different products. It appears that within a session the color of my manipulation changes. On one Page all signs are yellow but when I search in a different category the signs remain blue. Can someone help me with this problem or does this case sounds familiar to you? 

Level 2

JasonDahlin 08-22-17
 

Re: Different Versions in one Session

Hi @Mat2e,

Two things come to mind:

1- URL Targeting - are the pages with the blue sign included in your experiment?

2- The jQuery selector for the pages within the second category may be different than the jQuery selector used on the first category's pages.

 

Can you share a link to a page where it works and a page where it doesn't?

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy


Experimentation Hero
Mat2e 08-23-17
 

Re: Different Versions in one Session

Hey @JasonDahlin

Thank you for your answer. There is no specific page I can show you. Basicly the Page keeps changing randomly within the session if you are in A or B. Some categories include the first color and some the second.

 

All of the pages seem to be included in the URL-Targeting, but it doesn't effect all of them at once.

 

This is a staging construct of our Webpage. Click through the categories and you will realize my problem.

http://54.93.118.106/category/beleuchtung

Level 2
JasonDahlin 08-23-17
 

Re: Different Versions in one Session

Hi @Mat2e,

If it sometimes works and sometimes doesn't, then it is probably a timing issue.

For this experiment, you are changing the background of an element by applying a style attribute to the element.  The timing issue may be because when optimziely runs, those elements do not always exist in a state where they can be modified.  There is a more reliable method of doing this.

 

Instead of adding a style tag to all of the elements that exist at the time the page loads:

$(".label-direct-bookable").css({"background-image":"url(//cdn.optimizely.com/img/4442057066/d6bc295ecbca40d9817c0b133ac8c3cb.png)"});

Inject CSS that overrides the site's default CSS (use !important so that the later-loading CSS file does not override this value):

$('head').append('<style>.label-direct-bookable {background-image: url("//cdn.optimizely.com/img/4442057066/d6bc295ecbca40d9817c0b133ac8c3cb.png") !important;</style>');
--Jason Dahlin
Analytics and Testing Guru Smiley Happy


Experimentation Hero