Step-by-Step Guide to Adobe Analytics Integration with Shopify

Shopify is one of the most widely used eCommerce platforms, and Adobe Analytics remains a gold standard for enterprise-level customer insights. If you want the power of Adobe Analytics integration on your Shopify storefront, integrating via Adobe Experience Platform Launch (now known as Tags) is the most scalable and flexible approach.

In this post, we'll walk through how to implement Adobe Analytics on a Shopify store using Adobe Launch, including handling Shopify's Customer Privacy API and Checkout Pages.

Prerequisites

Before getting started, make sure you have:

• Access to a Shopify Store

• Access to Adobe Experience Cloud (Launch + Adobe Analytics)

• Published Adobe Launch property with:

  • Adobe Analytics Extension installed

  • Adobe Experience Cloud Extension installed

  • A working Report Suite

• A staging environment or the ability to test on a Shopify theme

The steps below are our recommended approach to accurately measure data, comply with data privacy rules and fully utilize Adobe Launch functionality — tried, tested and proven effective!

Step 1: Enable the First-Party Tracking Server

This step is critical to enable a first-party cookie on a Shopify website to accurately measure visits and unique visitors:

1. Request the certificate from Adobe for CNAME implementation.

2. Ask your customer (Shopify store admin or developer) to update their DNS settings.

3. Configure tracking servers in Adobe Launch:

   - Analytics Extension

   - Adobe Experience Cloud ID

   - In case of multiple domains using a Shopify store, under the same Launch container

4. Request a certificate for each domain.

Step 2: Add Adobe Launch Embed Code to Shopify Theme

1. Implement the Adobe Launch script in the Shopify store.

   Note: In case you don't have access to the Shopify store, ask your Shopify developer.

2. Open Shopify Admin > Online Store > Themes.

3. Select Actions > Edit Code > Open the theme.liquid file.

4. Insert the Launch embed script (found in Adobe Launch > Environments > Production or Staging) into the tag of the theme.liquid file.

Important Note: DO NOT place the Adobe Launch script in Customer Events as a Custom Pixel.

Here's why:

• Shopify's custom pixel loads the Adobe Launch script in an iframe within a sandbox environment, which causes Adobe extensions such as the Experience Cloud ID service not to load at the domain's top frame.

• As Adobe can't access the site's domain, it defaults to "third-party tracking cookie" even if you've installed the first-party tracking server via CNAME implementation, resulting in a non-persistent Marketing Cloud ID, which leads to INFLATION in visits and unique visitors.

• Shopify admits that some custom pixels will not work to their full functionality. They list out the limitations of sandbox pixels here.

Another Option: If you have access to Shopify developers, make your own web pixel application, which loads Adobe in the top frame of the site.

Step 3: Enable the dataLayer Object and Click Tracking Events

Like any other website, you can enable the dataLayer object for a Shopify website as well, using the following steps:

1. Add a dataLayer object for the variables want to capture based on the SDR in the theme.liquid file.

   Note: In case you don't have access to the Shopify store, ask your Shopify developer to implement the code.

2. For click tracking, you can use data elements or custom code in Adobe Launch to trigger events like any regular website. Alternatively, add a customized adobe-analytics.js code in Adobe Launch, which entails all the custom code to push click events to the dataLayer object.

Step 4: Integrate with Shopify Privacy Consent

Shopify Customer Privacy API  is a browser-based, JavaScript API that you can use to verify data processing, permissions or build a cookie consent banner. This allows us to use this API to capture consent using Adobe Launch.

1. Implement a custom code in Adobe Launch that registers user consent via Shopify's API listeners.

Example of Code:

console.log('[Consent Debug] Starting consent check');

window.dataLayer = window.dataLayer || [];

