Shopify A/B Testing Integration Convert Experiences

Step 1: Find your Convert Experiences Project Code

In Convert Experiences, retrieve the project ID number from Project Settings as shown in the image below. 

Step 2: Add the Convert Experiences Code to Shopify Theme

To integrate the two platforms, please go to Sales Channels > Online Store > Themes > More Actions > Edit Code

Select the theme.liquid file and paste the tracking code just before the first "{% if %}" section, as shown in the screenshot below:

In the area indicated above, paste the code shown below. Make sure you replace the project ID number with your own ID that you got from the Project Settings page mentioned earlier in this article.

See the Pen Shopify Integration - Step 2 - Shopify Tracking Code by George Crewe (@gcrewe) on CodePen.

Don't forget to save your changes in Shopify.

Step 3: Add the code to the Checkout and Thank You/Purchase Confirmation Page

We need to add the Convert Experiences tracking code to the thank you page to be able to track conversions (purchases).

Add Convert Tracking Code on Thank You pages

Go to Settings > Checkout and scroll down to the Additional Scripts section. In the "Additional Scripts" form field paste the following code:

See the Pen Shopify Integration - Step 3 - Vanilla Simple Shopify Tracking Code by George Crewe (@gcrewe) on CodePen.

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

Here is an example of the complete script:

See the Pen Shopify Integration - Step 3 - Sample Shopify Tracking Code by George Crewe (@gcrewe) on CodePen.

 

Optional:

Add Convert Tracking Code on Shipping/Payment pages (Checkouts)

If you want to make changes on these pages, you should add the code from the previous section here. Go to Online Store > Preferences, in the Additional Google Analytics JavaScript section paste your code:

Add Convert Tracking Code on Carthook (Checkouts)

If you are not using the Shopify cart and you are using the CartHook app instead, the code from previous section needs to be installed on CartHook. 

Here is an example of the complete script:

See the Pen Shopify Integration - Step 3 - Sample Shopify Tracking Code by George Crewe (@gcrewe) on CodePen.

 

Add Convert Tracking Code on Checkout Pages on Shopify Plus 

If you use Shopify Plus, then you have direct access to edit the checkout.liquid file and should place your Convert Tracking Code, or any other script or code that you want to appear on /checkout/ pages, in this template instead. Placing it in the Additional Google Analytics JavaScript section (as shown above) may not work for Shopify Plus members.

Just go to your Project Settings to get your Convert Tracking Code ("basic snippet") and paste it into the template as shown below.

Step 4: Add the checkout page domain to your Project's Active Websites

On Shopify, the checkout pages are either presented under a central Shopify subdomain (checkout.shopify.com) or your own domain, depending on the type of Shopify account you have. In either situation, you need to add that domain to your Project's settings:

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 the visitor redirects from 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 > Current Theme > Actions > Edit Code  as explained in step 2). Go to "Sections" and select the "cart-template.liquid". Then, add the following JavaScript, just before the <form> tag:

See the Pen Shopify Integration - Transferring Cookies Script by George Crewe (@gcrewe) on CodePen.

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

See the Pen Shopify Integration - Step 5 onsubmit event by George Crewe (@gcrewe) on CodePen.

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

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

Step 6: Google Analytics Revenue Tracking

Create a Revenue goal from the Goal templates in your experiment.

Fill in the Goal name and page URL to match the confirmation page of your purchases:

Save it and you are done. 

Step 7a: Manual Revenue Tracking

If you have not set up revenue tracking through Google Analytics, please install revenue tracking code under Settings > Checkout > Additional scripts:

See the Pen Shopify Integration - Manual Revenue Tracking by George Crewe (@gcrewe) on CodePen.

In the above code, XXXX is the goal ID to which the revenue is going to be attached and can be found in your Convert Experiences account.

You will notice in the above code we are using the Shopify subtotal_price. It is up to you to use whatever price variable you want to capture from the Order Shopify Object. For example, you could use total_price if you want to have both shipping costs and taxes.

Step 7b: Manual Revenue Tracking for Multicurrency Shops

Convert can track revenue in a default currency, even if your site converts it to the visitor's chosen one.

To do this, just insert the following code instead of the one above and change the variable currency_to_report to the ISO code for the currency in which you want to track the revenue in Convert. 

See the Pen Manual Revenue Tracking Multicurrency by Convert.com (@gcrewe) on CodePen.

Step 8: Revenue Tracking via Webhooks

Instead of using the Google Analytics Ecommerce code or the Manual Revenue Tracking code to capture revenue on your store, you can use the Shopify Webhook method we provide here.

Step 9: Verify your Shopify installation

You should verify your installation using the following guide: Shopify Setup Verification Guide