If you do not have our consent pop-up implemented yet and are using Shopify, we recommend following our full guide on Shopify implementation here.
Basic vs Advanced Mode
There are two different modes available in this version: Basic and Advanced. Our solution can be used to implement either one and this guide gives you all the details on how to do so.
In the basic consent mode implementation, no information from users is collected at all, not even consent status. However, in the advanced consent mode implementation, Google tags are loaded before users are presented with the consent pop-up and Google collects cookieless data that lack personal identifiers.
Implementing Basic Mode
Most of our implementations for CMv2 share the same initial first steps. This guide is very similar to our CMv2 implementation via code snippet. The second step in that guide requires you to add an attribute to the script.
This guide will show you how to adjust the initial Shopify implementation script so that it also has the attribute added.
1. In the platform, you will need to change your pop-up template. The new templates are very similar to our Overlay v2/Overlay v3 templates and have Google's privacy policy in the main text.
To do so, you should navigate to your chosen consent solution -> "Pop Up Appearance" tab found on the left-hand side and then click on the dropdown menu under "Change Template".
You can choose between "Overlay v2 - Google Consent Mode v2" and "Overlay v3 - Google Consent Mode v2".
Important! Please be aware that changing your template will reset any customizations you have made including any text or styling changes. Please take a look at our style guide to find out how to customize your template.
Both of the new CMv2 templates have backwards compatibility with their older counterpart. For example, if you originally used Overlay v2 and wish to keep your styling, you can choose the new CMv2 template and copy over the CSS code.
2. You will need to update the implementation script in the source code of your website to include the HTML attribute called 'data-gcm-version' with the value set to “2.0".In Shopify, you will need to navigate to your cookie-information-consent snippet and add the following line of code so that it adds the new attribute to the script:
consentScript.setAttribute('data-gcm-version', '2.0');
Below, we have an example of what the whole code should look like:
<script>
const addCookieInformationConsentScript = () => {
const consentScript = document.createElement('script');
consentScript.setAttribute('src','https://policy.app.cookieinformation.com/uc.js');
consentScript.setAttribute('data-culture', 'EN');
consentScript.setAttribute('data-gcm-version', '2.0');
consentScript.id = 'CookieConsent';
document.head.appendChild(consentScript);
};
const setupListenerForConsentGathering = () => {
window.addEventListener("CookieInformationConsentGiven", () => {
let consent = {};
let consentSignals = {};
if (window.CookieInformation) {
consent = window.CookieInformation._getCookieValue('CookieInformationConsent');
consent = JSON.parse(consent);
if (consent) {
consentSignals = consent.consents_approved || [];
consentSignals = consentSignals.reduce((acc,curr)=> (acc[curr]=true,acc),{});
}
}
customerPrivacyAPIReady = setInterval(() => {
if (window.Shopify.customerPrivacy) {
clearInterval(customerPrivacyAPIReady);
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"),
);
}
}, 100);
});
};
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
error => {
if (error) {
throw error;
}
setupListenerForConsentGathering();
addCookieInformationConsentScript();
}
);
</script>
Implementing Advanced Mode
If you would like to utilize the advanced mode, please continue with the next step below:
3. Place this code snippet before the uc.js script installation code which is above:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
// Set default consent to 'denied' as a placeholder
// Determine actual values based on customer's own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'wait_for_update': 500
});
gtag('set', 'ads_data_redaction', true);
</script>
Changing the template
The new templates are very similar to our Overlay v2/Overlay v3 templates and have Google's privacy policy in the main text.
To do so, you should navigate to your chosen consent solution -> "Pop Up Appearance" tab found on the left-hand side and then click on the dropdown menu under "Change Template".
You can choose between "Overlay v2 - Google Consent Mode v2" and "Overlay v3 - Google Consent Mode v2".
The default version of Overlay v2 looks like this without any customisation or styling:
View our template showcase to see all of our template designs.
Important! Please be aware that changing your template will reset any customisations you have made beforehand, including any text or styling changes. Please take a look at our style guide to find out how to customise your template.
Adding the Google Privacy policy link
If your pop-up banner is heavily customized, alternatively, you can add the following HTML link to the main text in the HTML section under the advanced settings.
<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>
Please see the Google Consent Mode Guide for additional information.