If you use Google Analytics to collect data on your Shopify store’s visitors you need to display to them a consent popup to ask to use their data. To achieve this, set up Cookie Information with Google consent mode v2 using 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 any user data, not 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 this style guide.
Set up the Cookie Information cookie consent popup in Shopify
To set up the Cookie Information cookie consent popup 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>
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>
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.
9. (Optional) If you operate your Shopify store in multiple languages, you need to adjust
the cookie-information-consent.liquid file by adding the following snippet:
{% assign dataCulture = 'DA' %}
{% if shop.locale == 'en' %}
{% assign dataCulture = 'EN' %}
{% elsif shop.locale == 'de' %}
{% assign dataCulture = 'DE' %}
{% elsif shop.locale == 'no' %}
{% assign dataCulture = 'NO' %}
{% elsif shop.locale == 'sv' %}
{% assign dataCulture = 'SV' %}
{% elsif shop.locale == 'fi' %}
{% assign dataCulture = 'FI' %}
{% endif %}So the cookie-information-consent.liquid file should look like this:
{% assign dataCulture = 'DA' %}
{% if shop.locale == 'en' %}
{% assign dataCulture = 'EN' %}
{% elsif shop.locale == 'de' %}
{% assign dataCulture = 'DE' %}
{% elsif shop.locale == 'no' %}
{% assign dataCulture = 'NO' %}
{% elsif shop.locale == 'sv' %}
{% assign dataCulture = 'SV' %}
{% elsif shop.locale == 'fi' %}
{% assign dataCulture = 'FI' %}
{% endif %}
<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>
10. Click Save.
11. Navigate to layout and click theme.liquid.
12. 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.
13. Click Save.
Set up a basic and advanced Google consent mode v2
To set up a basic Google consent mode v2 in Shopify, follow these steps:
1. Open a new tab in the browser.
2. Log in to Cookie Information.
3. Go to Consent solutions.
4. Find the consent solution for changing the cookie consent popup template.
5. Navigate to Pop-up appearance and click the Template drop-down list under Change template.
6. Choose Overlay v2 - Google Consent Mode v2 and Overlay v3 - Google Consent Mode v2templates.
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.
7. (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.
8. (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>
9. (Optional) This step applies to an advanced setup of Google consent mode v2.
Go back to your tab with Shopify > snippet cookie-information-consent.liquid.
10. (Optional) Add the following code snippet to cookie-information-consent.liquid snippet before the main installation code.
<script>
// setting default consent
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'wait_for_update': 15000 // giving visitors 15 seconds to choose their consent
});
gtag('set', 'ads_data_redaction', true);
gtag('set', 'developer_id.dNmIyNz', true);
</script>
Note: The code includes an enabled URL passthrough feature: gtag('set', 'url_passthrough', true). It’s optional. If you don’t want to use it, remove this line of code. For more details, see Google's documentation.