How to Integrate CAKE Tracking with Your Shopify Account

This article will cover:

• What Are Shopify Customer Events?
• How Do I Use Customer Events With CAKE Tracking?
• How Do I Create Customer Events In Shopify?
• Customer Event 1: Dynamic Click Pixel
• Customer Event 2: JavaScript SDK
• What Customer Privacy Setting Do I Configure?
• How To Configure Your Offer In CAKE
• Can I Customize The JavaScript SDK To Capture More Shopify Data?
• FAQ

What Are Shopify Customer Events?

Shopify Customer Events allow store owners to track and manage customer interactions and activities within their online store. CAKE users can take advantage of this feature to know when a consumer arrives on the store landing page(s) as well as when that consumer make a purchase and certain details about that purchase.

How Do I Use Customer Events With CAKE Tracking?

CAKE recommends setting up 2 customer events in Shopify to integrate tracking. The first customer event you create will be used to deploy CAKE's Dynamic Click Pixel across every landing page of the Shopify store. The second customer event will be used to deploy our JavaScript SDK conversion pixel on the checkout page. This configuration allows customers to track under best practices (cookieless tracking) while simultaneously gives them flexibility to drive traffic through standard tracking or Direct Links.

How Do I Create Customer Events In Shopify?

To create a Customer Events in Shopify, follow these steps:

1. Click on Settings in the Shopify Admin panel (bottom left corner)

2. Click on Customer Events in the Settings menu

3. Click on Add custom pixel (top right)

4. Provide a Pixel Name and click Add pixel button. Example: "CAKE Dynamic Click Pixel"

5. Navigate to the Code box and paste the Dynamic Click Pixel code below 

6. Update the code with your cookie domain where it says ENTER COOKIE DOMAIN HERE

7. Update the code with (dot) website domain where it says ENTER .WEBSITE DOMAIN HERE

8. Click Save at the top of the page, then Connect under the code box to deploy the code to the store

9. Repeat Steps 1-4 then paste the JavaScript SDK code below.

10. Update the code with your cookie domain, offer ID and event ID where shown

11. Click Save at the top of the page, then Connect under the code box to deploy the code to the store
    
    

Customer Event 1: Dynamic Click Pixel

const cookieDomain = 'ENTER COOKIE DOMAIN HERE';
const siteDomain = 'ENTER .WEBSITE DOMAIN HERE';

// DCP Click
analytics.subscribe("page_viewed", event => {   
   (function ()  {
        var c = { 'name': 'cp', 'args': {'sess_timeout':'','gclid_param':'gclid','gclid_chk_ref':0,'bingkw_param':'ckm_kw','sc_param':'ckmsc','bingkw_chk_ref':0, 'attr_param':'ckmscn', 'attr_chk_ref': 0, 'sess_param': '', 'sess_chk_ref': 0, 'crtv_id': null, 'crtv_param':'ckmc', 'crtv_chk_ref': 0, 'tpcrid_param': 'ckmcrn', 'cookie_dom': cookieDomain, 'site_dom': siteDomain, 'ref_type': 1, 'ckm_sess_param': null ,'s1_param':'s1','s2_param':'s2','s3_param':'s3','s4_param':'s4','s5_param':'s5', 'sub_chk_ref':0} };
        var params = new URLSearchParams(window.location.search);
        var thirdPartyID = params.get('ckmscn');
        var creativeID = params.get('ckmc');
         var activeTracking = params.get('ckmat');
        if (thirdPartyID || creativeID || activeTracking)
            if (typeof CKMLib == 'object')
                    CKMLib.run(c);
        else {
            (_ckm = window._ckm || []).push(c);
            if (typeof CKMLib != 'string') {
                CKMLib = 'loading';
                var pix = document.createElement('script');
                pix.type = 'text/javascript'; pix.async = true;
                pix.src = '//cakecdn.com/jssdk/lib.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(pix, s);
            }
        }
    })();
 });

const cookieDomain = 'ENTER COOKIE DOMAIN HERE';
const offerID = ENTER OFFER ID HERE; 
const eventID = ENTER EVENT ID HERE;

// Track events
 analytics.subscribe("checkout_completed", event => {
   (_ckm = window._ckm || []).push(function cfgev() {
        CKMLib.configureEvents({
            domain: cookieDomain,
            offer_id: offerID,
            event_id: eventID,
            revenue: event.data.checkout?.totalPrice?.amount,
            transaction_id: event.data.checkout?.order?.id 
        });
        CKMLib.fireEvent();
    });
    if (typeof CKMLib != 'string') {
        CKMLib = 'loading';
        var pix = document.createElement('script');
        pix.type = 'text/javascript';
        pix.async = true;
        pix.src = '//cakecdn.com/jssdk/lib.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(pix, s);
    }
 });

What Customer Privacy Setting Do I Configure?

CAKE advises that the Customer Privacy options for both Customer Events be set as follows: 

1. Permission > Required and tick 'Analytics'
2. Data Sale > 'Data collected does not qualify as data sale' unless you are collecting additional information such as contact details.

How To Configure Your Offer In CAKE

Once connected, the Shopify Custom Event pixel will now work with a CAKE Direct Link. To ensure tracking will continue to work with standard CAKE Tracking Links, modify the Offer Redirect Parameters on the Offer card to include this: 

ckmreqid=#reqid#&ckmat=1

Can I Customize The JavaScript SDK To Capture More Shopify Data?

Yes! The JSSDK pixel supports a wide variety of pixel parameters. These parameters can be located within the library code (https://cakecdn.com/jssdk/lib.js) under the section labeled "configureEvents." Common parameters that can be used include:

• Advertiser Sub IDs
• Event Third Party Name
• Ecommerce Pixel Parameters (requires CAKE Ecommerce Module)
• User ID (u=)

To find the Shopify values available at checkout which can be mapped to CAKE's pixel parameters, click here: https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed

FAQ

Does CAKE support Shopify product values, like SKU?

    Yes, CAKE does supports product level details on the CAKE Conversion Pixel. See How to Configure the CAKE Shopify Custom Event pixel. Multiple SKUs can be included, each with their own quantity, price & discount data.

You may also be interested in:

• Understanding the CAKE Tracking Link
• How to Use Direct Linking When Tracking Links Are Not Allowed
• A Guide to Conversion Tracking