cdp menu

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 connecting your Shopify store with CustomerLabs CDP, you can start tracking the events (user-behavioral activity) of your website visitors without writing any code.

Here is a detailed video that guides you through the step-by-step procedure to integrate your Shopify store with CustomerLabs

You can also go through the simple steps below to integrate your Shopify/Shopify plus store with CustomerLabs.

Based on your Shopify store setup, here are two different ways you can integrate your Shopify store with CustomerLabs 

  • Without Post-purchase page: One way is when you don’t have a post-purchase page (upsell, feedback forms, surveys, etc) after placing an order and you redirect them to an order status page (thank you page).
  • With Post-purchase page: The other way is when you have a post-purchase page (upsell, feedback forms, surveys, etc) before redirecting them to the order status page (thank you page).

    The post-purchase option should be configured mandatorily in Shopify settings if you’re using this method to integrate your Shopify store with CustomerLabs. The setting looks like the image given below. Check With post-purchase section for configuration steps.

Initial setup

1. Log in to CustomerLabs account

2. On the Home page → Under “Connect your domain” → Enter your website URL → Click Save

3. Copy the Tracking code

4.  Login to your Shopify account → Click Online store

5. Under Themes, go to Actions → Edit code

6. Under theme.liquid, search for “</head>” and paste the CustomerLabs code in the header section and Save.

7. Create a custom pixel in Shopify by navigating to Settings → Customer events → Add custom pixel

8. Give the Pixel name as Customerlabs → Add pixel

Without Post-purchase page:

1. Go to the Home page of your CustomerLabs account and click on “Connect website”.

2. Click Shopify → Click Shopify without Post-purchase button

3. Copy the code below the 3rd step as given in the image below.

4. Paste this code in the new custom pixel (CustomerLabs) created in Shopify → Click Save

Note: You can modify the CL variable configuration settings in the code to match your custom requirements as explained in the first few lines of the snippet. Make sure you don’t modify the entire code and modify only the initial settings explained.

You can modify only the below given snippet in the entire code

var CL = {
debug: false,
fb_skip_contents: false,
default_currency: “USD”,
product_viewed: true,
collection_viewed: true,
product_added_to_cart: true,
search_submitted: true,
cart_viewed: true,
checkout_started: true,
checkout_address_info_submitted: true,
checkout_contact_info_submitted: true,
checkout_shipping_info_submitted: true,
payment_info_submitted: true,
checkout_completed: true
};

By changing the settings as given below:

