Rich-text Reply

A/B Testing site that adds new content

HB 01-29-15
Accepted Solution

A/B Testing site that adds new content



The page i'm A/B testing are changing content every week, the other day the whole site crashed and just became blank (reference image below). I guess the re-direct images changed and the B-variation didn't know where to fetch the right images? How do one handle this? I had to pause all experiments and when all the content was added, I activated again and now it works?


What should I search for to learn more about this? And how can I avoid this in the future?


All the best!





Level 2

greg 01-29-15

Re: A/B Testing site that adds new content

Hey Henrik, can you share your experiment code?


It sounds like the experiment code needs to be edited to make sure it's not affecting the image source.

Level 2
HB 01-30-15

Re: A/B Testing site that adds new content


All I did was using the visual editor > edit element > change image. The variation code is below:

$(".row-0 > div:eq(0) > div:eq(0) > a:eq(0) > div:eq(0)").prepend("<img id=\"optimizely_667303969\" src=\"//\" />");
$(".row-0 > div:eq(1) > div:eq(0) > a:eq(0) > div:eq(0)").prepend("<img id=\"optimizely_216129331\" src=\"//\" />");
Level 2
greg 01-30-15

Re: A/B Testing site that adds new content

[ Edited ]

It looks like the source of the image is not the problem, because they're hosted with Optimizely. So their location ("source") remains the same, regardless of what changes are made on your site.


The issue is most likely with the element selector. That's the part before ".prepend" which tells Optimizely where to place the new images.


Your current selector (which was generated by Optimizely when you used the visual editor) is dependent on the exact order of elements on the page. Specifically, this:


$(".row-0 > div:eq(0) > div:eq(0) > a:eq(0) > div:eq(0)")


Translates to:


The first <div> directly within the first link directly within the first <div> directly within the first <div> directly within an element with the class "row-0".


That's an overly narrow selection. There's a very high likelihood that changes to your site will slightly affect the order of things, and therefore that selector will not match anything... Hence you're left with a blank spot.


The better way is to use element ID's (in HTML they look like id="name") as selectors, because they are usually unique. Other than ID's, you can also use classes (in HTML they look like class="name"). Those are less likely to change than the exact order of elements.


For example, if the image is inside a <div> that has the ID name "sale-banner", you can edit your selector to be this:


$("#sale-banner").prepend("<img id=\"optimizely_667303969\" src=\"//\" />");


Here's a full list of possible selectors you can use:


The trick is in selecting the right element in a way that's unique (won't accidentally select wrong elements) and not likely to be affected by minor site edits.

Level 2
HB 02-02-15

Re: A/B Testing site that adds new content

This did the trick for me. Thanks @greg !

$(".owl-item:eq(1) .gallery-link > img:eq(0), .owl-item:eq(5) .gallery-link > img:eq(0)").attr({"src":""});

$(".owl-item:eq(2) .gallery-link > img:eq(0), .owl-item:eq(6) .gallery-link > img:eq(0)").attr({"src":""});
Level 2