3. Specify origins where Optimizely will run
Next, specify the domains where Optimizely will run and track events.
An “origin” is a combination of a specific hostname, protocol, and port on your site. Tell Optimizely where you'll track events events. By default, events that you track in Optimizely can only be used to target changes on the same origin, so enable cross-origin targeting to track events across origins.
4. Add your snippet to the <head> tag of your site
The Optimizely snippet must be installed in the <head> tag of the HTML to ensure optimal performance. We recommend installing the Optimizely snippet as high up in the head tag as possible, generally after your <html> tag, charset declarations, and possibly other meta tags. Add the Optimizely snippet before the code for any analytics or heatmapping platforms as well.
Place these before the snippet:
Charset declarations and other meta tags, like <meta charset='utf-8'>
jQuery, if you're using your own version and not Optimizely's version (see jQuery Settings)
Place these after the snippet:
All other elements on your page
Any analytics or heatmapping code
Other content in a tag manager
Here's what the Optimizely snippet might look like on a page:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Add other meta information here -->
<!-- Add stylesheets here -->
<!-- Add scripts and other content here -->
Why in the top of the head tag? Optimizely works by making changes to your page as the page loads. If the snippet is added to the top of the head tag, then Optimizely will make changes to the page as it loads.
If the snippet is added anywhere lower, it will technically still work. But if the page has already loaded content that the visitor sees before the Optimizely snippet loads, the original version of the page may load before being transformed into the variation by Optimizely. This is known as "page flashing." In most cases, the code executes too quickly for this to be visible. But to avoid any potential problems we strongly encourage you to add the snippet as early in the execution path as possible.
Please don't modify the snippet. Copy and paste it onto your site exactly as you see it within Optimizely. Otherwise, Optimizely may not run correctly on your site.
You'll need the ability to add the snippet to the head tag of your production environment and development environments (if you have both). If you don't have access, it's possible to implement Optimizely through a tag manager.
By default, the snippet is loaded synchronously, which is recommended. However, if you need to load Optimizely asynchronously, read this article to learn to implement asynchronous loading.