Use a CMS or ecommerce platform with the Optimizely snippet

16 min

You can implement the Optimizely snippet with many common Content Management System (CMS), ecommerce, or third-party site-building platforms.

📘 Note Contact the Support team if you have questions about these integrations.

Drupal

Drupal created an Optimizely plugin. You can download it from Drupal.org and use it to add your Optimizely snippet to a Drupal-based page.

Marketo landing pages

You can integrate Optimizely on Marketo forms pages. Follow the same process as integrating Optimizely on a web page using Marketo's "Raw HTML" editor.

Select a landing page template and Edit Draft.

Select HTML Source in the editor window.

Add your Optimizely snippet to the <head> section of your template.

Volusion

On Volusion, you can edit your templates from the online dashboard to add the Optimizely code snippet and start using Optimizely.

Select the template file from the shortcut menu, something like template_xx.html. This loads up the HTML code for your Volusion store.

Paste the Optimizely code snippet right after the <head> tag.

Click Save.

When you have added the snippet correctly, you can check the implementation by visiting your website and viewing the source code. The Optimizely snippet should be between the <head> and </head> tags.

Shopify

Run Web Experimentation on your Shopify storefront by adding the snippet to your theme template. Shopify hosts the checkout flow on a separate domain, so the snippet does not load on checkout pages. Capture checkout events through a Shopify custom pixel instead.

📘 Note If you use Optimizely to test on a checkout page, you might need to configure your site for PCI compliance.

Capture checkout events

Shopify hosts the checkout flow on a separate domain, so the Optimizely snippet does not load on checkout pages. To send checkout events to Optimizely as metrics, configure a Shopify custom pixel that subscribes to checkout_started and checkout_completed. See Capture Shopify checkout events for the full procedure.

Known issues with Shopify and Web Experimentation

Tracking metrics in Shopify environments has the following known issues:

Shopify hosts the checkout funnel on a separate domain, so the Optimizely snippet does not load on checkout pages. Use a Shopify custom pixel to subscribe to checkout events and forward them to Optimizely. Events forwarded this way register as cross-origin events.

Optimizely's conversion totals can exceed Shopify's totals if the revenue tracking call fires more than once. For example, if a user reloads a given page, and the revenue tracking call is on that page in its original configuration, the call may fire more than once in response to the same event.

Because Shopify is integrated and knows when a customer pays for a purchase, Optimizely's revenue totals might sometimes register as lower than those by Shopify. For example, a user might make a payment but leave because the page takes too long. The sale still goes through, but Optimizely does not track the revenue generated because the customer left before the page with that event loaded.

Implement the snippet in Shopify

Click the store you want to modify.

Click Online Store.

Click Themes.

Click More actions (…) in your current theme's card. Shopify highlights the current theme in green.

Click Edit code.

Click theme.liquid in the layout folder.

Paste the Optimizely snippet immediately before the closing </head> tag.

📘 Note Shopify displays warnings suggesting the snippet should be async, deferred, or hosted on Shopify's CDN. Ignore these warnings. The Optimizely snippet must load synchronously.

Click Save.

Click Exit.

The snippet loads on every page of your store except the checkout and thank-you pages.

📘 Note For revenue tracking on Shopify, the Optimizely Data Platform (ODP) app is available from the Shopify store and works across all Shopify plans.

Sitefinity

This widget offers you integration between Sitefinity and Optimizely to let you run A/B tests for your Sitefinity pages. It provides full control over the page variations and advanced tracking for the results of the A/B tests.

Download the widget from its publisher . Or, if you want to customize the source code, you can download the project from GitHub.

Download, unzip the file, and paste the assembly within your Sitefinity version in the /bin/ folder of your project.

Copy the script code provided by Optimizely.

Find the Optimizely Script widget located in your Scripts and Style section.

Paste the copied text into the text area.

For information, see Sitefinity.

Spreecommerce

Spreecommerce lets you build a storefront on an open source platform powered by the Ruby on Rails framework.

Spree uses Deface, which lets users create override files that manipulate the generated HTML. Create a file in app/overrides/ of the store application with the following:

Deface::Override.new(:virtual_path => "spree/shared/_head",  
:name => "add_optimizely_to_header",  
:insert_after => "title",  
:text => '<script src="//cdn.optimizely.com/js/12343566.js"></script>')

This lets you change the Optimizely account ID if you create projects because it is only located in one place. This removes the need to copy and paste code.

PHP Websites

You should include the Optimizely snippet in the head of every page. While there are many ways to do this, you can put your implementation snippet in its own included file. Place the following in your <head> block:

<?php require_once("optimizely.inc"); ?>

This lets you change the Optimizely account ID if you create projects because it is only located in one place. This removes the need to copy and paste code.

cPanel

cPanel is a web hosting control panel. When you add the Optimizely snippet to a page in cPanel, the snippet is modified.

If you add the snippet without any modifications, cPanel changes the snippet from

<script src="//cdn.optimizely.com/js/1234567890.js"></script>

<script src="../..//cdn.optimizely.com/js/1234567890.js"></script>.

Note that 1234567890 should be your unique snippet ID.

Steps to implement the snippet in cPanel

Add the snippet in cpanel. Use <script src="https://cdn.optimizely.com/js/1234567890.js"></script>.

Squarespace

According to Squarespace documentation, you can add custom code and scripts to your site using the Code Injection area in Advanced Settings. The following are the steps to adding your Optimizely snippet to a Squarespace site.

Go to Settings.

Click Advanced from the list of available settings to access Code Injection.

Paste your Optimizely snippet into the Header section of the Code Injection page.

Click Save. The Optimizely snippet is injected onto your Squarespace site. If this creates any JavaScript errors on the site, you may also need to add jQuery as a dependency by adding the following line of code above the Optimizely snippet in the header of your site:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

📘 Note Squarespace uses dynamic selectors. When setting up an experiment on a Squarespace site, be aware that the default selectors used in the Optimizely Visual Editor may not work.

Bigcommerce

To add the Optimizely snippet to a Bigcommerce store, you need to customize the layout template file.

Go to the Design section in the Settings menu. (In some versions of the control panel, this is located under Setup & Tools > Set Up Your Store > Design.)

Click Edit HTML/CSS.

Select HTMLHead.html in the template list.

Paste your Optimizely snippet where jQuery is injected.

Click Save and the Optimizely snippet is injected on your BigCommerce store.