Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

The availability of features may depend on your plan type. Contact your Customer Success Manager if you have any questions.

Dev GuideAPI ReferenceUser Guide
Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
Legal TermsGitHubDev CommunityOptimizely AcademySubmit a ticket

Use a CMS or ecommerce platform with Optimizely snippet

Describes how to implement the Optimizely snippet with a CMS or ecommerce platform

Suggest Edits

You can implement the Optimizely snippet with many common CMS (Content Management System), 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 here 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 integration Optimizely on a web page using Marketo's "Raw HTML" editor:

  1. Select a landing page template and Edit Draft.
  2. Select HTML Source in the editor window.
  3. 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.

  1. Log in to Volusion and click Design > File Editor.
  2. Select the template file from the shortcut menu, something like template\_xx.html. This loads up the HTML code for your Volusion store.
  3. Paste the Optimizely code snippet right after the <head> tag.
  4. 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

The Optimizely Data Platform app is available from the Shopify store. Changes to Shopify had made tracking revenue available only to certain users when using the previous Optimizely app with Shopify. This app makes revenue tracking available to all Shopify plans.

📘

Note

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

Known issues with Shopify and Optimizely Web Experimentation

There are some known issues with tracking metrics in environments using both Optimizely and Shopify:

  • Shopify's checkout funnel is hosted on a different domain. If you have Shopify Premium, you should be able to use whatever domain you want, but sometimes this still registers as a cross-origin event.
  • Optimizely's conversion totals could be higher than those registered by Shopify, depending on how revenue tracking was originally implemented. For example, if a user reloads a given page, and the revenue tracking call is on that page in its original configuration, the call could 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.

Steps to implement Optimizely in Shopify

  1. Log in to your Shopify account and go to Themes.

  2. Choose Template Editor.

  3. Choose theme.liquid and insert the Optimizely snippet after the <head> tag.

Now Optimizely is implemented and displays on every page.

Shopify and Universal Analytics

If you integrate Optimizely with Universal Analytics while using Shopify, you may get confused when you get to Shopify’s Documentation to Enable Analytics. Optimizely requires an extra API call inside your Universal Analytics code snippet, but Shopify specifically says to not place extra JavaScript in that field.

As a workaround, place the Universal Analytics code in the theme.liquid file below the Optimizely snippet.

📘

Note

Shopify’s documentation also says to not place tracking code here, but this is the only section where the API call remains present.

Follow these same steps to incorporate the Optimizely snippet and Universal Analytics code within the Checkout theme files. 

Sitefinity

This widget offers you integration between Sitefinity and Optimizely to allow for easy-to-use AB testing for your Sitefinity pages. It comes with full control over the page variations and advanced tracking for the results of the A/B tests.

Click here to 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.

  1. Copy the script code provided by Optimizely.
  2. Find the Optimizely Script widget located in your  Scripts and Style section.
  3. Paste the copied text into the text area.

For information, visit Sitefinity.

Spreecommerce

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

Here is an example of how to add the snippet to the <head> tag across your site.

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 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 will change the snippet from

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

to

<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. Below are the steps to adding your Optimizely snippet to a Squarespace site.

  1. Go toSettings.

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

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

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

  1. 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.)
  2. Click Edit HTML/CSS.
  3. Select HTMLHead.html in the template list.
  4. Paste your Optimizely snippet where jQuery is injected.
  5. Click Save and the Optimizely snippet is injected on your BigCommerce store.

Updated 5 months ago