// Load Shopify's customerPrivacy API
Shopify.loadFeatures([
  {
    name: 'consent-tracking-api',
    version: '0.1',
  }
], function(error) {
  if (error) {
    console.error('[Consent Debug] Error loading consent-tracking-api:', error);
    return;
  }

  console.log('[Consent Debug] consent-tracking-api loaded');

  // Wait until Shopify.customerPrivacy is available
  (function waitForCustomerPrivacy() {
    if (window.Shopify && Shopify.customerPrivacy) {
      runConsentChecks();
    } else {
      console.log('[Consent Debug] Shopify.customerPrivacy not yet available, retrying...');
      setTimeout(waitForCustomerPrivacy, 200);
    }
  })();

  function runConsentChecks() {
    // 1️⃣ Check consent synchronously on page load
    console.log('[Consent Debug] analyticsProcessingAllowed:', Shopify.customerPrivacy.analyticsProcessingAllowed());

    if (Shopify.customerPrivacy.analyticsProcessingAllowed()) {
      window.dataLayer.push({
        event: 'shopifyConsentGranted',
        consentType: 'analytics'
      });
      console.log('[Consent Debug] (Page Load) Pushed event to dataLayer');
      _satellite.track("shopifyConsentGranted");
      console.log('[Consent Debug] (Page Load) Fired _satellite.track("shopifyConsentGranted")');
    } else {
      console.warn('[Consent Debug] (Page Load) analyticsProcessingAllowed is FALSE');
    }

    // 2️⃣ Listen for dynamic consent changes
    document.addEventListener('visitorConsentCollected', function(event) {
      console.log('[Consent Debug] visitorConsentCollected event fired:', event.detail);

      if (event.detail && event.detail.analyticsAllowed) {
        window.dataLayer.push({
          event: 'shopifyConsentGranted',
          consentType: 'analytics'
        });
        console.log('[Consent Debug] (Consent Change) Pushed event to dataLayer');
        _satellite.track("shopifyConsentGranted");
        console.log('[Consent Debug] (Consent Change) Fired _satellite.track("shopifyConsentGranted")');
      } else {
        console.warn('[Consent Debug] (Consent Change) analyticsAllowed is FALSE or missing');
      }
    });
  }

  // ❌ Optional fallback if API never becomes available
  setTimeout(function() {
    if (!(window.Shopify && Shopify.customerPrivacy)) {
      console.warn('[Consent Debug] Shopify.customerPrivacy API not implemented -- assuming consent granted (fallback)');
      window.dataLayer.push({
        event: 'shopifyPrivacyOff',
        consentType: 'analytics'
      });
      console.log('[Consent Debug] (Fallback) Pushed event to dataLayer as "shopifyPrivacyOff"');
      _satellite.track("shopifyConsentGranted");
      console.log('[Consent Debug] (Fallback) Fired _satellite.track("shopifyPrivacyOff")');
    }
  }, 5000);
});

In the code above, _satellite.track(ShopifyconsentGranted) was used to store the event name once consent is granted.

2. Edit the Launch rule, whichever rule should be triggered ONLY AFTER CONSENT to listen to the event in Custom Code or Direct call (if using _satellite.track) or as a dataLayer variable. As per our example, Rule > Core > Direct Call > enter value "ShopifyconsentGranted" //event name.

Step 5: Custom Checkout Script for Tracking eCommerce Events

Shopify has deprecated checkout.liquid file for Shopify Plus stores since 2024, which means that a dataLayer CANNOT be added to the liquid file to capture the eCommerce events.

Instead, the only way to capture analytics events on the Checkout pages and load Adobe Launch is via:

1. Shopify Admin > Settings > Customer Events as a CUSTOM PIXEL (unfortunately, it's the only way).

   Our Observation: On the Checkout pages, mid persists because the domain doesn't change and the cookies are stored for the user in the same session.

2. Write pixel code using Shopify's Customer event API (here is the list of events available to subscribe to) and push events to the dataLayer object.

Example of Code:

<!-- Adobe Launch Embed Code -->

 <script src="https://assets.adobedtm.com/YOUR-LAUNCH-CODE.min.js" async></script>

 

 <Subscribe to Shopify Events and push to DataLayer>

 analytics.subscribe("checkout_completed", async (event) => {

   const order = event.data.checkout;

 

   // Format products in Adobe format

   const products = order.line_items.map(item => ({

     name: item.product_title,

     sku: item.sku,

     quantity: item.quantity,

     price: item.price,

     category: item.product_type || "default"

   }));

 

   // Push to adobeDataLayer

   window.adobeDataLayer = window.adobeDataLayer || [];

   window.adobeDataLayer.push({

     event: "checkoutCompleted",

     ecommerce: {

       purchase: {

         transaction_id: order.order_id,

         affiliation: "Shopify Store",

         value: order.total_price,

         currency: order.currency_code,

         items: products

       }

     }

   });

 });

For Privacy Compliance: Based on your business requirements, select the appropriate categories in the Customer privacy > Permission section above the code section.

Hope this helps in your integration with a Shopify website!