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.

(Note: Add additional domains and exclude misattributed referral domains using URL Management )

3. Copy the Tracking code

Before copying the tracking code, we recommend using 1P Domain Tracking. What is 1P Domain Tracking?

“In an era where third-party cookies are no longer effective and even first-party cookies expire after 7 days, maintaining accurate attribution is a significant challenge. However, Our 1P domain tracking solution emerges as the ultimate savior.”

Click here to implement 1P Domain Tracking

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

Note: Opted for 1P Domain tracking? Before clicking on Shopify make sure you have implemented the 1P domain tracking code.

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

Note: This code contains a pixel tracking script “https://cdn.js.customerlabs.co/shopify_v1_0_0.js” with version 1.0.0 which will undergo updates. In that case, it is essential to change the version number or redo Steps 3 & 4 with the new versioned JS file.

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,
default_address_selection: "",
default_value: 0
};

You can also add a call-back function for each event. For example, we consider “product_viewed” event,

analytics.subscribe("product_viewed", event => {
            _clShopify.trackShopifyEvents(event, function(customProperties, productProperties, userProperties){
                //code here to compose the properties
                var properties = {};
                fbq('track', 'ViewContent', properties) //to send properties to Meta
            }
        );
    });

By changing the settings as given below:

debug	Display event properties in console messages for debugging the incoming and outgoing data (true to show, false to hide).
fb_skip_contents	Enable skipping of Facebook contents (true to enable, false to disable).
default_currency	Send “USD” as the currency if the event does not provide a currency code.
product_viewed	Trigger a product viewed event when a specific product is viewed (true to trigger, false to suppress).
collection_viewed	Trigger a collection viewed event when a collection is viewed (true to trigger, false to suppress).
product_added_to_cart	Trigger a product added to cart event when a product is added to the cart (true to trigger, false to suppress).
search_submitted	Trigger a submitted search event when a search is submitted (true to trigger, false to suppress).
cart_viewed	Trigger a cart viewed event when the cart is viewed (true to trigger, false to suppress).
checkout_started	Trigger a checkout started event when the checkout process begins (true to trigger, false to suppress).
checkout_address_info_submitted	Trigger a submitted checkout address info event when address information is submitted (true to trigger, false to
checkout_contact_info_submitted	Trigger a submitted checkout contact info event when contact information is submitted (true to trigger, false to
checkout_shipping_info_submitted	Trigger a submitted checkout shipping info event when shipping information is submitted (true to trigger, false
payment_info_submitted	Trigger a submitted payment info event when payment information is submitted (true to trigger, false to suppress).
checkout_completed	Set to ‘false’ if the post-purchase feature is available
default_address_selection	Set to default address selection for checkout address info submitted event. It should be billingAddress or shippingAddress.
default_value	Set to default value for all the above events. The value should be a number.

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 

Note: Opted for 1P Domain tracking? Before clicking on Shopify make sure you have implemented the 1P domain tracking code.

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

Note: This code contains a pixel tracking script “https://cdn.js.customerlabs.co/shopify_v1_0_0.js” with version 1.0.0 which will undergo updates. In that case, it is essential to change the version number or redo Steps 3 & 4 with the new versioned JS file.

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 → Settings → Checkout 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.

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).

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. 

6. Click on the “…“. and Click Send Test. This is enable us to test whether data is being pushed through this URL.

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 after Headerscript Tracking code 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);
// Stop the interval after successful execution
}).catch(function(e) {
console.log("clabs cart token collection issue", e);
});

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

analytics.subscribe("product_added_to_cart", event => {
  _clShopify.trackShopifyEvents(event);
(function() {
    if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
        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);
        });
    }
})();
  });

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

9. Now click on Fetch new data

10. Click on View details to view the incoming data and choose the relevant 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

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. 

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

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 

2. 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 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.

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

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

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.

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.

Handling Consent in Sandbox

Follow the below steps to handle consent with or without CMP(Consent Management Protocol)

With or Without CMP

1. Go to your CustomerLabs account.
2. If connected with Google Ads/Google Analytics, Navigate to its respective “Configuration Settings” in Destinations

• Presence of CMP, then the “Client Side Consent Initialization” toggle should be OFF.

The toggle should be made OFF as the consent initialisation is handled by the CMP.

• Absence of CMP, then the “Client Side Consent Initialization” toggle should be ON.

Update track consent parameters

Be Shopify accounts with CMP or without CMP, the consent parameters have to be updated in the _cl.trackConsent() function. This has to be updated to send the consent preferences to CustomerLabs.

Function Params
    /**
     *
     *
     * This function is available for end users to send consent params to update the consent
     * @function trackConsent
     * @param {object} params consent params
     */

    "ad_user_data": "granted/denied" //granted or denied consent based on specific needs

Function example

_cl.trackConsent({
    "ad_user_data": "granted",
    "ad_personalization": "granted",
    "ad_storage": "denied"
});

list //params that can be added for consent 

{
    "ad_user_data": "granted",
    "analytics_storage": "granted",
    "ad_personalization": "granted",
    "ad_storage": "granted",
    "functionality_storage": "granted",
    "personalization_storage": "granted",
    "security_storage": "granted"
}

1. Now Go to your Shopify account.
2. Go to Shopify -> Settings -> Customer Events
3. Paste the below line of code after “Shopify Specific Tracking Code Script”

_clShopify.extension=analytics;

The above implementation will ensure that user’s consent preferences are handled in the sandbox environment.

Optimise Campaigns with custom events

Refer to the mentioned playbooks to optimise your campaigns based on custom events,

• AOV based Optimisation
• Category/Product based Optimisation
• New and Returning Customers Purchase based Optimisation

Further, optimisation based on a user trait such as gender, country and other attributes like payment option can also be done.

Need assisstance? Seek help from [email protected]

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 Submit

How can we improve this article?

How Can We Improve This Article?

Name

Email

Need help?

Submit