Customerlabs CDP Documentation
Shopify+CustomerLabs CDP Integration Guide
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.
Go through these simple steps 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:
| 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 |
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 → 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.
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.
