Rich-text Reply

Troubleshooting - css stopping my variations to appear?

maria 09-24-15

Troubleshooting - css stopping my variations to appear?

Hi,

We are wrecking our brains since yesterday about an experiment that does not want to appear online.
I have pushed it with the optimizely ID in the URL to no avail.

I have checked through the console, the experiment is live. We copied the variation code in the console as well and it works. We use the delayed content code as well for the variation to wait for a certain class to load before it appears.

My guess is that the problem lies there. That css is a countdown. Whether we use the delayed content code or not, our variations do not appear.
Is it because of that css? Something else? Does anybody know?



Level 2

MartijnSch 09-24-15
 

Re: Troubleshooting - css stopping my variations to appear?

Hi Maria,

Are you able to share the code that you're using for the variant. In some rare cases things work in the console but not always if you run it through a service like Optimizely or a tag manager. That's something I noticed before. Next to that are you sure that all the necessary element are already on the page the moment Optimizely is loading?
maria 09-24-15
 

Re: Troubleshooting - css stopping my variations to appear?

Thank you for your reaction, Martijn!
Optimizely is loading quite late on the page (something I'm working on changing as we do not want that for other experiments).

As for the code, here is one (you'll see we copied the optimizely one):

/* Don't touch this code */
function waitForDelayedContent(selector, experiment, timeout, keepAlive) {
var intervalTime = 50;
var timeout = timeout || 3000;
var keepAlive = keepAlive || false;
var maxAttempts = timeout / intervalTime;
var attempts = 0;
var elementsCount = 0;
var interval = setInterval(function() {
if ($(selector).length > elementsCount) {
if (!keepAlive) {
clearInterval(interval);
}
experiment();
elementsCount = $(selector).length;
} else if (attempts > maxAttempts) {
clearInterval(interval);
}
attempts ++;
}, intervalTime);
}
/* --------------------------------------------- */

waitForDelayedContent('.countdown', function(){
// Your variation code here
$(".countdown").css({"font-style":"italic"});
$("#TopbannerAFTEL img").attr({"src":"//cdn.optimizely.com/img/68328241/0a36338205a04a198f3850c1fd899148.jpg"});
});



I forgot to add it is a multi-page MVT Smiley Happy
Level 2
JDahlinANF 09-24-15
 

Re: Troubleshooting - css stopping my variations to appear?

I run into this quite often...

Presuming your code works great when you run it in the console... the issue is most likely that you are trying to use a jQuery method that does not exist (or exists but does nto support how you are using it).  Hopefully changing it to "window" scope resolves your issue:

 

waitForDelayedContent('.countdown', function(){
    // Your variation code here
    window.$(".countdown").css({"font-style":"italic"});
    window.$("#TopbannerAFTEL img").attr({"src":"//cdn.optimizely.com/img/68328241/0a36338205a04a198f3850c1fd899148.jpg"});
});

 

maria 09-24-15
 

Re: Troubleshooting - css stopping my variations to appear?

Thank you, Napoleon for your answer as well!

Changing to window scope made my variations disappear (our website is a bit more complicated than the usual site). 

BUT

Our front-end developper found my mistake! It was a matter of & instead of ? in the URL.

I'll take the fact I'm no developper as an excuse though that's like html 101.. cough cough 

Thank you both again for your help Smiley Wink

Level 2