Working with Shopify Privacy Consent Data in Custom Web Pixels

Accessing privacy consent data from within Shopify’s sandboxed web pixels is… a pain. A lot of your usual methods, like reading cookies, or adding in event listeners won’t work exactly as you expected. I had to learn the hard way so I thought I’d explain here how it works using the most reliable method – the Shopify Customer Privacy API. As long as your cookie consent banner of choice is communicating and syncing consent status with the Shopify Customer Privacy API then this should work for you.

The Sandbox Challenge

Shopify’s web pixel environment is intentionally sandboxed for security reasons, which means:

• document.cookie is not accessible
• Direct DOM manipulation is restricted
• External consent management platform cookies cannot be read directly
• Traditional cookie-based consent checking methods fail

This sandboxing initially seems like a limitation, but it actually provides a more reliable and standardized way to handle privacy consent.

Using Shopify’s Customer Privacy API

Shopify’s Customer Privacy API provides structured access to user consent preferences through two main methods:

1. Initial Consent Status

Access the current consent state when your pixel initializes:

// Get initial privacy status
let customerPrivacyStatus = init.customerPrivacy;

console.log('Initial privacy status:', customerPrivacyStatus);
/*
Output example:
{
  "analyticsProcessingAllowed": true,
  "marketingAllowed": false,
  "preferencesProcessingAllowed": true,
  "saleOfDataAllowed": false
}
*/

2. Real-Time Consent Updates

Subscribe to consent changes as they happen:

// Subscribe to consent updates
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
  customerPrivacyStatus = event.customerPrivacy;
  
  console.log('Consent updated:', customerPrivacyStatus);
  
  // Update your tracking accordingly
  updateTrackingConsent(customerPrivacyStatus);
});

Practical Implementation

Here’s a complete example of how to implement consent-aware tracking:

// Store current privacy status
let customerPrivacyStatus = init.customerPrivacy || {
  analyticsProcessingAllowed: false,
  marketingAllowed: false,
  preferencesProcessingAllowed: false,
  saleOfDataAllowed: false
};

// Function to check marketing consent
function hasMarketingConsent(privacyStatus) {
  return privacyStatus.marketingAllowed === true;
}

// Initialize tracking with current consent
function initializeTracking() {
  const hasConsent = hasMarketingConsent(customerPrivacyStatus);
  
  if (hasConsent) {
    // Enable full tracking with PII
    enableEnhancedTracking();
  } else {
    // Enable basic tracking without PII
    enableBasicTracking();
  }
}

// Subscribe to consent changes
if (api && api.customerPrivacy) {
  api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
    customerPrivacyStatus = event.customerPrivacy;
    
    // Update tracking based on new consent
    const hasConsent = hasMarketingConsent(customerPrivacyStatus);
    
    if (hasConsent) {
      updateTrackingConsent('granted');
    } else {
      updateTrackingConsent('denied');
    }
  });
}

// Example: Consent-aware checkout tracking
analytics.subscribe("checkout_completed", (event) => {
  const hasConsent = hasMarketingConsent(customerPrivacyStatus);
  
  const conversionData = {
    revenue: event.data.checkout.totalPrice.amount,
    currency: event.data.checkout.currencyCode
  };
  
  if (hasConsent) {
    // Send enhanced data with PII
    sendConversionData({
      ...conversionData,
      email: event.data.checkout.email,
      phone: event.data.checkout.phone
    });
  } else {
    // Send basic data without PII
    sendConversionData(conversionData);
  }
});

Understanding Consent Types

Shopify’s privacy API provides four types of consent:

• analyticsProcessingAllowed: Permission for analytics and performance tracking
• marketingAllowed: Permission for marketing and advertising purposes
• preferencesProcessingAllowed: Permission for personalization features
• saleOfDataAllowed: Permission for data sales (primarily for US privacy laws)

For most advertising and marketing pixels, you’ll primarily use marketingAllowed.

Best Practices

1. Always Check Initial Status

Don’t assume consent is granted. Always check the initial privacy status when your pixel loads.

2. Handle Dynamic Changes

Users can change their consent preferences after the initial page load. Always subscribe to consent update events.

3. Use Logging

Use console logging during development to understand consent flow:

console.log('Privacy status:', customerPrivacyStatus);
console.log('Marketing consent:', hasMarketingConsent(customerPrivacyStatus));

4. Map Consent Types

Different tracking purposes may require different consent types. Map your tracking needs to the appropriate consent categories.

Common Pitfalls to Avoid

1. Don’t ignore consent updates – Users can change preferences mid-session. Make sure your solution reacts to changes.
2. Don’t forget to test, test, test – Make sure you clear your cookies and simulate visits in order to test each time you make a change. Otherwise you’ll have angry marketers/website analytics managers to deal with. Or worse risk breaking local e-privacy regulations.

Conclusion

Working with privacy consent in Shopify’s custom web pixels requires embracing the platform’s Customer Privacy API rather than fighting against the sandbox limitations. This approach actually provides a more reliable and standardized way to handle user consent, ensuring your pixels remain compliant while delivering the tracking functionality your business needs.

By following these patterns, you can build robust, privacy-compliant web pixels that respect user preferences while maintaining the tracking capabilities essential for modern e-commerce analytics.