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
To start running A/B tests on your site, you'll need to add a small snippet of code to the <head> tag of your site's code. This snippet contains your unique Project ID, and it allows the experiments you create in Optimizely to execute on your site. It automatically updates to run any test you create in the Optimizely Editor. You don’t have to change a thing.
This article shows you how to implement the snippet.
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 before you add your snippet.
Once you install the snippet with the three steps below, you'll be able to run experiments anywhere on your site.
Once you install the snippet, head over to the Optimizely Academy to practice your Optimizely skills and learn about web optimization strategy.
Or, learn about additional functionality. Read about advanced implementation for common setup options used by mature teams, including custom events, integrations, offline conversions.
1. Decide where to add the snippet
To start testing, add the Optimizely snippet to every page on your site. You’ll do this just once, but once you do you can run experiment freely across your site and measure impact across multiple pages.
Remember, you can’t measure results across projects in Optimizely. You might have different projects for different domains or subdomains, or separate development and production environments; each project must have its own snippet.
If you want to track goals across different parts of your site, make sure those pages are included in the same project, using the same snippet. And, check that the snippet is on each of those pages.
2. Retrieve the snippet
Next, retrieve the snippet that you’ll add to your site.
Copy the line of code above the Snippet Details, exactly as you see it. Don’t add http to the URL or make any other modifications.
Navigate to Settings > Implementation.
If you ever need to find your Project ID, it is the number immediately preceding the ".js" in the snippet URL. So, in the above image, the project ID would be 5629499534213120.
Each project in Optimizely has its own snippet, so if you have multiple projects for different environments or domains, make sure to use the correct Snippet on each site. You should never have more than one snippet on your page at a time, even if the snippets have unique project IDs. See our article on projects for more information on managing multiple projects.
3. 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)
Any information that Optimizely must use for targeting experiments, such as custom tags
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 may 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 other than the top of the head tag, it will technically still work. But if the page has already loaded a lot of content that the visitor sees before the Optimizely snippet loads, then 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 encourage you to add the snippet as early on 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.
Adding the snippet with a tag manager or into a CMS/site-building platform
Ideally, you should load Optimizely outside of a tag manager. Google Tag Manager, for example, doesn’t support synchronous loading so you may encounter issues with page flashing or your analytics integrations.
But if you already use a tag manager like Google Tag Manager or Tealium, you can still use them to add the snippet to your site. Please see our article on Tag Managers to learn more about implementing Optimizely in:
Google Tag Manager | Ensighten | Tealium iQ
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