Customerlabs CDP Documentation

Shopify+CustomerLabs CDP Integration Guide

You are here:

Shopify Implementation Guide

Shopify (or) Shopify Plus is an e-commerce platform that allows users to set up an online store. By integrating CustomerLabs CDP to your Shopify platform, you can start tracking the events of your website visitors without writing any code.

Here is the video which guides you through the entire process of implementing CustomerLabs CDP with your Shopify store.

You can also go through this step-by-step procedure to implement CustomerLabs CDP to your Shopify platform.

1. Log in to CustomerLabs account

2. On the Home page → Select “Connect your website” → Copy the CustomerLabs tracking code.

Copy tracking code

3. Then go to your Shopify account and click on “Online Stores” and click on Actions → Edit code

Edit code in Shopify

4. Under theme.liquid, search for “/head” and paste the CustomerLabs code in the header section and Save. Follow the same steps in checkout.liquid for Shopify Plus.

Paste tracking code in Shopify

5. Create a new snippet and name it as “cl_default_ecommerce_events”

Create snippet

6. Copy the entire script from cl_default_ecommerce_events in Github and paste it under the new snippet created and Save them.

Events tracking code

7. For old themes, copy this include tag → {% include 'cl_default_ecommerce_events' %} and paste it below CustomerLabs Tag in both theme.liquid and checkout.liquid (if Shopify plus)

Paste include tag

In case of new themes, copy this render tag → {% render 'cl_default_ecommerce_events' %} and paste it below CustomerLabs Tag in both theme.liquid and checkout.liquid (if Shopify plus)

Track Purchase events (For Shopify & Shopify Plus)

To track purchase events, make the following changes

1. Copy the CustomerLabs tag from Home → Connect your website

2. Then click on SettingsCheckout in your Shopify account and if you scroll down you will see the Additional scriptsOrder status page.

Order status page

3. Paste the CustomerLabs tracking code in the box given below “Order status Page”

4. Copy the entire script from Github – additional_script_order_status_page and paste it in the same box below CustomerLabs tracking code and Save the action.

Order status page

To track post-purchase events (if applicable),

1. Copy the CustomerLabs tag from Home → Connect your website

2. Then click on SettingsCheckout in your Shopify account and if you scroll down you will see the Additional scriptsPost-Purchase page

post purchase page

3. Paste the CustomerLabs tracking code in the box given below “Post-purchase page”

4. Copy the entire script from Github – additional_script_post_purchase_page and paste it below the CustomerLabs tracking code and Save the action.

Track the Checkout made event 

You can track the Checkout made event using the No-Code Event tracker by following the steps below:

1. Launch the No-Code tracker from the Event Manager screen. This will open the tracker on your website.

No-code tracker

2. Before recording the event, add 2-3 items to your cart and go to the Checkout page.

3. Now, Click on Record Action. 

4. Choose the Action Name as “Checkout made”.

5. Tick the “Pick common selector” checkbox.

6. Click on the Hand icon to pick the action trigger button on the page.

Choosing the action button

7. After selecting the trigger button, you can add event attributes by clicking on “Add details”.

8. You can collect the attributes like product_name, product_quantity, product_price, currency, value, product_id, etc as shown in the video below.

9. When you want to collect the product_id which may not be available on the page, you can add the code data-product_id=”{{ item.product_id }}” in the cart.liquid template in your Shopify admin page (Online Store → Themes → Templates → cart.liquid) and track the product_id along with other attributes as shown in the video below.

10. After adding all the attributes you needed, click on “Next | Post-Action trigger” button.

Next post action trigger

11. You can configure the success page here if you have one or you can skip this part and click on “Next | Tracking rule”.

Next tracking rule

12. Ensure the “Track” toggle is ON to track the Current page and click on “Save” to capture the URL path of the page.

Track the path

13. Then, click on “Save Action”.

Save action

Complete configuration with Shopify

After completing this, go to the CustomerLabs “Connect your website” page, click on → I have installed code Allow URL

Installed the code

Now, you have integrated Shopify with CustomerLabs CDP. The default e-commerce events will be automatically tracked after the integration. If you want to track any other events, use the No-Code tracker to track the events on your website.

Facebook configuration

1. Log in to CustomerLabs Account

2. Navigate to the “Destinations” page and select “Facebook” → Then click “Subscribe”

Facebook Integration

3. Go to “Configuration settings” and Enter your Facebook Pixel id in the box shown.

Facebook pixel

4. Click on Save Changes and then under Configuration settings → Click on Continue with Facebook → (redirects to your Facebook account) → Authenticate the Facebook account to be integrated with CustomerLabs.

5. Turn the toggle on for “Send data via server-side” and Save Changes.

Authenticate Facebook

6. Go back to Facebook Customization page → Setup Event Workflow

Setup event workflow

7. Click on “enable all server-side callbacks” to send all the events to Facebook. This is suggested to give a better Event Match Quality.

Enable server side

If you prefer to send only the audiences to Facebook, turn on the toggle for “added_to_segment” event only.

added to segment

Disconnect Direct Integration of Facebook Pixel

You have to disconnect Facebook pixel direct integration with your Shopify backend to avoid duplication of events. If you are sending only the audiences to Facebook, you can ignore this step.

1. Log into your Shopify account and go to Online store → Preferences → Facebook where you have to remove the Pixel

Disconnect facebook pixel

2. Then, go to Facebook on your Shopify account → Data Sharing Settingsdisable the “customer data sharing”

Switch of data sharing

Note: If you have other “Add to cart” selectors that are not captured in the default Shopify configuration, you will need to configure it differently with the help of a developer. Get in touch with us to guide you through it. 

Was this article helpful?
3.2 out Of 5 Stars
5 Stars 0%
4 Stars 67%
3 Stars 0%
2 Stars 0%
1 Stars 33%
How can we improve this article?
How Can We Improve This Article?
Previous E-commerce Platform Integration
Next WooCommerce + CustomerLabs CDP Integration Guide
Table of Contents
CustomerLabs gives freedom, flexibility and wings to digital marketers.
Sign Up
© 2022, Customer Labs Inc. All rights reserved.