Implement the one-line JavaScript snippet

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Web Personalization

If this is your first time using Optimizely Web Experimentation, add a small snippet of code (see Optimizely Web Experimentation JavaScript snippet) to the <head> tag of your site's code to start running experiments. This snippet contains your unique Project ID and lets Optimizely Web Experimentation run on your site. After you add it, the snippet updates automatically.

After you complete the one-line implementation of the snippet with the following steps, you can 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 Web Experimentation project, or workspace, has its own snippet.

  • If your account plan includes cross-project events, you can track metrics across project spaces.
  • If your account plan does not include cross-project events, 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 likely need separate projects (and snippets) for each.

2. Retrieve the snippet

Next, retrieve the snippet that you add to your site. 

  1. Go to Settings > Implementation.
  2. ClickCopy to Clipboard (icon) for the snippet you want to copy.

    copy_snippet.png

    If your account uses custom snippets, you might see more than one snippet listed. Choose the one that is relevant to this part of your experimentation program.

Never use more than one snippet on your site at a time.

If you ever need to find your Project ID, it is the number immediately preceding the ".js" in the snippet URL.

3. Specify origins where Optimizely Web Experimentation run

Specify the domains where Optimizely Web Experimentation run and track events.

An origin is a combination of a specific hostname, protocol, and port on your site. Inform Optimizely Web Experimentation where you will track events. By default, events that you track in Optimizely Web Experimentation can be used only 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

For optimal performance, add the Optimizely Web Experimentation snippet to the <head> tag of the HTML for your site. You should implement the snippet as high up in the head tag as possible, generally after your <html> tag, charset declarations, and possibly other meta tags. Place the Optimizely Web Experimentation snippet before code for any analytics or heatmapping platforms also.

Place these before the snippet:

  • Charset declarations and other meta tags, like <meta charset='utf-8'>
  • jQuery, if you are using your own version and not Optimizely Web Experimentation'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 is what the Optimizely Web Experimentation 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="https://cdn.optimizely.com/js/12345678.js"></script>
        <!-- Add scripts and other content here -->
    </head>
    <body>

Why in the top of the <head> tag? Optimizely Web Experimentation 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 Web Experimentation will make changes to the page as it loads.

If the snippet is added anywhere lower, the code will work, but if the page has already loaded content that the visitor sees before the Optimizely Web Experimentation snippet loads, the original version of the page may load before being transformed into the variation by Optimizely Web Experimentation. This is known as page flashing. In most cases, the code executes too quickly for this to be visible. To avoid potential problems, you should add the snippet as early in the execution path as possible.

Do not modify the snippet. Copy and paste it onto your site exactly as you see it within Optimizely Web Experimentation. Otherwise, Optimizely Web Experimentation may not run correctly on your site.

You will need the ability to add the snippet to the <head> tag of your production environment and development environments (if you have both). 

By default, the snippet is loaded synchronously, which is recommended. However, if you need to load Optimizely Web Experimentation asynchronously, see Synchronous and asynchronous snippet loading.

5. Check that the snippet is implemented

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

Load Optimizely Web Experimentation with a tag manager or into a CMS

You should not load the Optimizely Web Experimentation snippet through a tag manager. If you must load Optimizely Web Experimentation through a tag manager, consider these pitfalls and implementation suggestions and contact your Customer Success Manager to discuss implications.

Loading Optimizely Web Experimentation 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 Web Experimentation experiment. Google Tag Manager, for example, does not 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 Web Experimentation outside of a tag manager.

Customers have used the following tag managers: