Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Implement the snippet for Optimizely X

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
RELEVANT PRODUCTS:
  • 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 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.

This article shows you how to implement the snippet.

If you've been using Optimizely Classic, you don't need to add the snippet to your site code again. Jump straight to enabling 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 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.

 
Tip:

Once you install the snippet, head over to the Optimizely Academy to practice your Optimizely skills and learn about web optimization strategy. 

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. Here's a quick walkthrough, with step-by-step instructions below:

  1. Navigate to Settings > Implementation.

  2. 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.

  3. Enable the snippet for Optimizely X and choose a snippet configuration.

    If you've been using Optimizely Classic and you're trying out Optimizely X, choose between a bundled snippet (which includes Optimizely Classic and Optimizely X) 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.

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. See our article on projects for more information on managing multiple projects.

Tip:

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 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:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!-- Add other meta information here -->
        <!-- Add stylesheets here -->
        <script src="//cdn.optimizely.com/js/12345678.js"></script>
        <!-- Add scripts and other content here -->
    </head>
    <body>

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.

 
Important:

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.

 
Note:

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.

Check that the snippet is implemented on a page

Here's how to check that the snippet has been implemented on your page correctly.

Add the snippet with a tag manager or into a CMS or 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 | 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 | Magento | Drupal | PHP website

You always can use tag managers and CMS platforms above to add the Optimizely snippet to your site, just like in Optimizely Classic. However, we may not have pre-built integrations for using those platforms with Optimizely X Web products. Here's an updated list of platforms that integrate with Optimizely X.