Shopify Sync With Usercentrics CMP v2

Instructions for CMP v2

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)

note: it should have the exact same name as listed above)

Step 2 - ensure you have your Usercentrics consent event registered

Navigate to the Implementation section and open the Data Layer & Events tab.
Under the “Window Event Name,” ensure that the event name is set to ucEvents. If it is not already there, add it by clicking the “+” button on the right.

If you plan to use the event listener provided below without modifications, the event name must be ucEvents.

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. You can refer to this old documentation to confirm you've identified the correct script.
Remove the old script and replace it with the new script provided below, placing it at the bottom of your <head> section.
Pay special attention to line 12, where you'll find window.addEventListener("ucEvents", ...). Ensure that the event name matches exactly with the one you've registered in Step 2.

<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:")
              console.log(window.Shopify.customerPrivacy.currentVisitorConsent())
              console.log("--------------------------")
            })
          }
          // please make sure the window event you've registered in Implementation -> Data Layers & Event (Usercentrics admin)
          // has exact same name as event listener below ("ucEvents") in the example
          window.addEventListener("ucEvents", function (e) {
            if (e.detail && e.detail.event == "consent_status") {
              analyticsConsent = e.detail['Shopify Analytics']
              marketingConsent = e.detail['Shopify Marketing']
              preferencesConsent = e.detail['Shopify Preferences']
              console.log('** Usercentrics consent:')
              console.log("- action: " + e.detail.action)
              console.log("- type: " + e.detail.type)
              console.log("- Analytics: " + analyticsConsent)
              console.log("- Marketing: " + marketingConsent)
              console.log("- Preferences: " + preferencesConsent)
              let consentObj = {}
              switch (e.detail.action) {
                case 'onDenyAllServices':
                  consentObj = {
                    analytics: false,
                    marketing: false,
                    preferences: false,
                    sale_of_data: false
                  }
                  break;
                case 'onAcceptAllServices':
                case 'onNonEURegion':
                  consentObj = {
                    analytics: true,
                    marketing: true,
                    preferences: true,
                    sale_of_data: true
                  }
                  break;
                default:
                  consentObj = {
                    analytics: analyticsConsent,
                    marketing: marketingConsent,
                    preferences: preferencesConsent
                  }
              }
              syncTrackingConsent(consentObj)
            }
          })
        }
      )
    </script>

This is what your file will look like:

Step 4 - 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.