Rich-text Reply

Variation code for checking if a class is present on the page and activate another test manually

RickyS 10-01-14

Variation code for checking if a class is present on the page and activate another test manually

I am going to test product pages on am ecommerce site. However, the product pages are slightly different depending if they offer samples of the product (an online book store). In order to cater for the two different setups (to avoid elements overlapping eah other etc.)I need to have two experiments. I have created one bootstrap experiment for product pages without the sample, and one for experiement that is to be manually triggered/activated by the bootstrap when there is a sample present on the product page.

 

So my question is more of a technical one; what does the variation code to activate the second experiement need to look like if it is to check for the presence of a class on the product page? Product pages with samples will have a class that is not present on product pages without samples.

Level 2

adzeds 10-01-14
 

Re: Variation code for checking if a class is present on the page and activate another test manually

Have you looked into using Custom Tags to identify whether a visit should be included in a test?

You can find out more here: https://help.optimizely.com/hc/en-us/articles/201876450#custom_tags
David Shaw
Level 11
RickyS 10-01-14
 

Re: Variation code for checking if a class is present on the page and activate another test manually

Hi David,

Thanks for the reply. Your suggestions doesn't really help me with the challenge unfortunately. The problem isn't really how to define who to include in the test, but rather which version of the page to serve them. I want everyone to be included in the test, but depending on which product (if it has a preview of the book) they are viewing, I need to serve them one of two different variations.

I'm following this setup; https://help.optimizely.com/hc/en-us/articles/200040225-Activation-Mode-Activating-an-experiment-dyn...

I just need to figure out what the code to put in the variation code-field needs to look like in order to decide which of the two experiments it should send the visitor to.

Thanks for your reply, though!

- Ricky
Level 2
Amanda 10-02-14
 

Re: Variation code for checking if a class is present on the page and activate another test manually

[ Edited ]

Hey @RickyS - Your first experiment (the boostrap one) can use a simple JavaScript  "if" function.

 

If class A is present, then activate experiement 1;

else if class B is not present, then activate experiment 2

 

Does this help clear things up? If you want to send over your product page and what the specific class you are looking for is, then I would be happy to help you with the code. 

 

 

Optimizely
RickyS 10-02-14
 

Re: Variation code for checking if a class is present on the page and activate another test manually

[ Edited ]

Yeah, I get the logic, it1 more the code itself I'm struggling with.

 

By default I want the experiment without a sample to run, but if the product page has a sample available, then run the other experiment.

 

So if this element/class; 

 

<button class="book__shortcut book__shortcut_action_sample" type="button" title="Hør et gratis utdrag"></button>

 

is on the page, then I want it to fire the second experiement, if the element/class is not on the page, rhen run the default experiment.

 

What would the code look like? If i.e. using jquery?

Level 2
Amanda 10-02-14
 

Re: Variation code for checking if a class is present on the page and activate another test manually

You can use the length functionality to check whether a class is present. There is a good disucssion of way to check whether an element is present in StackOverflow here.  I also provide a snippet below that should work for what you are looking to do. 

 

window.optimizely = window.optimizely || [];
if ($(".book__shortcut book__shortcut_action_sample").length > 0) {
// Activate the experiment when the class is present
window.optimizely.push(["activate", EXPERIMENT_ID]);
} else { 
// Activate the experiement when the class is not present
window.optimizely.push(["activate", EXPERIMENT_ID]);
}

 To test this out before, you can use alerts to check whether the code correctly checking for the class presence or non-presence

 

 

window.optimizely = window.optimizely || [];
if ($(".book__shortcut book__shortcut_action_sample").length > 0) {
// Activate the experiment when the class is present
alert("present");
} else { 
// Activate the experiement when the class is not present
alert("not present");
}

 

Let me know if you have any questions! 

Optimizely