Implement Web Experiment

Amplitude's Web Experimentation requires a standalone script that you must add to your website. Paste the script into the <head> element of your site, as high as possible to avoid flickering.

The script tracks impression events with the Browser SDK already installed on your site, or a third-party analytics SDK.

Note

See Amplitude's pricing page to find out if this feature is available on your Amplitude plan.

Add the experiment script

Replace API_KEY with your project's API key in one of the synchronous scripts below, depending on your region:

1<script src="https://cdn.amplitude.com/script/API_KEY.experiment.js"></script>

1<script src="https://cdn.eu.amplitude.com/script/API_KEY.experiment.js"></script>

Content security policies

If your site defines the script-src content policy directive, add *.amplitude.com and unsafe-inline to the policy values. These additions enable loading the Web Experiment script and visual editor on your site.

1Content-Security-Policy: script-src *.amplitude.com unsafe-inline;

Async script with anti-flicker snippet

The synchronous script above provides the best experience for your users. If you need to load the script asynchronously, include the following anti-flicker snippet:

 1<!-- The anti-flicker snippet. Should be set above the async experiment script -->
 2<script>
 3  // Set a timeout in milliseconds for the anti-flicker.
 4  var timeout = 1000; 
 5  var id = "amp-exp-css";
 6  if (!document.getElementById(id)) {
 7    var s = document.createElement("style");
 8    s.id = id;
 9    s.innerText = "* { visibility: hidden !important; background-image: none !important; }";
10    document.head.appendChild(s);
11    window.setTimeout(function () {s.remove()}, timeout);
12  }
13</script>
14<!-- Replace API_KEY with your project's API key -->
15<script async src="https://cdn.amplitude.com/script/API_KEY.experiment.js"></script>

 1<!-- The anti-flicker snippet. Should be set above the async experiment script -->
 2<script>
 3  // Set a timeout in milliseconds for the anti-flicker.
 4  var timeout = 1000; 
 5  var id = "amp-exp-css";
 6  if (!document.getElementById(id)) {
 7    var s = document.createElement("style");
 8    s.id = id;
 9    s.innerText = "* { visibility: hidden !important; background-image: none !important; }";
10    document.head.appendChild(s);
11    window.setTimeout(function () {s.remove()}, timeout);
12  }
13</script>
14<!-- Replace API_KEY with your project's API key -->
15<script async src="https://cdn.eu.amplitude.com/script/API_KEY.experiment.js"></script>

Integrate with a third-party CDP

If you use a CDP other than Amplitude to send events, set up an integration to provide user identity information and track events. If you don't set up an integration, the script assumes you have Amplitude Browser SDK installed on the same site.

The Web Experiment script supports common CDP integrations through an integration query parameter in the script URL.

Segment integration

Web experimentation supports Segment by default. Add integration=segment as a query parameter to the script URL. For example, if you use Amplitude's US region:

1<!-- Replace API_KEY with your project's API key -->
2<script src="https://cdn.amplitude.com/script/API_KEY.experiment.js?integration=segment"></script>

Tealium integration

If you send events through Tealium using Tealium iQ or Tealium AudienceStream & Universal Data Hub, then you don't need to set up an integration. Tealium loads the Amplitude Analytics SDK onto the site which integrates directly with the Web Experiment script.

Custom integrations

Implement the IntegrationPlugin interface and set the experimentIntegration window variable to add a custom integration. Place the plugin script before the Web Experiment script tag.

getUser(): object: Return the experiment user object.
track(): boolean: Track the event through a 3rd party. Return true if the event was tracked. Returning false causes the event to be persisted and retried at an interval.

 1<script>
 2window.experimentIntegration = {
 3  getUser: () => {
 4    // TODO: Return user
 5    return {
 6      user_id: "user",
 7      device_id: "device"
 8    };
 9  },
10  track: (e) => {
11    // TODO: Track event
12    analytics.track(
13      e.eventType,
14      e.eventProperties
15    );
16    return true;
17  }
18};
19</script>
20// TODO: Add the Web Experiment script tag

Contact support for help with a custom integration for your CDP.

Content management systems

Amplitude Web Experiment supports any CMS that supports custom scripts. Amplitude provides plugins that support both Wordpress and Shopify to help you get running on those platforms.

Wordpress

Amplitude's Wordpress plugin enables Amplitude Analytics, Experiment, and Session Replay.

Shopify

Amplitude's Shopify App enables Amplitude Analytics, Experiment, and Session Replay on your Shopify site.

Shopify and flickering

The method Shopify uses to loads Amplitude's Shopify app causes flickering. To avoid this, add the asynchronous web script with the anti-flicker snippet to your theme.liquid file.

Tag managers

Tag managers, like Google Tag Manager load scripts asynchronously, which causes flickering. Tag managers can be a good way to start using the visual editor to create variants in parallel if adding the Web Experiment script directly to the page takes time. Amplitude recommends against using tag managers in production.

Google Tag Manager (GTM)

Causes Flicker

Implementing Web Experiment with a tag manager will cause flicker. Only use a tag manager when getting started, if adding the script to the site is out of the question in the short-term.

Use a custom HTML tag to add the script using GTM.