Rich-text Reply

Variation made with Experiment CSS and HTML won't load

AndresM 07-01-16
Accepted Solution

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. 

Yellow_at_the_bottom.jpg

 

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.

CSS.png

 

Level 2

Zsolt 07-01-16
 

Re: Variation made with Experiment CSS and HTML won't load

Could be that your markup is not triggered in sync with the website load. Could you post your code?
The CSS is not the problem in my opinion, and the warnings point out best practices but not necessarily issues.
Level 5
GaryK 07-01-16
 

Re: Variation made with Experiment CSS and HTML won't load

[ Edited ]
 
Level 2
AndresM 07-01-16
 

Re: Variation made with Experiment CSS and HTML won't load

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>
Level 2
Zsolt 07-01-16
 

Re: Variation made with Experiment CSS and HTML won't load

Is your Optimizely code snippet placed on the page in the topmost line in the header?
Level 5
AndresM 07-03-16
 

Re: Variation made with Experiment CSS and HTML won't load

[ Edited ]

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 &amp; 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:

dev tools.bmp

 

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.

 

Thanks

 

Level 2

Re: Variation made with Experiment CSS and HTML won't load

Hi Andres,

 

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?

 

Nils

AndresM 07-11-16
 

Re: Variation made with Experiment CSS and HTML won't load

Thanks Niel, the issue was indeed related to timing, it seems that there was something blocking the experiment code.

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.

Thanks! Smiley Happy
Level 2