- Optimizely X Web Experimentation
- Optimizely X Web Personalization
- Optimizely Classic
This article will help you:
- Implement the Optimizely snippet with a CMS or e-commerce platform
Do you use Wordpress, Shopify, Magento, or another common platform to host your site? You can implement the Optimizely snippet with many common CMS (Content Management System), e-commerce, or third-party site-building platforms.
This article lists our most common CMS integrations for Optimizely Classic. If you're using Optimizely X, you can use the same steps to implement the snippet, but other setup and features may not yet be supported.
Contact the Support team if you have questions about these integrations.
Magento also has its own article. Check it out for more information!
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:
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:
On Volusion you can edit your templates from the online Dashboard to add the Optimizely code snippet and start using Optimizely.
After logging into your dashboard, click Design > File Editor.
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.
Paste the Optimizely code snippet right after the <head> tag near the top of the code in Volusion's template editor.
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!
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.
If you're using Optimizely X to test on a checkout page, you might need to configure your site for PCI compliance. See this article for details.
Steps to implement Optimizely within Shopify
Login to your Shopify account and go to Themes.
Choose Template Editor.
Choose theme.liquid, and insert the Optimizely snippet just after the <head> tag.
Now Optimizely is implemented and will appear on every page.
Steps to track revenue in Optimizely Classic
In the Main Menu in Shopify, select Settings.
In the settings menu, choose Checkout.
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:
Note that you are adding two scripts to this page, one which sends revenue, and another which is your snippet.
The code block above is specifically designed to avoid a potential situation in which revenue is inadvertently overcounted when visitors view their order status more than once. You can learn more about this issue by clicking here.
Now revenue tracking is installed. Just go to your Optimizely account and add two goals:
Revenue (the code will populate it automatically)
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
As a work-around, place the Universal Analytics code in the theme.liquid file below the Optimizely snippet.
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.
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 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>')
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:
Log in to your Yahoo! Store Account and navigate to the “Store Manager” page.
Once there, navigate to the “Store Editor”
At the store editor, clicks on the red arrow at the top-right of the page to turn on the advanced features.
Click the Variables link.
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.
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!
Login to your Yahoo! Store Account and navigate to the “Store Manager” page.
Once there, navigate to the “Checkout & Navigation Manager.”
Proceed to the “Page Configuration” link.
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.
Repeat adding your Optimizely Implementation Snippet for all of the pages in your checkout process.
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 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
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:
If you have a https site, you can use:
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.
Navigate to the Settings option in the Home menu.
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.
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.
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.
- 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.)
- Click Edit HTML/CSS.
- Find HTMLHead.html in the template list and select it for editing.
- Paste your Optimizely snippet below where jQuery is injected.
- Click Save and the Optimizely snippet will be injected on your BigCommerce store.