Skip to main content

Shopify Sync With Usercentrics CMP

Richard van der Velde
Updated

Instructions for CMP v3

Step 1 - update your list of DPS

  • Access the Usercentrics Admin Interface for your CMP configuration or SettingID. Locate and remove the 'All My Shopify Trackings' cDPS (or any other similarly broad DPS related to Shopify Tracking that you may have set up).

  • Add three new predefined Data Processing Services:
    • “Shopify Analytics” (Template ID: ZQOx-TM97Y3rLe)
    • “Shopify Marketing” (Template ID: zixK7I8y1mhf1D)
    • “Shopify Preferences” (Template ID: T4PQQdTkrEofhd)

Important

The name must be an exact match.

Don’t forget to save your changes with the Save Draft or Publish buttons from the left sidebar. More details about this in our Preview & Publish feature tech doc.

Details about window event usage.

Step 3 - replace the existing consent tracking script with the new one, or add the new script if none currently exists.

  • Navigate to your Shopify layout and open the theme.liquid file.
  • Locate the Shopify Consent Tracking API script within your HTML. 
  • Remove the old script and replace it with the new script provided below, placing it at the bottom of your <head> section. 
<script type="text/javascript">
  window.Shopify.loadFeatures([{ name: 'consent-tracking-api', version: '0.1' }], 
    error => {
      if (error) throw error;
      console.log('** Shopify Consent Tracking API loaded');
      const syncTrackingConsent = consentObj => {
        window.Shopify.customerPrivacy.setTrackingConsent(consentObj, () => {
          console.log('** UC consent synced with Shopify Customer Privacy API');
          console.log('- Shopify consent: '+ 
            window.Shopify.customerPrivacy.currentVisitorConsent()
          );
        });
      }
      window.addEventListener("UC_CONSENT", e => {
        const services = Object.values(e.detail.services),
            ucAnalytics = services.find(service => service.name == 'Shopify Analytics'),
            ucMarketing = services.find(service => service.name == 'Shopify Marketing'),
            ucPreferences = services.find(service => service.name == 'Shopify Preferences');
        if (ucAnalytics && ucMarketing && ucPreferences) {
          const analyticsConsent = ucAnalytics.consent.given,
              marketingConsent = ucMarketing.consent.given,
              preferencesConsent = ucPreferences.consent.given;
          console.log('** Usercentrics consent:')
          console.log('- status: ' + e.detail.consent.status)
          console.log('- updatedBy: ' + e.detail.consent.updatedBy)
          console.log('- Analytics: ' + analyticsConsent)
          console.log('- Marketing: ' + marketingConsent)
          console.log('- Preferences: ' + preferencesConsent)
          const isOptOut = window.Shopify.customerPrivacy.saleOfDataRegion()
          console.log('** is using Opt-Out framework: ' + isOptOut)
          if (isOptOut) { 
            const val = e.detail.consent.status == 'ALL_DENIED' ? false : true;
            syncTrackingConsent({
              analytics: val, 
              marketing: val, 
              preferences: val, 
              sale_of_data: val
            })
          } else {     
            syncTrackingConsent({
              analytics: analyticsConsent,
              marketing: marketingConsent,
              preferences: preferencesConsent
            })
          }
        } else {
          throw 'No DPSs found (Shopify Analytics, Shopify Marketing, Shopify Preferences)'
        }
      })
    }
  )
</script>

This is what your file will look like:

 

Step 3 - ensure the script is working

  • Visit your Shopify store's website and open the Developer Tools console.
  • Confirm that you see the log message: "** Shopify Consent Tracking API loaded"

  • Open the Usercentrics banner and modify your consent preferences.
  • Verify that the console displays the log: "** UC consent synced with Shopify Customer Privacy API," along with the consent details, ensuring it is properly synced.

Comments

1 comment

Date Votes
  • Hans Skillrud

    Great article thank you! 

    I noticed this article discusses 3 pre-defined Services:

    “Shopify Analytics” 
    “Shopify Marketing” 
    “Shopify Preferences”

    It looks like the Usercentrics DPS scanner provides additional Shopify related Services:

    “Shopify CDN”
    “Shopify Product Reviews”
    “Shopify Storefront”
    “Shopify Tracking”

    Can this article be updated to reflect these additional Services?  Or can you refer me to a support article showing how to set up syncing for these additional pre-defined Services as well? 

    0

Please sign in to leave a comment.