If you use Google Analytics to collect data on your Shopify store’s visitors you need to display a consent popup to ask to use their data. To achieve this, set up Google consent mode v2 advanced in Shopify.
In this article, we’ll show you how to do it.
Before you start
Here are a few things to know before you start:
Google consent mode v2 processes the consent preferences of your users obtained through your consent popup. It adjusts the functioning of analytics, ads, and third-party tags responsible for creating or accessing cookies based on these preferences.
There are two different modes available in this version: basic and advanced. You can implement both in Cookie Information. The basic consent mode doesn’t allow you to collect user data or even consent status until the user agrees. In the advanced consent mode, Google tags are loaded before the consent popup displays to users. Google collects cookieless data without personal identifiers.
To learn how to customize your cookie consent template, see the style guide.
Set up Google consent mode v2 basic in Shopify
To set up Google consent mode v2 basic in Shopify, follow these steps:
1. Log in to the Shopify account.
2. Navigate to Online Store > Themes > Current theme.
3. Click Customize.
4. Click the ⋯ three-dot icon and click Edit code.
5. Scroll down to Snippets and click Add a new snippet.
6. Name the file 'cookie-information-consent' and click Done.
7. In Snippets, click cookie-information-consent.liquid.
8. Paste the Shopify installation code into the file:
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('consent', 'default', {
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'ad_storage': 'denied',
'analytics_storage': 'denied',
'wait_for_update': 15000,
});
</script>
<script>
const addCookieInformationConsentScript = () => {
const consentScript = document.createElement('script');
consentScript.setAttribute('src', 'https://policy.app.cookieinformation.com/uc.js');
consentScript.setAttribute('data-culture', 'EN'); // replace with your site language
consentScript.setAttribute('data-gcm-enabled', 'false');
consentScript.id = 'CookieConsent';
document.head.appendChild(consentScript);
};
const setupListenerForConsentGathering = () => {
window.addEventListener("CookieInformationConsentGiven", () => {
let consentSignals = {};
let consentCookieReady = false;
let customerPrivacyAPIReady = false;
const checkAndSetTrackingConsent = () => {
if (consentCookieReady && customerPrivacyAPIReady && Object.keys(consentSignals).length > 0) {
window.Shopify.customerPrivacy.setTrackingConsent(
{
"analytics": consentSignals['cookie_cat_statistic'] || false,
"marketing": consentSignals['cookie_cat_marketing'] || false,
"preferences": consentSignals['cookie_cat_functional'] || false,
"sale_of_data": consentSignals['cookie_cat_marketing'] || false,
},
() => console.log("Cookie Information: consent gathered")
);
}
};
if (window.CookieInformation) {
const consentCookie = window.CookieInformation._getCookieValue('CookieInformationConsent');
if (consentCookie) {
const consent = JSON.parse(consentCookie);
if (consent) {
consentSignals = consent.consents_approved || [];
consentSignals = consentSignals.reduce((acc, curr) => {
acc[curr] = true;
return acc;
}, {});
consentCookieReady = true;
checkAndSetTrackingConsent();
}
}
}
const customerPrivacyAPIInterval = setInterval(() => {
if (window.Shopify.customerPrivacy) {
clearInterval(customerPrivacyAPIInterval);
customerPrivacyAPIReady = true;
checkAndSetTrackingConsent();
}
}, 100);
});
};
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
error => {
if (error) {
throw error;
}
setupListenerForConsentGathering();
addCookieInformationConsentScript();
}
);
</script>
9. Click Save.
Note: The attribute data-culture = "EN" controls the language in which the popup will appear on the page – in this example, it will be displayed in English. To change the language, set the data-culture attribute to a different language code. For more details, see this article.
10. Navigate to layout and click theme.liquid.
11. Add the following code snippet {% render 'cookie-information-consent' %} just before the closing </head> tag in the theme.liquid file, which is part of Shopify's theme.
12. Click Save.
13. Open a new tab in the browser.
14. Log in to Cookie Information.
15. Go to Consent solutions.
16. Find the consent solution for changing the cookie consent popup template.
17. Navigate to Pop-up appearance and click the Template drop-down list under Change template.
18. Choose Overlay v2 - Google Consent Mode v2 and Overlay v3 - Google Consent Mode v2 templates.
The default versions of overlay v2 and v3 without any customization look like this:
View our template showcase to see all template designs. To learn how to customize your template, see this style guide.
Note: Changing your template will reset any customizations including text or styling, you have made earlier.
20. (Optionally) If you use a different consent template or create a custom one, add a link to Google’s business data responsibility site to meet Google’s requirements.
Navigate to Pop-up appearance > Advanced options.
21. (Optionally) Add the following Google privacy policy link code to your template’s HTML code:
<a class="coi-banner__google-privacy-policy" aria-label="{{{translations.google_privacy_policy_link}}}" href="https://business.safety.google/privacy/" target="_blank">{{{translations.google_privacy_policy_link}}}</a>