Shopify+CustomerLabs 1PD Ops Integration 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 1PD Ops, you can start tracking the events (user-behavioral activity) of your website visitors without writing any code.

Prerequisites

• Admin Access to Shopify Store backend
• Active CustomerLabs Account

One-click Checkout

If you are using one-click checkout tools such as Fastrr (shiprocket), Gokwik, Shopflo, etc., please ensure to complete the integration steps mentioned in the respective tool’s documentation to push bottom-funnel events to the dataLayer or to the CustomerLabs webhook.

• Shiprocket Click Here →
• Shopflo Click Here →
• FlexyPe Click Here →
• Gokwik Click Here →

Initial Setup

Connect Your Domain

1. Log in to the CustomerLabs account.
2. If you do not have an account, Click “New to CustomerLabs? Sign up” below the login fields and Create a New Account

Tip

Learn How to Create a New Account in CustomerLabs

Note

Add any additional domains or sub-domains in the URL Management section.

Enable Shopify Integration

1. Go to the Default Ecommerce Events section and click Shopify to open the integration setup.

2. Add your domain name by clicking the “Add Domain” button.

3. Open Shopify → Domain Settings, copy the domain name, and paste it into the setup.
4. Click Next and close the modal.

Install the App and Authenticate

1. Click “Open Shopify App Store” button and install the CustomerLabs App from Shopify App Store.

2. Enter your CustomerLabs account email and API key.

2. To get the API key, go to CustomerLabs → Account Settings → API Key, and copy it.

Add Tracking Scripts to Theme

1. Click Open the Theme Editor.

Tip

If theme editor is not opening directly, Go to Online Store → Themes → Edit theme.

2. Navigate to the App embeds and enable the toggle CL script.
3. Click Save to apply the changes.

Add Product Tracking Script

1. Navigate to the Default Product Page in your Shopify website.

2. Navigate to the Template section, click on Add Section.

3. Go to the Apps tab, select CL Product block.

4. Click Save to apply the changes.

Add Checkout Extension

1. Go back to the instructions page → Click on the Open Checkout Settings.

2. In the Checkout Settings panel, click Customize.

3. Go to App Embeds and on the left sidebar, Scroll to bottom → click on the + icon in Checkout Extension.

4. Add the Checkout Extension to the Thank You page.
5. Click Save.
6. Go back to instructions page → click on Continue to Customer Events setup.

Section 2: Customer Events Setup

Add Custom Pixel

1. Go to the instructions page
2. Copy the code and click Open Customer Events Settings.

3. Click on more views ** → click Custom Pixel → Click Add Custom Pixel.

4. Enter a name for your new pixel and name it “CustomerLabsPixel”.

5. Paste the copied code snippet into the custom event script section.

6. Scroll to lines 53 & 54 in the code and update them as true:

Javascript

track_cart_token_on_addToCart: true,
use_variant_id_as_product_id: true,

6. If required, change the permissions to comply with privacy laws of your region. Click Save.

7. Click Connect to connect the pixel.

8. Go back to instructions page → click on Continue to Webhook setup.

Connect Webhook for Purchase Events

For the Purchase event data to be tracked correctly, we recommend bringing Purchase data from your Shopify store directly through Shopify Source (Webhook).

Connect Your Store

1. Click the Connect button to start the webhook setup.

2. Once the webhook is connected, Go to CustomerLabs and navigate to the Sources section to see if the source has been created successfully.

Workflow Setup in CustomerLabs

Important

Learn more about workflow setup, visit Setting up the Source Workflow.

When we click Connect button in the Shopify, the system would have created a workflow automatically using a test trigger. We will have to verify the field mappings and re-name the workflow.

1. Go to CustomerLabs → Sources. Find the shopify source.
2. Click on the source name. Click on “Edit” in purchase_order workflow.
3. In the Workflow setup, it is mandatory to update the delay. Click Choose Sample Data.

Tip

The workflow set up would have been completed automatically using test webhook data.

4. Go to Event Configuration, change the event name to cl_purchase.

Note

Check for the presence of cart_token in the sample data. It should start with hWN...

Auditing the workflow setup

1. Selecting the Sample: Select the sample with the cart token. Ensure data contains no parameters with null values.
2. Filtering the Data (Optional): Filter out irrelevant data (e.g., email exists).
3. Event Configuration: Give the event name as cl_purchase by selecting a custom event.
4. Identity Mapping:
   • Ensure to keep identify_by_email or identify_by_phone or shopify_cart_token.
   • Search for shopify cart token that starts with hWN in the payload. It is usually under cart_token or inside the note_attributes.
   • Check if the cart token is mapped to shopify_cart_token.
5. Map Attributes: Map incoming attributes under User traits (first name, city, etc.).
6. Product Details: Map product attributes (sku, ID, variant, line_items) under product details.
7. Event Properties: Map value, currency, transaction_id, order_id.
8. Click Save Workflow.