debugDisplay event properties in console messages for debugging the incoming and outgoing data (true to show, false to hide).
fb_skip_contentsEnable skipping of Facebook contents (true to enable, false to disable).
default_currencySend “USD” as the currency if the event does not provide a currency code.
product_viewedTrigger a product viewed event when a specific product is viewed (true to trigger, false to suppress).
collection_viewedTrigger a collection viewed event when a collection is viewed (true to trigger, false to suppress).
product_added_to_cartTrigger a product added to cart event when a product is added to the cart (true to trigger, false to suppress).
search_submittedTrigger a submitted search event when a search is submitted (true to trigger, false to suppress).
cart_viewedTrigger a cart viewed event when the cart is viewed (true to trigger, false to suppress).
checkout_startedTrigger a checkout started event when the checkout process begins (true to trigger, false to suppress).
checkout_address_info_submittedTrigger a submitted checkout address info event when address information is submitted (true to trigger, false to
checkout_contact_info_submittedTrigger a submitted checkout contact info event when contact information is submitted (true to trigger, false to
checkout_shipping_info_submittedTrigger a submitted checkout shipping info event when shipping information is submitted (true to trigger, false
payment_info_submittedTrigger a submitted payment info event when payment information is submitted (true to trigger, false to suppress).
checkout_completedSet to ‘false’ if the post-purchase feature is available

5. After saving, click Connect. You have installed the code on your website.

With Post-Purchase page:

1. Go to the Home page of your CustomerLabs account and click on “Connect website”.

2. Click Shopify → Click Shopify with Post-purchase button 

3. Copy the code below the 3rd step as given in the image below.

4. Paste this code in the new custom pixel (CustomerLabs) created in Shopify → Click Save

For any modifications on the code, refer here.

5. After saving, click Connect

6. Go back to CustomerLabs account → Shopify with Post-purchase from the Home page → Copy the code below the 4th step

7. Go to Shopify admin account → SettingsCheckout and if you scroll down you will see the Additional scripts → Post-Purchase page

8. In the Post-Purchase section, you may have an option to choose an app for Post-purchase configuration. You need to select any one of the existing app and should not select the “None” option for Post-Purchase.

If you’re not using any apps for post-purchase, integrate using Without post-purchase method.

9. Paste the copied code in the box given below Post-purchase page under the Additional scripts box and click Save

Note: It’s mandatory to select an option from the list of apps listed for Post-Purchase before you paste the code.

Bring in Purchase event data using Webhook

Currently for the Purchase event data to be tracked correctly, we suggest you bring the Purchase data from your Shopify store directly through Webhook. 

If you have configured any external plugins for checkout or use payment gateways that redirect to a different domain, the purchase data may not be tracked properly.

The use of a webhook in bringing in the Purchase event data is to overcome this challenge and ensure comprehensive tracking of all purchase events.

1. Login to your CustomerLabs account

2. Navigate to the Sources page > Search and select the Custom source from the list.

custom source

3. Name the source as “shopify_purchase” for data standardization purposes. Copy the Workflow URL that you will require in the later step.

4. Head to your Shopify account, and create a webhook (Shopify > Settings > Notifications > Create webhook).

create webhook in shopify

5. Paste the copied Workflow URL from CustomerLabs CDP in the URL section of Shopify as shown in the image below and click on Save

Cart token

The next step is to bring in the cart token from Shopify for unification purposes.

Cart token helps in unifying the purchase data with the existing dataset. When you send the purchase data from Shopify through the webhook, it should include a “cart token”- a kind of special tag linked to each purchase event. This cart token aids in the unification of data, ensuring that all distinct purchase events are accurately sent to the destinations.

There are two ways through which the Cart token is appended with the purchase data.

  1. Check if you already have the Cart Token in Shopify, and modify the code snippet to bring in the cart token to CustomerLabs
  2. If you don’t have the Cart Token, you have to add a custom script to bring in the Cart Token.

1. If you already have the Cart Token in Shopify

1. Go to your Shopify Account → Order → Click on any order to view order details. 

2. On the right side, under “Notes” section, you will have Cart Token/Cart notes.

Note: Check randomly for 2-3 orders if the cart notes are there. Sometimes cart notes would be available for only a few orders.

3. If you have the cart token/cart notes on any order,  go to Settings → Customer Events → CustomerLabs pixel → Edit the pixel

4. Search for window.clShopifyTrack = function and paste the below-given code snippet below window.clShopifyTrack = function() {

Code snippet:

browser.cookie.get(‘cart’).then(function(cart_token){

fetch(“//io.v2.customerlabs.co/externalIds?shopify_cart_token=” + cart_token + “&id=” + window.CLabsgbVar.appId + “&uid=” + window.CLabsgbVar.generalProps.uid);

}).catch(function(e){

console.log(“clabs cart token collection issue”, e)

});

5. Search for product_added_to_cart  and paste the same code snippet given above just below the “product_added_to_cart”, event => { as shown in the image below

6. Save the changes.

7. Now, trigger a test purchase to check if you’re receiving the cart token in CustomerLabs.

8. After triggering a test purchase, go to CustomerLabs → Sources → shopify_purchase → Setup → Next: Workflow set up. Learn more about workflow

complete workflow setup

9. Now click on Fetch new data

fetch new data

10. Click on View details to view the incoming data and choose the relevant sample data.

view sample data

11. In the sample data selection, check for the presence of note_attributes_ cart_token will be there as shown in the image.

12. Select this sample and skip to Completing the workflow setup for further steps.

2. If you don’t have the Cart Token in Shopify, add a custom code snippet: 

If you don’t have the cart token/notes in Shopify (in any orders), you will have to add a custom code snippet in theme.liquid to receive the cart Token along with Purchase data.

1. Head to your Shopify account, Online store > Click on Themes > click on three dot icon > Edit code.

2. Insert the following default cart notes script under theme.liquid, below the CustomerLabs tracking code → Click Save

Cart token snippet

<script>

    window.clShopifyTrack = function() {

        /** Updating cart attribute

        * updating cart attribute with customerlabs user id to identify anonymous users 

        * on checkout/create or checkout/update event from webhook

        */

        var template = “{{template}}”; 

        if (template.match(/.product./gi) || template.match(/.collection./gi)) {

            var http = new XMLHttpRequest();

            var url = ‘/cart/update.js’;

            var params = encodeURIComponent(‘attributes[customerlabs_id]’) + ‘=’ + CLabsgbVar.generalProps.uid;

            http.open(‘POST’, url, true);

            http.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);

            http.send(params);

        }

    }

</script>

3. After saving this code, trigger a test purchase in Shopify

4. Go to CustomerLabs account → Sources → shopify_purchase and fetch new data to select a new sample

5. See if you’re receiving the note_attributes_customerlabs_id now as shown in the image.

Completing the workflow setup

1. Select the sample with the cart token.

Note: While selecting the sample, ensure the data contains no parameters with null values as given in the image

no null values

The Customer Labs will not process parameters with null values. This is because null values are not considered valid data by the system. For example, if the parameter is “first_name”, you could pass the value “John Doe” or the empty string” “. 

2. Filter incoming data – this step helps in filtering out irrelevant data and allows only the information you need, to enter the workflow in the future. This is an optional step in the workflow.

For example, If you want the purchase data to be entered into the database that has an email address. You can the filter the data as shown below

filter incoming data

3. Event configuration: Give the event name as Shopify_purchase by selecting a custom event from the dropdown. 

event config

4. Identity mapping: Choose identify_by_email or identify_by_phone as the field to map the incoming email ID and phone number from Shopify. 

Along with those identifiers, 

  1. If you have cart token in Shopify, you must map the cart token note attribute in identity mapping 
  1. If you don’t have cart token and have added custom scrip manually, then map the note attribute customerlabs_user_id under identity mapping as shown in the image below.  

This mapping is crucial for unifying purchase data, and serves as a unique identifier for a customer. Learn more about identity mapping.

5. Map Attributes: Post-user identity mapping, you can map incoming attributes under one major field – User traits 

user traits

User traits

User traits refer to specific characteristics or attributes associated with an individual user. The user traits include first name, last name, city, state, company, zip code & other similar information that can be added under User traits.  

To send users’ attributes to the ads platforms, you must map them as user traits under event configuration. The more user details you share with platforms like Facebook, the higher the Event Match Quality will be.

map user traits

6. After completing the configuration as required, click on Save Workflow.

save workflow

7. Verify if the workflow is active by navigating to the Sources > Click on shopify_purchase > Check the ‘Workflow Status’ column

active status

Refer to the documentation to learn more about workflow and other attributes mapping.

You have now connected your Shopify store with CustomerLabs!

You will start receiving the events on the Events Manager page in CustomerLabs.

Send events to ad platforms for better Event Match Quality (EMQ)

You can now start sending these events to ad platforms like Facebook & Google by connecting them in the Destinations page.

Before sending the events from CustomerLabs to Facebook or any other platforms, compare the events you’re receiving through CustomerLabs pixel with the events you’re receiving through Facebook pixel.

If the events on CustomerLabs are closer to accuracy, you can then start sending the events from CustomerLabs to Facebook or any other platforms.

Sending your website events directly from CustomerLabs to the ad platforms gives you a higher Event Match Quality (EMQ).

Disconnect Direct Integration of Facebook Pixel

After connecting Facebook as a destination in CustomerLabs, you can disconnect Facebook pixel direct integration with your Shopify store 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. Disconnect the pixel setup if you have connected it.

Disconnect facebook pixel

2. In your Shopify account, go to Facebook & Instagram app → Settings → Share data 

3. Click on Change under Share data section

4. Turn off the toggle as shown in the image below to disable data sharing.

5. Click Save

This will stop double firing of events from both CustomerLabs and Facebook pixel.

Note: This will not disable the Product Catalog sharing to Facebook.

Default events tracked when you integrate your Shopify store

Here is a list of default events tracked when you connect Shopify with CustomerLabs

  • Page viewed
  • Product viewed
  • Added to cart
  • Search made
  • Checkout made
  • Add Payment info
  • Purchased

If you want to track any other events other than the ones mentioned above, use No-Code Event Tracker to track and set up the events. Refer to the documentation for help.

Other things to 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

3 ratings

5 Stars 0%
4 Stars 67%
3 Stars 0%
2 Stars 0%
1 Stars 33%
5
How can we improve this article?
How Can We Improve This Article?
Table of Contents
CustomerLabs gives freedom, flexibility and wings to digital marketers.
Sign Up

Schedule a 1-1 Demo

Ecommerce

Unified data to boost ecommerce growth

B2B

Engage your customers across the funnel with a unified martech stack

SaaS
Saas

Increase product metrics with a unified martech stack

Agency
Agency

Scale your customers quickly with the right data