Dev GuideAPI ReferenceUser Guide
Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideProduct feedbackGitHubNuGetDev CommunitySubmit a ticketLog In
Product feedbackGitHubNuGetDev CommunitySubmit a ticket

Use a CMS or ecommerce platform with Optimizely snippet

This topic describes how to implement the Optimizely snippet with a CMS or ecommerce platform.

Suggest Edits

Do you use Drupal, Shopify, or another common platform to host your site? 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

There is an Optimizely plugin that was created by the good people at netstudio. You can download it here and use it to add your Optimizely snippet to a Drupal based page.

Marketo landing pages

It is not hard to integrate Optimizely Web Experimentation on Marketo forms pages. The process is identical to integrating Optimizely Web Experimentation on any other web page; you'll just need to use Marketo's "Raw HTML" editor to do so. Here's a step-by-step procedure for integrating Optimizely Web Experimentation into Marketo form pages:

  1. Select a landing page template and Edit Draft.

  2. Select HTML Source in the editor window.

  3. Add your Optimizely snippet to the 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 Web Experimentation.

  1. After logging into your dashboard, click Design > File Editor.

  2. On the next page, select the template file from the shortcut menu on the right, something like template_xx.html. This loads up the HTML code for your Volusion store.

  3. Paste the Optimizely code snippet right after the tag near the top of the code in Volusion's template editor.

  4. Click Save. Once you have added the snippet correctly, you can check the implementation by navigating to your website and viewing the source code. If the Optimizely snippet is located between the and tags, then you are good to go!

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.

For current users of the previous Optimizely app on Shopify:

Unless you have a Shopify Plus account, you will not be able to track revenue. You can, however, still run A/B tests with Optimizely and track other goals.

Why did this change occur?

  • The revenue goal only works properly when the "thank you" page is on the same domain as the site that is being tested. For instance, if your store is at www.myfakestore.com, then your checkout page must also be on myfakestore.com, not shopify.com. That is no longer possible with the default Shopify install; instead, this capability is only available with Shopify Plus.
  • SSL is required to support putting the thank you page on the same domain as the main site. To do this, you need Shopify Plus.

If you use Shopify, you must implement the Optimizely snippet as a script tag within Shopify. To do this, you will need to sign up for an Optimizely account, then grab the snippet from your project.

📘

Note

If you are using 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 Web Experimentation 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 Web Experimentation'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 Web Experimentation's revenue totals might in some cases register as lower than those tallied by Shopify. For example, a user might make a payment but notices that the page is taking too long to load. So the customer leaves the page. The sale still goes through, but Optimizely does not track the revenue generated by the sale because customer left before the page with that event loaded.

Steps to implement Optimizely Web Experimentation in Shopify

  1. Login to your Shopify account and go to Themes.

  2. Choose Template Editor.

  3. Choose theme.liquid, and insert the Optimizely snippet just after the tag.

  4. Now Optimizely Web Experimentation is implemented and will appear on every page.

Shopify and Universal Analytics

If you integrate Optimizely Web Experimentation with Universal Analytics while using Shopify, you may get confused when you get to Shopify’s Documentation to Enable Analytics. Optimizely Web Experimentation 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 work-around, 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 as well as with 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.

Just 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 and you should be good to go.

For more information visit Sitefinity.

Spreecommerce

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

If you are using Spreecommerce to power your ecommerce site, implementing the Optimizely snippet is incredibly easy. Here is an example of how to add the snippet to the tag across your site.

Spree uses a tool called deface, which allows users to create override files that manipulate the HTML that is generated. Simply 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 new projects, since it is only located in one place (the optimizely.inc file). This removes the need to copy and paste code, and is known as DRY -- Don't Repeat Yourself.

For more information on PHP includes and requires, see:

PHP Websites

You should include the Optimizely snippet in the head of every page. While there are many ways to do this, one approach is to put your implementation snippet in its own include file, named "optimizely.inc". Then, place the following in your block:

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

This lets you change the Optimizely account id if you create new projects, since it is only located in one place (the optimizely.inc file). This removes the need to copy and paste code, and is known as DRY -- Don't Repeat Yourself.

For more information on PHP includes and requires, see:

Yahoo! Stores

Add Optimizely Web Experimentation to the of your website:

  1. Log in to your Yahoo! Store Account and go to the Store Manager page.
  2. Go to the Store Editor.
  3. At the store editor, click the red arrow at the top-right of the page to turn on the advanced features.
  4. Click the Variables link.
  5. Under the Page Properties section, add your unique Optimizely Implementation Snippet () to the “Head-tags” text box.
  6. Update and Publish your Yahoo! Store.
    After you do this correctly, you can check the implementation by navigating to your website and viewing the source code. If the Optimizely snippet is located between the and tags, then you are good to go!

Add Optimizely Web Experimentation to the Checkout and Cart Pages of your Yahoo! Store

  1. Login to your Yahoo! Store Account and go to the Store Manager page.

  2. Go to the Checkout & Navigation Manager.

  3. Go to the Page Configuration link.

  4. Add your unique Optimizely Implementation Snippet () to the HTML Head Section text box in the Advanced Settings at the bottom of the page.

  5. Repeat adding your Optimizely Implementation Snippet for all of the pages in your checkout process.

  6. Update and publish your Yahoo! Store. 

Add Pageview goals to your Yahoo! Stores Checkout

Pageview goals are extremely beneficial to counting conversions to the different goals on your site. For example, if people make it to your confirmation page, you can assume that they bought something and mark them as a conversion! Yahoo! Stores has done a great job of providing the URL Substrings that you can use to match back to Optimizely Web Experimentation to see when this happens. Here is a quick tutorial on how to track users from your Yahoo! Store to your Yahoo! Checkout Page(s):

  1. Figure out which page in your checkout process that you would like to track. For this example, use both the Shopping Cart and Confirmation pages to track the different steps in the funnel.

  2. Go to: <<<http://help.yahoo.com/l/us/yahoo/smallbusiness/store/analytics/reports/reports-20.html>>> and find the corresponding page values (you need to scroll down a little bit to find the values). For the example, you are using the following two values:

    • Shopping Cart – ysco.cart
    • Order Confirmation – ysco.confirm

  3. Sign-In to Optimizely Web Experimentation and design the desired test of your choice.

  4. Create the necessary goals. To do this, click Goals next to Start Experiment at the top right of the editor.

  5. Click Create a New Goal on the next pop-up page. 

  6. Create a pageview goal and give it a name, such as Shopping Cart. Also, add the corresponding page value at this point. For this example, enter the Shopping Cart value, “ysco.cart” into the URL text box.

  7. Set the URL Match Type as a substring. This makes sure that any URL that contains “ysco.cart within it is counted as a conversion. This is how it should look when you are finished:

  8. Run your test. If you are having problems, make sure that you have added your Optimizely Snippet Correctly to the desired checkout pages.

cPanel

cPanel is a web-hosting control panel. When you add the Optimizely snippet to a page in cPanel, the snippet will be modified. When you click Options > Diagnostic report in your experiment, the snippet seems to work properly, but this isn't the case. 

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

  1. To make the snippet work, determine if the website you are working on is using http or https. You can figure this out by simply going to the website in your browser. The URL you typed in is prefixed with https or http. 

  2. Add the snippet in cpanel. If you have a http site, you can use:

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

    If you have a https site, you can 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 to the Settings option in the Home menu.

  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 and the Optimizely snippet will be 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 3 months ago