Hey,
We are managing consent via GTM (Iubenda), but are struggling to get access to the cookie that says it has consent to fire events in checkout.
wondering if shopify consent is assessable via the sandbox, and how to write a consent from GTM to shopify consent?
or can we access the cookie directly from sandbox (it is in the top document)
Hello Chris,
There are two easy ways to configure GTM consent in a custom web pixel.
In the Customer Events section of the admin, while editing a custom pixel, there is a “Customer privacy” card where required consent can be pre-configured for that pixel. Then, the pixel will only ever run if the user grants the proper consent.
If the store uses the automated Shopify consent banner, the user will only be asked for their consent depending on the different restrictions of their country or state. This banner can also be configured.
If you decide to go this route, you can assume that whenever the pixel runs, consent was granted. So as soon as GTM loads, consent can be configured in GTM as granted as well.
This is demonstrated as part of this tutorial: Create a Google Tag Manager custom pixel.
//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
If you’d like complete control over your pixel, regardless of if consent was given or not, it’s possible to configure the custom pixel not to require consent at all, and then subscribe to the visitorConsentCollected through the customerPrivacy API.
const log = (...args) => console.log('[CONSENT PIXEL]', ...args);
log('Initial consent:', init.customerPrivacy);
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
log('consent collected:', event.customerPrivacy);
/**
* {
* "analyticsProcessingAllowed": boolean,
* "marketingAllowed": boolean,
* "preferencesProcessingAllowed": boolean,
* "saleOfDataAllowed": boolean,
* }
*/
});
Hope this helps!
thanks.
Is there an issue (on shopify’s side) from using say google consent engine (on GTM) and then pushing the consent to shopify via
<script>
window.Shopify.customerPrivacy.setTrackingConsent(
{
"marketing": true
}
)
</script>
obviously this rely’s on consent within shopify native consent (which im not against its just not a tomorrow solution.
I’m not sure what “using google consent engine (on GTM)” would involve, but let me share what I know can work for custom consent management.
First, whenever GTM is loaded in a custom pixel, it is sandboxed inside an invisible iframe that can’t show any UI. So it can’t open a consent banner for the user to interact with, etc.
The sandbox also doesn’t have access to window.Shopify as it is only available on the top frame (outside the sandbox). We provide a specific API inside the sandbox.
That said, it’s not impossible to install a custom consent app or create your own consent banner in your store theme, that then call window.Shopify.customerPrivacy.setTrackingConsent from the top frame, which should trigger the visitorConsentCollected event inside the sandbox.
Hey @emileber (have two accounts, need to merge),
Thanks for your thoughts, very interesting and thanks for sharing.
I think overall the issue that I currently have a consent popup (via GTM), that in turn saves the consent status to the cookie. when we go to a sandbox’ed pixel, we are unable to retrieve the cookie, thus GTM attempts to write the cookies (which it can’t do in a sandbox). It then would like to invoke a popup modal to get consent (the fallback if it can’t get it programmatically), which is not possible either.
We can (and currently) load this in a localstorage, but ideally it would be a cookie.
I am kind of re-investigating shopify consent API at the moment, as it might just be easier to use the native consent engine within shopify and then align consent from Shopify with Google Consent V2. which would in turn mitigate alot of custom work within custom pixels and keep it inline with update to shopify platform.
UPDATE
so if window.Shopify can’t be accessed is there a way to update consent within the custom pixel?
I would like to effectively
Get the Customer Privacy Status let customerPrivacyStatus = init.customerPrivacy;
which returns say:
{
"analyticsProcessingAllowed": true,
"marketingAllowed": true,
"preferencesProcessingAllowed": true,
"saleOfDataAllowed": true
}
Update Privacy based on that (for example) window.Shopify.customerPrivacy.setTrackingConsent({"preferences": true})
I could run this in GTM (at init), but it feels like something that should be possible in custom pixels…
init.customerPrivacy is essentially the initial values of window.Shopify.customerPrivacy, so there’s no need to set it from the pixel side. It doesn’t really make sense to set consent from the pixel side, which explains why no APIs are provided to do so.
Using Shopify’s official customer privacy API and its consent banner is the easiest way to get it working perfectly with web pixels.
If you wish to use a custom consent banner like one provided by Google, you would have to load it on the top frame, e.g. in store’s theme liquid files. Then, it would have access to everything as expected, like showing a consent pop-up. Once done, window.Shopify.customerPrivacy.setTrackingConsent could be called from the top frame and pixels requiring consent would then be initialized if their requirements are met.
Quick note on cookies inside the sandbox: they do work. Since a lot of third party libraries like GTM, etc., read and write cookies using the native document.cookie API, we’ve actually engineered the sandbox to read/write cookies on the top frame, almost seamlessly. I say “almost” because the asynchronous nature of the sandbox could introduce unintended side-effects.
If you have to read/write cookies manually inside the sandbox, we recommend using the Standard API’s browser.cookie.get/set methods.
The same is true for local and session storages. The native APIs read/write on the top frame and we recommend using our Standard API whenever possible.