Variation made with Experiment CSS and HTML won't load
Hi, I'm having problems with an experiment that adds a yellow floating bar with a CTA to the bottom of a page.
The problem is that the floating bar doesn't always show, even after setting traffic allocation 100% to the variant and forcing the variation using URL parameters it would only show around 1 in 6 times.
I noticed that the experiment CSS showed some warnings, not sure if they are the reason?
Thanks for any help you can provide.
Solved! Go to Solution.
The CSS is not the problem in my opinion, and the warnings point out best practices but not necessarily issues.
Hey, thanks for the help, here's the code
<div id="floatingBar" style="z-index: 3172000;"><div><p>SIGN UP NOW AND GET $5,000 FREE CREDITS</p><a href="/sign-up.shtml">SIGN UP</a></div></div>
They snippet is literally the first thing in the head.
<head> <script src="//cdn.optimizely.com/js/2168990615.js"></script> <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Free Casino Games & Online Slots | Empire City Online Casino</title>
I tried relaxing the audience targeting from new users only to all users but the problem remains.
When the floating bar does appear on screen the page element appeared in the Browser developer tools:
But when it doens't appear on screen its also doesn't appear in the dev tools, just wanted to point this out as I thought that maybe the problem is that something else in the page was sort of covering it. It looks more like Optimizely is not always injecting the code (even though it was set to 100% traffic allocation to the variant and targeting criteria was relaxed).
Really confused, hope you can share some ideas.
What I think might be happening is a timing issue, that Optimizely tries appending your code to the body when your body doesn't exist, or your body gets recreated after Optimizely has already appended the HTML/CSS-code.
Can you try wrapping your variation code in a document.ready() function? See e.g. here.
Then for the CSS, please append this directly as a style tag in the variation code as well, see e.g. here.
Does this help you?
We did however had to append the CSS code into the HTML experiment to make it work, not sure why It wouldn't work otherwise.