How to integrate the Google Consent Mode into GDPR/CCPA app
Google Consent Mode allows you to adjust how your Google tags behave based on the consent status of your users. You can now integrate the Google Consent Mode into GDPR/CCPA + Cookie Management app.
Google Consent Mode integration
Step 1: Comment out your Google Tag Manager script from the theme.liquid file
- Navigate to Online Store
- Go to Actions
- Select Edit code
- Find the opening tag of the head HTML elment - <head> in the theme.liquid file
Step 2: Copy the Google Consent Mode code and paste it after the <head> tag
Google Consent script
<!-- Google Consent Mode integration script from GDPR/CCPA Compliance + Cookie Management App-->
<script id="gdpr-gcm-default-consent">
function executeGCM(marketingBlocked = false, analyticsBlocked = false, type = "default") {
gtag("consent", type, {
"ad_storage": marketingBlocked ? "denied" : "granted",
"analytics_storage": analyticsBlocked ? "denied" : "granted"
});
}
function checkInitialConsentForGCM(adittionalChecks = 0) {
let cpdCookie=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_preferences_disabled(\s*=\s*([^;]+)?)(?:.*)?$/)||[,null])[1];
if(cpdCookie) {
marketingBlocked = cpdCookie.indexOf("marketing") > -1;
analyticsBlocked = cpdCookie.indexOf("analytics") > -1;
executeGCM(marketingBlocked, analyticsBlocked);
} else {
let gdprCacheConsent = localStorage.getItem('gdprCache') ? JSON.parse(localStorage.getItem('gdprCache')).getCookieConsentSettings : null;
let ccsCookie=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_status\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
if(gdprCacheConsent && !ccsCookie) {
if(JSON.parse(gdprCacheConsent).status !== 'disabled'){
let initPreferences = parseInt(JSON.parse(gdprCacheConsent).checkboxes_behavior);
executeGCM(initPreferences === 0 || initPreferences === 2 || initPreferences === 5 || initPreferences === 7,
initPreferences === 0 || initPreferences === 3 || initPreferences === 6 || initPreferences === 7);
} else {
executeGCM(true, true);
}
} else {
if (adittionalChecks > 0) {
setTimeout(function() {
checkInitialConsentForGCM(adittionalChecks - 1);
}, 1000);
} else {
executeGCM(true, true);
}
}
}
}
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
checkInitialConsentForGCM(3);
</script>
<script id="gdpr-gcm-update-consent">
function checkGDPRGCM() {
let marketingBlocked = true;
let analyticsBlocked = true;
let cpdCookie=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_preferences_disabled(\s*=\s*([^;]+)?)(?:.*)?$/)||[,null])[1];
if(cpdCookie != null) {
marketingBlocked = cpdCookie.indexOf("marketing") > -1;
analyticsBlocked = cpdCookie.indexOf("analytics") > -1;
}
executeGCM(marketingBlocked, analyticsBlocked, "update");
}
let ccsCookie=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_status\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
if(ccsCookie) {
checkGDPRGCM();
}
window.addEventListener("click", function (e) {
if(e.target && (e.target.className == "cc-btn cc-btn-accept-all" || e.target.className == "cc-btn cc-allow" || e.target.className == "cc-btn cc-btn-accept-selected" || e.target.className == "cc-btn cc-dismiss")) {
checkGDPRGCM();
}
});
</script>
The final result should look like this:
Google Consent Mode testing
Once this is done, the Google Consent Mode will be successfully set in your store. In order to test, clear your browser cookies or open your store in incognito mode, and follow the steps below.
Step 1. Start off by checking if Google Tag Manager's tags are fired initially before the Cookie Bar is accepted. In order to check if the tags are fired, you can either use Google Tag Manager's preview mode or if you don't have access to Google Tag Manager use the Google Tag Assistant browser extension which you can download from here.
Step 2. After that, you should make sure that the ad_storage and analytics_storage are properly set to deny in the dataLayer. In order to do that, you can simply write dataLayer in the console and check if the first entry is:
{"consent","default",{"ad_storage":"denied","analytics_storage":"denied"}}
Step 3. After making sure that the dataLayer is properly set, you should check your store's cookies since the cookies _ga, _gid, and _gat should not be set before the cookie bar is accepted. Note that if any of the cookies are set, then you are likely adding them through an inline script, like analytics.js (which doesn't support Google Consent Mode). In order to properly check which cookies are set in your store, we recommend using the EditThisCookies browser extension, which you can download from here.
Step 4. Lastly, you should give your consent by accepting the Cookie Bar and making sure that the Marketing and Analytics cookie categories are not blocked. After accepting it, you will have to check if the cookies that we mentioned in step 3 (_ga, _gid, and _gat) are set in your store and also if the ad_storage cookies and analytics_storage cookies are set to grant in the dataLayer as shown in this image:
If the cookies and the update settings in the dataLayer are set, then the Google Consent Mode should be working properly.
If every step of the testing is successful but you are not getting the data you are expecting, unfortunately, we can't provide any further help in this regard.
Google Consent Mode is essentially an API that we use to pass consent data to Google Tag Manager. How a tag is supposed to respond to this data is beyond our purview. We can, and will be happy to check if you have correctly set things up in regards to our app's sending, and Google Tag Manager's receiving of consent settings. However, we have no insight into what tags do with these settings. We can't comment on how Google Analytics should behave when it receives the Google Consent Mode instructions, or speak on Google's behalf in regards to what data should be logged. This may seem dismissive, but there's nothing we can do on our end to improve the data logging in Google Analytics. Our app's scripts merely respectively set and update the consent state to Google Tag Manager.
And that is all for the Google Consent Mode, if you have any additional questions feel free to contact us via chat or email.
