Edit HTML duplicating element
I am attempting to use Optimizely to conduct a variant test that should be straightforward, but I'm having issues.
In essence, I am using the Edit HTML feature to modify one <h2> element and insert another.
In this particular instance, I'm using a small amount of in-line styling to adjust padding. In theory I can't rule out this is causing a problem, but I kind of doubt it.
1. This graphic shows my modified headline within the Optimizely dashboard. The Variation appears exactly as I intended, and I created this variation via EDIT HTML. The element that was edited was the "Watch our flower bombing...." sub--head. http://www.solve-ideas.com/wp-content/uploads/1-Wh
2. This graphic shows my variant within the Optimizely preview pane. Just as with #1, everything appears to be normal. http://www.solve-ideas.com/wp-content/uploads/2-Wh
3. This graphic shows the experiment with my variant in the wild. Note that it has duplicated the element that I've modified. I created this graphic by forcing a variant. http://www.solve-ideas.com/wp-content/uploads/1-Wh
4. This graphic shows my variant in the wild (created via a forced variation), but it shows the source code, where you can see the element has been duplicated. http://www.solve-ideas.com/wp-content/uploads/4-Wh
I'm at a bit of a loss as to what's causing this and how to fix it. I can't correct it within the Optimizely experiments panel because it doesn't exist.
Anybody run into this problem before?
OK - This took forever... skip to the bottom if you want to know the answer...
If you review the page with optimizely_log=true, you can see that the code is running twice:
This line says it is going to run "Variation #1" of the experiment named "Home Page Sigur Ros 2":
Optimizely / Plan / experiment "Home Page Sigur Ros 2" (2208370187) in variation "Variation #1" (2199540242) [time 14 +3]
This line says it is waiting for the <h2> content to appear:
Optimizely / Evaluator / '.content > h2' not found [time 14 +0]
A few lines later, it runs the code, then a few lines later it runs the code again! (which explains why you see the headline twice - it must be replacing the first <h2> with the two new <h2> then running the code again turning 2 <h2> into 4 <h2>s!
Optimizely / API / Called function "activateUniversalAnalytics" [time 47 +24] Optimizely / Evaluator / 5 times waited [time 331 +201] Optimizely / Evaluator / 1 steps remaining [time 332 +1] Optimizely / Evaluator / Run code: $(".content > h2").replaceWith("<h2 style=\"margin-bottom:0;\">Watch our flower bombing film and help us make a difference.</h2>\n<h2 style=\"margin-top:0;\">Featuring music by Sigur Rós.</h2>"); [time 332 +0] Optimizely / Evaluator / 5 total times waited [time 334 +2] Optimizely / Evaluator / 5 times waited [time 335 +1] Optimizely / Evaluator / 5 total times waited [time 335 +0] Optimizely / Evaluator / 2 times waited [time 165 +118] Optimizely / Evaluator / 1 steps remaining [time 166 +1] Optimizely / Evaluator / Run code: $(".content > h2").replaceWith("<h2 style=\"margin-bottom:0;\">Watch our flower bombing film and help us make a difference.</h2>\n<h2 style=\"margin-top:0;\">Featuring music by Sigur Rós.</h2>"); [time 166 +0]
This makes me think there is either a bug (niche case?) in how the replace text is working (which would be odd, because I have not experienced it yet and we've done a decent amount of text replacements)
Here is the HTML for that section of your page:
<h1>Bees Need Our Help</h1> <h2 style="margin-bottom:20px;">Watch our flower bombing film and help us make a difference.</h2> <p><!--<br /> <h2 style="margin-top:0;">Featuring music by Sigur Rós.</h2> <p>--></p>
Notice that it has the "Featuring music by Sigur Rós" text in it. Simply wrapped inside a comment.
But... even if this is the reason for why it is running the code twice, replacing an <h2> that is inside a comment with a new <h2> does not remove the comments.
Then... I found the answer.
You have the Optimizely Snippet included in your page two times.
If you View Source in FireFox, the snippet is referenced on line 25 and line 27.
Therefore the experiment runs twice, because the code loads twice.
This is my fourth experiment, but all of my previous experiments involved cutting. I forced some variants on the other ones and couldn't re-create the code. Duplicate code, however, went unnoticed until I published an experiment that dealt with adding text.
Very smart sir....very appreciative.