This article will help you:
  • Use Optimizely with any of the CMS or e-commerce platforms you see in the list to the right

Do you use Wordpress, Shopify, Magento, or another common platform to host your site? You can implement Optimizely to run experiments on many common CMS (Content Management System), e-commerce, or third-party site-building platforms.

 
Note:

This article contains documentation on our most common integrations. If you'd like to see integration for another platform, let us know in our Optiverse community!

Wordpress

Wordpress is such a popular platform that we have an entire article dedicated to it. Check out that article for more information!

Magento

Magento also has its own article. Check it out for more information!

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's not hard to integrate Optimizely on Marketo forms pages. The process is identical to integrating Optimizely 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 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 '<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. 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 <head> 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 <head> and </head> tags, then you are good to go!

Shopify

The Optimizely App has been removed from The Shopify store, as changes to Shopify made tracking revenue available only to certain users. This will not affect current users of the app (so they do not need to change anything), though no new users can use it. 

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 the case with the default Shopify install -- this feature 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.
 

Steps to implement Optimizely within 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 <head> tag.

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

Steps to track revenue

  1. In the Main Menu in Shopify, select Settings.

  2. In the settings menu, choose Checkout.

  3. Scroll down to the section labeled Additional Content & Scripts.



    Here, you should paste our revenue tracking code.

In this area, you will need to paste some code to track revenue:


<!-- Optimizely Revenue Tracking Code -->
<script type="text/javascript">
var optimizely = optimizely || [];
var revenueInCents = {{ subtotal_price | money_without_currency }} * 100;
window.optimizely.push(["trackEvent", "eventName", {"revenue": revenueInCents}]);
</script>

<script src="//cdn.optimizely.com/js/XXXXXXXXX.js"></script>
<!-- End Optimizely Revenue Tracking Code -->

Note that you are adding two scripts to this page, one which sends revenue, and another which is your snippet.

Now revenue tracking is installed. Just go to your Optimizely account and add two goals:

  1. Revenue (the code will populate it automatically)

  2. Conversion. This will be a custom event called conversion and you will have one conversion for every person who orders. If one person makes two orders, there will be one conversion, but the revenue from both orders will be counted.

Shopify and Universal Analytics

If you’re looking to integrate Optimizely with Universal Analytics while using Shopify, you may be stumped 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 work-around, place the Universal Analytics code in the theme.liquid file below the Optimizely snippet.

 
Note:

You may notice that Shopify’s documentation also says to not place tracking code here, but this is the only section where the API call will remain present.

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

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.

Step 1 Copy the script code provided by Optimizely

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




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

Good news! If you are using Spreecommerce to power your e-commerce site, implementing the Optimizely snippet is incredibly easy. Here is an example of how to add the snippet to the <head> 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>')

PHP Websites

We recommend you 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 <head> block:

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

This allows you to quickly 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:

http://www.w3schools.com/php/php_includes.asp

http://php.net/manual/en/function.require-once.php

Yahoo! Stores

Adding Optimizely to the <head> of your website
  1. Log in to your Yahoo! Store Account and navigate to the “Store Manager” page.

  2. Once there, navigate to the “Store Editor”

  3. At the store editor, clicks on 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 (<script src="//cdn.optimizely.com/js/XXXXXXXX.js"></script>) to the “Head-tags” text box.

  6. Update and Publish your Yahoo! Store.

    Once you've done 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 <head> and </head> tags, then you are good to go!

Adding Optimizely to the Checkout and Cart Pages of your Yahoo! Store
  1. Login to your Yahoo! Store Account and navigate to the “Store Manager” page.

  2. Once there, navigate to the “Checkout & Navigation Manager.”

  3. Proceed to the “Page Configuration” link.

  4. Once you are on this page, you will need to add your unique Optimizely Implementation Snippet (<script src="//cdn.optimizely.com/js/XXXXXXXX.js"></script>) 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. Once you are finished with this, you might want to check out our walk-through on “Creating Conversion Goals with your Yahoo! Store Checkout Pages”

Adding 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 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, we will be using 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 our example, we will be using the following two values:

             A. Shopping Cart – ysco.cart

             B. Order Confirmation – ysco.confirm

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

4. Once you have your test prepared, you will want to create the necessary goals. To do this, click the Goals icon next to the Start Experiment button at the top right of the editor.

5. Click Create a New Goal on the next pop-up page. You should end-up here:

 

6. Once you are here, you are going to want to create a pageview goal and give it a name. We have called ours “Shopping Cart”. You will also want to now add the corresponding page value at this point. For our goal we will be using the Shopping Cart value which is “ysco.cart”. Type this into the URL text box.

7. When you have done this, you will want to setup the “URL Match Type” as a substring. This makes sure that any URL that contains “ysco.cart within it will be counted as a conversion. This is how it should look when you are finished:

 
 

8. After you have this part completed, you are ready to 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. In order to make the snippet work, you have to first 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 now prefixed with https or http. 

2. Now, you can 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. Navigate 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. For a workaround, see our article on using dynamic selectors.

Bigcommerce

To add the Optimizely snippet to a Bigcommerce store, you need to customize the layout template file. The steps below explain how to edit this file.

  1. Navigate 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. Find HTMLHead.html in the template list and select it for editing.


     
  4. Paste your Optimizely snippet below where jQuery is injected.


     
  5. Click Save and the Optimizely snippet will be injected on your BigCommerce store.