0 Likes

Full page HTML varations

Status: New
by jpfotoz ‎09-04-2015 September 4, 2015

When testing new designs.. it would be great if I could just drop in (copy paste) my new HTML and have Optimizely tranform it into a Javascrpt container (if needed) -- then from there I can use the UI to select the element for tracking etc..

 

 

Level 6

Comments
by seanemmel_ba
‎09-04-2015 September 4, 2015

That isn't really possible from a cross-language approach, so this isn't really something Optimizely "lacks" as a feature. There also isn't a "JavaScript container" that exists. That being said, there are plenty of tools out there that convert HTML into buildable JavaScript strings. For example:

 

http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

 

I don't use this tool that much these days, but I do take a similar approach when I build out HTML manually in my own JavaScript. For example:

 

http://screencast.com/t/WXD8kmYWPyv

 

When you use the WYSIWYG editor to select/modify elements within Optimizely, it actually generates JavaScript. So you could potentially take your HTML, convert it to a string using a tool like the above (or build it manually), then save the code to see the new page/template. After that, you THEN could click on elements and manipulate them. Either way, to fire goal tracking reliably, you really need to use the Optimizely JavaScript API over the editor, and if you're writing the markup yourself, you could simply give IDs or class names to said elements you want to track and then follow this basic structure for tracking:

http://screencast.com/t/Gi2SyRk9MNB3

 

Perhaps down the line we'll see more and more of this type of thing automated, but as the web technologies currently stand, this all still needs to be done by hand, and that's at no fault or lack of features for any platform, Optimizely included.

 

Hopefully this helps.

 

Level 2
by seanemmel_ba
‎09-04-2015 September 4, 2015

One more thing... this doesn't of course take into account any CSS you may have written. Rather than using the Experiment CSS feature in Optimizely (which runs for ALL variations, including the original), I oftentimes find myself once again converting CSS to a JavaScript string. From here I can append it to the head of the document within the variation JavaScript. I couldn't find a tool out there that converts CSS to a JavaScript string, so I created one myself. It's on one of my Codepen accounts here: 

 

http://codepen.io/seanemmel/pen/RNaRWz

 

That simply converts CSS to a JavaScript string. If you want to convert it to a string with a jQuery method that will append it to the head of the document, try this one here on a different Codepen account of mine: 

 

http://codepen.io/seanemmel_ba/pen/bdGRLe

 

For example:

 

http://screencast.com/t/rbjgmRgc

 

 

 

Level 2
by Patricia
‎09-08-2015 September 8, 2015

This is helpful! Thanks!

Level 2