Transcend Consent Shopify Integration
Some customers need to extend their visitors consent preferences and experiences beyond their core website and into e-commerce experiences provided by Shopify. This document outlines this process for Transcend Consent, with a particular focus on clarifying how the process differs for Shopify Storefront Pages vs Shopify Checkout Pages.
Until mid-2024, Shopify customers could use checkout.liquid for customizing their Shopify Checkout pages, which allowed them to modify the HTML contents of the page and directly load extra script tags like airgap.js. However, Shopify deprecated this functionality as of August 13, 2024. The correct path forward for third party tools on Checkout pages relies on the new “Checkout Extensibility” framework.
Transcend is a Shopify Partner and already has a Shopify app (focused on DSR functionality) currently available. We are currently developing a Shopify Checkout app to extend our consent experience into Shopify’s new Checkout framework.
On Shopify Storefront pages, airgap.js should be installed normally (by adding the script tag to the page HTML), and consent state should be synced between Transcend and the Shopify Privacy API.
- Here, Transcend Consent (airgap.js) is responsible for:
- collecting consent
- syncing consent with the Shopify Privacy API
- enforcing consent by blocking network requests and cookies
On Checkout pages, airgap.js cannot be added. Consent collected prior to the user hitting the Checkout flow can still be honored because it has been passed to the Shopify Privacy API, but the native Consent Banner UI cannot be displayed. This will be fully solved later this year when Transcend releases the new Shopify Checkout app for Shopify Plus members. In the interim there are several workarounds:
- Use a footer privacy link that opens a new tab outside of checkout where Airgap can load and preferences can be updated.
- Use the Shopify-provided native banner to handle consent changes inside the Checkout pages.
STOREFRONT PAGES
| Current | Coming Soon | |
|---|---|---|
| Consent Collection | Transcend UI | Transcend UI |
| Consent Regulation | Direct regulation via airgap.js | Direct regulation via airgap.js |
| Passing Consent to Shopify API | Code snippet | Integrated into airgap.js as direct integration |
CHECKOUT PAGES
| Current | Coming Soon | |
|---|---|---|
| Consent Collection | Consent Footer Link that Directs to a Consent UI outside of the checkout flow | Transcend-provided banner via Checkout Extension App |
| Consent Regulation | -Via Shopify Pixels or Tag Manager. (See Tracker Configuration section below.) | -Via Shopify Pixels or Tag Manager. (See Tracker Configuration section below.) |
Shopify Privacy API has 4 default “purposes” that map to the Transcend Purposes as follow:
| Shopify Purpose | Transcend Purpose |
|---|---|
| marketing | Advertising |
| sale_of_data | SaleOfInfo |
| analytics | Analytics |
| preferences | Functional |
Understanding your tracker installation approach within your Shopify instance is important to ensuring trackers are properly regulated.
SHOPIFY PIXELS
Shopify lets you wrap your various trackers within “Shopify Pixels” which they control load behaviors for. For full regulation essential to ensure the Shopify Privacy API is aware of Consent decisions - handled via our integration.
WITHIN A TAG MANAGER (e.g. GTM)
You can also choose to load a tag management script within Shopify and use it to control the subsequent scripts that should be allowed to load. For example, using Google’s existing Consent Mode framework, consent values from Transcend can be mapped and passed to allow Google to persist Consent across script load behaviors even where airgap.js isn’t allowed to regulate (e.g. within Checkout experiences).