Learn More: Implement the Snippet
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 A/B tests. 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.
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 one time. Once you do, you can run experiment freely across your site and measure impact across multiple pages.
Unless you have cross-project events, you can't measure results across projects in Optimizely. You likely need to create separate projects for different domains or subdomains, or separate development and production environments. Each project must have its own snippet.
If you want to track events 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.
- Navigate to Settings > Implementation.
- Copy the line of code above the Snippet Details heading, exactly as you see it. Don’t add http/https to the URL or make any other modifications.
- Enable the snippet for Optimizely X and choose a snippet configuration.
Each project in Optimizely has its own snippet (unless your account uses a custom snippet implementation). 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.
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
- 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
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.