Skip to content

Commit b0e85f8

Browse files
orestbidaorestbida
authored
Merge pull request #751 from silenzium/docs/google-consent-mode
docs: Add example for Google Tag Manager's consent mode
2 parents c0d514d + f99f2f8 commit b0e85f8

File tree

2 files changed

+214
-0
lines changed

2 files changed

+214
-0
lines changed

‎docs/advanced/assets/google-consent-mode.png

152 KB
Loading

‎docs/advanced/google-consent-mode.md

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
# Google consent mode
2+
The script in this guide shows an example implementation to support Google Tag Manager's consent mode.
3+
4+
Descriptions and labels mainly taken from google documentations:
5+
- https://support.google.com/tagmanager/answer/10718549?hl=en
6+
- https://business.safety.google/adscookies/
7+
8+
Example result:
9+
10+
![google-consent-mode.png](assets/google-consent-mode.png)
11+
12+
Include a script module as described in the [getting-started guide](../essential/getting-started.md).
13+
14+
```javascript
15+
// cookieconsent-config.js
16+
17+
import * as CookieConsent from 'https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.esm.js';
18+
19+
const CAT_NECESSARY = "necessary";
20+
const CAT_ANALYTICS = "analytics";
21+
const CAT_ADVERTISEMENT = "advertisement";
22+
const CAT_FUNCTIONALITY = "functionality";
23+
const CAT_SECURITY = "security";
24+
25+
const SERVICE_AD_STORAGE = 'ad_storage'
26+
const SERVICE_AD_USER_DATA = 'ad_user_data'
27+
const SERVICE_AD_PERSONALIZATION = 'ad_personalization'
28+
const SERVICE_ANALYTICS_STORAGE = 'analytics_storage'
29+
const SERVICE_FUNCTIONALITY_STORAGE = 'functionality_storage'
30+
const SERVICE_PERSONALIZATION_STORAGE = 'personalization_storage'
31+
const SERVICE_SECURITY_STORAGE = 'security_storage'
32+
33+
// Define dataLayer and the gtag function.
34+
window.dataLayer = window.dataLayer || [];
35+
function gtag(){dataLayer.push(arguments);}
36+
37+
// Set default consent to 'denied' (this should happen before changing any other dataLayer)
38+
gtag('consent', 'default', {
39+
[SERVICE_AD_STORAGE]: 'denied',
40+
[SERVICE_AD_USER_DATA]: 'denied',
41+
[SERVICE_AD_PERSONALIZATION]: 'denied',
42+
[SERVICE_ANALYTICS_STORAGE]: 'denied',
43+
[SERVICE_FUNCTIONALITY_STORAGE]: 'denied',
44+
[SERVICE_PERSONALIZATION_STORAGE]: 'denied',
45+
[SERVICE_SECURITY_STORAGE]: 'denied',
46+
});
47+
48+
/**
49+
* Update gtag consent according to the users choices made in CookieConsent UI
50+
*/
51+
function updateGtagConsent() {
52+
gtag('consent', 'update', {
53+
[SERVICE_ANALYTICS_STORAGE]: CookieConsent.acceptedService(SERVICE_ANALYTICS_STORAGE, CAT_ANALYTICS) ? 'granted' : 'denied',
54+
[SERVICE_AD_STORAGE]: CookieConsent.acceptedService(SERVICE_AD_STORAGE, CAT_ADVERTISEMENT) ? 'granted' : 'denied',
55+
[SERVICE_AD_USER_DATA]: CookieConsent.acceptedService(SERVICE_AD_USER_DATA, CAT_ADVERTISEMENT) ? 'granted' : 'denied',
56+
[SERVICE_AD_PERSONALIZATION]: CookieConsent.acceptedService(SERVICE_AD_PERSONALIZATION, CAT_ADVERTISEMENT) ? 'granted' : 'denied',
57+
[SERVICE_FUNCTIONALITY_STORAGE]: CookieConsent.acceptedService(SERVICE_FUNCTIONALITY_STORAGE, CAT_FUNCTIONALITY) ? 'granted' : 'denied',
58+
[SERVICE_PERSONALIZATION_STORAGE]: CookieConsent.acceptedService(SERVICE_PERSONALIZATION_STORAGE, CAT_FUNCTIONALITY) ? 'granted' : 'denied',
59+
[SERVICE_SECURITY_STORAGE]: CookieConsent.acceptedService(SERVICE_SECURITY_STORAGE, CAT_SECURITY) ? 'granted' : 'denied',
60+
});
61+
}
62+
63+
CookieConsent.run({
64+
// See: https://cookieconsent.orestbida.com/reference/configuration-reference.html#guioptions
65+
// ...
66+
67+
// Trigger consent update when user choices change
68+
onFirstConsent: () => {
69+
updateGtagConsent();
70+
},
71+
onConsent: () => {
72+
updateGtagConsent();
73+
},
74+
onChange: () => {
75+
updateGtagConsent();
76+
},
77+
78+
// Configure categories and services
79+
categories: {
80+
[CAT_NECESSARY]: {
81+
enabled: true, // this category is enabled by default
82+
readOnly: true, // this category cannot be disabled
83+
},
84+
[CAT_ANALYTICS]: {
85+
autoClear: {
86+
cookies: [
87+
{
88+
name: /^_ga/, // regex: match all cookies starting with '_ga'
89+
},
90+
{
91+
name: '_gid', // string: exact cookie name
92+
}
93+
]
94+
},
95+
// See: https://cookieconsent.orestbida.com/reference/configuration-reference.html#category-services
96+
services: {
97+
[SERVICE_ANALYTICS_STORAGE]: {
98+
label: 'Enables storage (such as cookies) related to analytics e.g. visit duration.',
99+
}
100+
}
101+
},
102+
[CAT_ADVERTISEMENT]: {
103+
services: {
104+
[SERVICE_AD_STORAGE]: {
105+
label: 'Enables storage (such as cookies) related to advertising.',
106+
},
107+
[SERVICE_AD_USER_DATA]: {
108+
label: 'Sets consent for sending user data related to advertising to Google.',
109+
},
110+
[SERVICE_AD_PERSONALIZATION]: {
111+
label: 'Sets consent for personalized advertising.',
112+
},
113+
}
114+
},
115+
[CAT_FUNCTIONALITY]: {
116+
services: {
117+
[SERVICE_FUNCTIONALITY_STORAGE]: {
118+
label: 'Enables storage that supports the functionality of the website or app e.g. language settings.',
119+
},
120+
[SERVICE_PERSONALIZATION_STORAGE]: {
121+
label: 'Enables storage related to personalization e.g. video recommendations.',
122+
},
123+
}
124+
},
125+
[CAT_SECURITY]: {
126+
services: {
127+
[SERVICE_SECURITY_STORAGE]: {
128+
label: 'Enables storage related to security such as authentication functionality, fraud prevention, and other user protection.',
129+
},
130+
}
131+
}
132+
},
133+
134+
language: {
135+
default: 'en',
136+
translations: {
137+
en: {
138+
// See: https://support.google.com/tagmanager/answer/10718549?hl=en
139+
consentModal: {
140+
title: 'We use cookies',
141+
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.',
142+
acceptAllBtn: 'Accept all',
143+
acceptNecessaryBtn: 'Reject all',
144+
showPreferencesBtn: 'Manage Individual preferences'
145+
},
146+
preferencesModal: {
147+
title: 'Manage cookie preferences',
148+
acceptAllBtn: 'Accept all',
149+
acceptNecessaryBtn: 'Reject all',
150+
savePreferencesBtn: 'Accept current selection',
151+
closeIconLabel: 'Close modal',
152+
sections: [
153+
{
154+
title: "Cookie usage",
155+
description: "We use cookies to ensure the basic functionalities of the website and to enhance your online experience."
156+
},
157+
{
158+
title: "Strictly necessary cookies",
159+
description: "These cookies are essential for the proper functioning of the website, for example for user authentication.",
160+
linkedCategory: CAT_NECESSARY,
161+
},
162+
{
163+
title: "Analytics",
164+
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.',
165+
linkedCategory: CAT_ANALYTICS,
166+
cookieTable: {
167+
headers: {
168+
name: "Name",
169+
domain: "Service",
170+
description: "Description",
171+
expiration: "Expiration"
172+
},
173+
body: [
174+
{
175+
name: "_ga",
176+
domain: "Google Analytics",
177+
description: "Cookie set by <a href=\"https://business.safety.google/adscookies/\">Google Analytics</a>",
178+
expiration: "Expires after 12 days"
179+
},
180+
{
181+
name: "_gid",
182+
domain: "Google Analytics",
183+
description: "Cookie set by <a href=\"https://business.safety.google/adscookies/\">Google Analytics</a>",
184+
expiration: "Session"
185+
}
186+
]
187+
}
188+
},
189+
{
190+
title: 'Advertising',
191+
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.',
192+
linkedCategory: CAT_ADVERTISEMENT,
193+
},
194+
{
195+
title: 'Functionality',
196+
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.',
197+
linkedCategory: CAT_FUNCTIONALITY,
198+
},
199+
{
200+
title: 'Security',
201+
description: 'Cookies used for security authenticate users, prevent fraud, and protect users as they interact with a service.',
202+
linkedCategory: CAT_SECURITY,
203+
},
204+
{
205+
title: 'More information',
206+
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>.'
207+
}
208+
]
209+
}
210+
}
211+
}
212+
}
213+
});
214+
```

0 commit comments

Comments
 (0)