- Optimizely X Web Experimentation
- Optimizely X Web Personalization
- Optimizely X Web Recommendations
This article will help you:
- Add one line of code to your site to start running Optimizely experiments (A/B tests)
- Choose the pages where you'd like to add the Optimizely code snippet
- Find your project code snippet in Optimizely
- Decide where to add the code in your HTML
If this is your first time using Optimizely, you'll need to add a small snippet of code to the <head> tag of your site's code to start running experiments. This snippet contains your unique Project ID and allows Optimizely experiments to run on your site. Once you add it, the snippet will update automatically; you don't need to do a thing.
This article shows you how to implement the snippet.
If you've been using Optimizely Classic and you're transitioning to Optimizely X, you don't need to add the snippet again. Just enable your existing snippet to include Optimizely X.
Want to see how the snippet is installed and follow along? Watch our two-minute video:
Is your site a Single Page Application (SPA)? Learn more about testing Optimizely on a Single Page Application.
After you complete one-line implementation of the snippet with the three steps below, you'll be able to run experiments anywhere on your site.
1. Decide where to add the snippet
Consider the architecture of your site and experimentation program when deciding where to add the snippet. Each Optimizely project, or workspace, has its own snippet.
If your account plan includes cross-project events, you can track metrics across project spaces. If not, make sure that all parts of your site where you measure results are in the same project. One snippet should run across all those pages.
If you have separate development and production environments, or different domains and subdomains, you'll likely need separate projects (and snippets) for each.
2. Retrieve the snippet
Next, retrieve the snippet that you’ll add to your site. Here's a quick walkthrough, with step-by-step instructions below:
Navigate to Settings > Implementation.
Copy the line of code above the Snippet Details heading, exactly as you see it. Don’t add http to the URL or make any other modifications.
If your account uses custom snippets, you might see more than one snippet listed. Choose the one that's relevant to this part of your experimentation program.
Enable the snippet for Optimizely X and choose a snippet configuration. Skip this step if you're using Optimizely the first time.
If you're transitioning from Classic to Optimizely X, choose between a bundled snippet and a standalone snippet. The bundled snippet is ~50kB larger. Use it to keep running experiments in Optimizely Classic while you try out Optimizely X. When you're ready to move to Optimizely X, switch to the standalone snippet to reduce snippet size and improve speed and performance.
Never have more than one snippet on your page at a time.
If you ever need to find your Project ID, it's the number immediately preceding the ".js" in the snippet URL.
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 added to the <head> tag of the HTML to ensure optimal performance. We recommend adding 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.
Load Optimizely with a tag manager or into a CMS
We don't recommend that you load the Optimizely snippet through a tag manager.
Loading Optimizely through a tag manager can cause issues such as page flashing, where the original version of your page is briefly displayed to visitors before the Optimizely experiment. Google Tag Manager, for example, doesn't support synchronous loading. Tag managers can also cause issues with your analytics integrations. To deliver the best experience to your visitors, we strongly recommend that you implement Optimizely outside of a tag manager.
If you must load Optimizely through a tag manager, consider these pitfalls and implementation suggestions and reach out to your Customer Success Manager to discuss implications.
Here are some tag managers that customers have used:
Google Tag Manager | Ensighten | Tealium iQ | Signal
If you're trying to add the Optimizely snippet to a site built using one of the following CMS or site-building platforms, please read the relevant article for more information:
Wordpress | Marketo landing pages | Yahoo store | Volusion store | Drupal | PHP website