How to Implement Google Consent Mode for a Shopify Site for Free Using CookieConsent
Ensuring compliance with privacy regulations like GDPR and CCPA is crucial for any Shopify store. One effective way to achieve this is by implementing Google Consent Mode, which allows you to manage user consent for cookies and tracking while maintaining data accuracy for analytics and advertising. While many Shopify apps charge a monthly fee for this functionality, you can achieve the same results for free using CookieConsent (free and open source), a lightweight and customizable solution.
In this guide, we’ll walk you through how to implement Google Consent Mode on your Shopify site using CookieConsent, without spending a dime.
Why Use Google Consent Mode?
Google Consent Mode ensures that your site respects user privacy preferences while still collecting valuable data for analytics and advertising. By default, it denies consent for all tracking services until the user explicitly grants permission. This approach not only keeps you compliant with privacy laws but also builds trust with your visitors1.
Step-by-Step Guide to Implementing Google Consent Mode with CookieConsent
1. Set Up the CookieConsent Configuration File
First, create a cookieconsent-config.js file in your Shopify theme’s assets directory. This file will define the consent categories, services, and how they interact with Google Consent Mode.
Here’s the code to include in your cookieconsent-config.js file:
// cookieconsent-config.js
import 'https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.umd.js';
const CAT_NECESSARY = "necessary";
const CAT_ANALYTICS = "analytics";
const CAT_ADVERTISEMENT = "advertisement";
const CAT_FUNCTIONALITY = "functionality";
const CAT_SECURITY = "security";
const SERVICE_AD_STORAGE = 'ad_storage'
const SERVICE_AD_USER_DATA = 'ad_user_data'
const SERVICE_AD_PERSONALIZATION = 'ad_personalization'
const SERVICE_ANALYTICS_STORAGE = 'analytics_storage'
const SERVICE_FUNCTIONALITY_STORAGE = 'functionality_storage'
const SERVICE_PERSONALIZATION_STORAGE = 'personalization_storage'
const SERVICE_SECURITY_STORAGE = 'security_storage'
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Set default consent to 'denied' (this should happen before changing any other dataLayer)
gtag('consent', 'default', {
[SERVICE_AD_STORAGE]: 'denied',
[SERVICE_AD_USER_DATA]: 'denied',
[SERVICE_AD_PERSONALIZATION]: 'denied',
[SERVICE_ANALYTICS_STORAGE]: 'denied',
[SERVICE_FUNCTIONALITY_STORAGE]: 'denied',
[SERVICE_PERSONALIZATION_STORAGE]: 'denied',
[SERVICE_SECURITY_STORAGE]: 'denied',
});
/**
* Update gtag consent according to the users choices made in CookieConsent UI
*/
function updateGtagConsent() {
gtag('consent', 'update', {
[SERVICE_ANALYTICS_STORAGE]: CookieConsent.acceptedService(SERVICE_ANALYTICS_STORAGE, CAT_ANALYTICS) ? 'granted' : 'denied',
[SERVICE_AD_STORAGE]: CookieConsent.acceptedService(SERVICE_AD_STORAGE, CAT_ADVERTISEMENT) ? 'granted' : 'denied',
[SERVICE_AD_USER_DATA]: CookieConsent.acceptedService(SERVICE_AD_USER_DATA, CAT_ADVERTISEMENT) ? 'granted' : 'denied',
[SERVICE_AD_PERSONALIZATION]: CookieConsent.acceptedService(SERVICE_AD_PERSONALIZATION, CAT_ADVERTISEMENT) ? 'granted' : 'denied',
[SERVICE_FUNCTIONALITY_STORAGE]: CookieConsent.acceptedService(SERVICE_FUNCTIONALITY_STORAGE, CAT_FUNCTIONALITY) ? 'granted' : 'denied',
[SERVICE_PERSONALIZATION_STORAGE]: CookieConsent.acceptedService(SERVICE_PERSONALIZATION_STORAGE, CAT_FUNCTIONALITY) ? 'granted' : 'denied',
[SERVICE_SECURITY_STORAGE]: CookieConsent.acceptedService(SERVICE_SECURITY_STORAGE, CAT_SECURITY) ? 'granted' : 'denied',
});
}
CookieConsent.run({
// Trigger consent update when user choices change
onFirstConsent: () => {
updateGtagConsent();
},
onConsent: () => {
updateGtagConsent();
},
onChange: () => {
updateGtagConsent();
},
// Configure categories and services
categories: {
[CAT_NECESSARY]: {
enabled: true, // this category is enabled by default
readOnly: true, // this category cannot be disabled
},
[CAT_ANALYTICS]: {
autoClear: {
cookies: [
{
name: /^_ga/, // regex: match all cookies starting with '_ga'
},
{
name: '_gid', // string: exact cookie name
}
]
},
services: {
[SERVICE_ANALYTICS_STORAGE]: {
label: 'Enables storage (such as cookies) related to analytics e.g. visit duration.',
}
}
},
[CAT_ADVERTISEMENT]: {
services: {
[SERVICE_AD_STORAGE]: {
label: 'Enables storage (such as cookies) related to advertising.',
},
[SERVICE_AD_USER_DATA]: {
label: 'Sets consent for sending user data related to advertising to Google.',
},
[SERVICE_AD_PERSONALIZATION]: {
label: 'Sets consent for personalized advertising.',
},
}
},
[CAT_FUNCTIONALITY]: {
services: {
[SERVICE_FUNCTIONALITY_STORAGE]: {
label: 'Enables storage that supports the functionality of the website or app e.g. language settings.',
},
[SERVICE_PERSONALIZATION_STORAGE]: {
label: 'Enables storage related to personalization e.g. video recommendations.',
},
}
},
[CAT_SECURITY]: {
services: {
[SERVICE_SECURITY_STORAGE]: {
label: 'Enables storage related to security such as authentication functionality, fraud prevention, and other user protection.',
},
}
}
},
language: {
default: 'en',
translations: {
en: {
consentModal: {
title: 'We use cookies',
description: 'This website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent.',
acceptAllBtn: 'Accept all',
acceptNecessaryBtn: 'Reject all',
showPreferencesBtn: 'Manage Individual preferences'
},
preferencesModal: {
title: 'Manage cookie preferences',
acceptAllBtn: 'Accept all',
acceptNecessaryBtn: 'Reject all',
savePreferencesBtn: 'Accept current selection',
closeIconLabel: 'Close modal',
sections: [
{
title: "Cookie usage",
description: "We use cookies to ensure the basic functionalities of the website and to enhance your online experience."
},
{
title: "Strictly necessary cookies",
description: "These cookies are essential for the proper functioning of the website, for example for user authentication.",
linkedCategory: CAT_NECESSARY,
},
{
title: "Analytics",
description: 'Cookies used for analytics help collect data that allows services to understand how users interact with a particular service. These insights allow services both to improve content and to build better features that improve the user’s experience.',
linkedCategory: CAT_ANALYTICS,
cookieTable: {
headers: {
name: "Name",
domain: "Service",
description: "Description",
expiration: "Expiration"
},
body: [
{
name: "_ga",
domain: "Google Analytics",
description: "Cookie set by <a href=\"https://business.safety.google/adscookies/\">Google Analytics</a>",
expiration: "Expires after 12 days"
},
{
name: "_gid",
domain: "Google Analytics",
description: "Cookie set by <a href=\"https://business.safety.google/adscookies/\">Google Analytics</a>",
expiration: "Session"
}
]
}
},
{
title: 'Advertising',
description: 'Google uses cookies for advertising, including serving and rendering ads, personalizing ads (depending on your ad settings at <a href=\"https://g.co/adsettings\">g.co/adsettings</a>), limiting the number of times an ad is shown to a user, muting ads you have chosen to stop seeing, and measuring the effectiveness of ads.',
linkedCategory: CAT_ADVERTISEMENT,
},
{
title: 'Functionality',
description: 'Cookies used for functionality allow users to interact with a service or site to access features that are fundamental to that service. Things considered fundamental to the service include preferences like the user’s choice of language, product optimizations that help maintain and improve a service, and maintaining information relating to a user’s session, such as the content of a shopping cart.',
linkedCategory: CAT_FUNCTIONALITY,
},
{
title: 'Security',
description: 'Cookies used for security authenticate users, prevent fraud, and protect users as they interact with a service.',
linkedCategory: CAT_SECURITY,
},
{
title: 'More information',
description: 'For any queries in relation to the policy on cookies and your choices, please <a href="https://www.example.com/contacts">contact us</a>.'
}
]
}
}
}
}
});
2. Add CookieConsent to Your Shopify Theme
Next, include the CookieConsent CSS and JavaScript files in your Shopify theme’s theme.liquid file. Add the following lines just before the closing </head> tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.css">
<script type="module" src="{{ 'cookieconsent-config.js' | asset_url }}"></script>
3. Test and Publish
Once you’ve added the code, save your changes and test the implementation on your Shopify store. Ensure that the consent banner appears and that user preferences are correctly updating Google Consent Mode.
Benefits of Using CookieConsent for Google Consent Mode
- Cost-Effective: Avoid monthly fees associated with Shopify apps.
- Customizable: Tailor the consent banner to match your store’s branding.
- Compliant: Stay aligned with GDPR, CCPA, and other privacy regulations.
- Lightweight: Minimal impact on site performance.
By following this guide, you can implement Google Consent Mode on your Shopify site for free, ensuring compliance and maintaining data accuracy for analytics and advertising. For more SEO and Shopify tips, visit 404Medic.