Shopify A/B Testing Integration Convert Experiences

Integrate Shopify

You like the ability of A/B and multivariate testing on your Shopify with Convert Experiences? 

This is possible, read more below...

Step 1: Convert Experiences Project Code

In Convert Experiences you need to take the project ID number from Project Settings as you see in the image below. 

Step 2: Adding the Convert Experiences Code to Shopify

To have an integration between the two platforms please go to Online Store > Themes > More Settings > Edit HTML/CSS

Select the theme.liquid layout and paste the tracking code, just before the first if section, as shown in the screenshot below:

Paste in the indicated area the code shown below. Make sure you replace the project ID number, that you took from the settings page and replace this entire text (including the brackets) <REPLACE THIS WITH PROJECT ID NUMBER>

<script type="text/javascript">
var _conv_page_type = "{% if template == 'index' %}homepage{% else template == "collections" %}collection{% else template == "article" %}article{% else template == "product" %}product{% else template == "cart" %}cart{% else %}other{% endif %}";
 var _conv_category_id = "";
 var _conv_category_name = "{{ collection.title }}";
 var _conv_product_sku = "";
 var _conv_product_name = "{{ product.title }}";
 var _conv_product_price = "{{ product.compare_at_price_min | money }}";
 var _conv_customer_id = "";
 var _conv_custom_v1 = "{{ tag }}";
 var _conv_custom_v2 = "{{ order.shipping_address.province }}";
 var _conv_custom_v3 = "{{ cart.item_count }}";
 var _conv_custom_v4 = "{{ cart.total_price | money_without_currency }}";

var _conv_host = (("https:" == document.location.protocol) ? "" : "");document.write(unescape("%3Cscript src='" + _conv_host + "/js/<REPLACE THIS WITH PROJECT ID NUMBER>.js' type='text/javascript'%3E%3C/script%3E")); 

Don't forget to save your changes in Shopify

Step 3: Adding the code to the Checkout Pages

We need to add the Convert Experiences tracking code to the checkout pages as well to be able to track conversions. For that. we'll use the field where you can place additional Google Analytics scripts since that seems to be the only one appearing on all the checkout pages.

For that, go to Settings -> Online Store and scroll down to the Google Analytics section. In the "Adittional Google Analytics Javascript" paste the following code:

if(typeof _conv_host == "undefined") {
    window["_conv_prevent_bodyhide"] = true;
    (function() {
       var _conv_track = document.createElement('script');
       _conv_track.src = "";

replacing "XXXXX-XXXXX" with the Project ID found in your Project's Settings (same screen where you can find your Convert Experiences tracking code).

Here is an example of the complete script:

if(typeof _conv_host == "undefined") {
   window["_conv_prevent_bodyhide"] = true;
   (function() {
      var _conv_track = document.createElement('script');
      _conv_track.src = "";

Here is a screenshot with the Shopify field we are using:

Step 4: Allow the checkout page domain in your project settings

On Shopify, the checkout pages are presented under a central shopify subdomain ( or your own domain, depending on the type of the Shopify account you have. In either situation (using your own or shopify domain), you need to allow that domain in your project's settings. Add that specific domain to your project settings (see screenshots below):


Step 5: Forward tracking cookies to the checkout domain

 If you are not using your own domain or if you are using a totally different domain than your main domain, for the checkout pages, you will need to manually forward the tracking cookies so that experiments fired on the shop pages can be connected later on to a conversion. To do that, on the cart page, where user leaves your main domain, you need to read the convert tracking cookies and forward them to the checkout domain as explained below.  

Go to Online Store > Themes > More Settings > Edit HTML/CSS  as explained in step 2) and edit the cart template:

Then, add the following JS script inside that file, just before the <form> tag:

<script type="text/javascript">
function _conv_copy_cookies(form) {
try {
var _conv_v = encodeURIComponent(convert.getCookie("_conv_v"));
var _conv_s = encodeURIComponent(convert.getCookie("_conv_s"));

form.action ='/cart?_conv_v='+ _conv_v + '&_conv_s='+ _conv_s ;
} catch(e) {}
return true;

Next, add the following inside the <form> tag:

onsubmit="return _conv_copy_cookies(this)"

After this, you should be done. Now, the Convert Experiences cookies should now be forwarded to the checkout URL as two GET variables: _conv_v and _conv_s;

Note: if you use for checkout a subdomain of your main domain than you do not have to do this step. Cookies will be saved under the root domain making them available on shop and checkout pages.

Step 6: Manual Revenue Tracking

If you do not automatically get the revenue attached to a goal, that fires on the transaction "thank you page", then please install the revenue tracking code under Settings ->Checkout -> Additional content & scripts :

{% assign products_count = 0 %}
{% for line_item in line_items %}
{% capture products_count %}{{ products_count | plus: line_item.quantity }}{% endcapture %}
{% endfor %}
<script type="text/javascript">
var _conv_q = _conv_q || [];
_conv_q.push(["sendRevenue", '{{ order_number }}','{{ subtotal_price | money_without_currency }}', '{{ products_count }}','XXXX']);

In the above code, XXXX is the goal ID to which the revenue is gonna be attached and can be found in your Convert Experiences account. It is also automatically filled in the revenue tracking code you see when editing a revenue goal inside your Convert Experiences account.

Have more questions? Submit a request