Consent Mode for Google Tag Manager was announced at Google Marketing Livestream 2021. This function itself has been described on Google’s official help page for about a year, but I think it’s okay to interpret that consent mode has been officially launched again this time. In fact, in line with the timing of this event, the Google Tag Manager UI also added a feature regarding consent mode.
In this article, I would like to explain how to use this consent mode.
What is Consent Mode?
Due to laws and regulations such as GDPR that started in Europe in 2018 and CCPA in California, it has become necessary to obtain user consent when using cookies on websites. Although the law has not yet been enacted in Japan, I think many people have noticed that even on sites in Japan, a menu requesting consent to use cookies has begun to appear at the bottom of the page when browsing pages.
Appropriate Tag Behavior for Cookie Consent
As for the operation flow when using the cookie consent banner, it is necessary to display the cookie consent banner when the page is loaded and obtain the user’s consent before using the relevant cookie. In other words, even if the page is loaded, it is necessary to stop executing tags that use cookies until consent is obtained from the user. On the other hand, there is no problem with the use of cookies after obtaining the user’s consent.
There seems to be a lot of different ideas about what the behavior of the pre-cookie consent tag execution should be. Specifically, there are cases where related tags are not executed at all until cookie consent is obtained, and cases where tags are executed without using cookies. Google tags that use Google Tag Manager’s consent mode (currently, Google Ads tags, Floodlight tags, Google Analytics tags, and conversion linker tags) are the latter, “execute tags without using cookies”. seems to behave.
Proper operation of tags without using cookies when cookie consent has not been obtained requires a high level of knowledge of each tool, and it is extremely difficult for a general site developer to implement such an implementation. It can be said that it is the technique of As a result, many sites seem to prevent the execution of related tags at all if cookie consent is not obtained, but in that case problems such as data loss will occur.
For that reason, it seems that the new function ” Consent Mode ” was launched this time.
Introducing the cookie management tools I tried this time
This time, we are verifying the consent mode using a cookie management tool called ” Cookie Control ” provided by a Scottish company called “Civic” . After all, there are many cases where cookie management tools are provided by companies in Europe, which can be said to be the birthplace of GDPR. The reason for choosing Cookie Control is that Google Tag Manager’s template tag does not currently exist.
Of course, the presence of a template tag makes it less difficult to integrate cookie management tools into Google Tag Manager, but it also creates more black boxes and makes it harder to learn more about consent mode behavior. The purpose is not to manage cookies easily, but to understand the behavior of consent mode properly, so I decided to try this Cookie Control. Another reason for choosing Cookie Control is that it has a free plan.
How to implement Consent Mode
State before consent mode implementation
This time, instead of the production site, we will implement it on the test site prepared for consent mode verification. The test site is a static site with a total of about 10 pages and a contact form. Install a newly created Google Tag Manager container on this test site.
For verification purposes, the installed container contains
- Google Analytics pageview tag
- Google Ads conversion linker tag
- Google Ads conversion tag
- Google Ads remarketing tag
- Yahoo Ads remarketing tag
- Yahoo Ads conversion tag
will start from the installed state. At this point, the cookie management tool “Cookie Control” has not yet been installed. Of course, as expected, we have confirmed that the cookie consent banner is not displayed, and that various tags are executed according to the page load.
The actual Google Tag Manager settings are as follows.
Introducing Cookie Control
Next, we will introduce Cookie Control to the site. If you register an account from the Cookie Control site with the free range setting, the tag will be output as follows.
Set this tag to be delivered to all pages using Google Tag Manager’s “Custom HTML” tag (specify “All Pages” as the trigger) and check the site. Then, of course, the cookie consent banner was displayed when the page was loaded (the timing of Google Tag Manager’s “gtm.js”).
Since the default language of Cookie Control is English, it can be changed to Japanese by customizing the tags output from the tool, and there are two categories of cookies: “access analysis tools” and “web advertisements”. and to display the cookie banner by default when the page is loaded without cookie consent set. The repair method was performed with reference to the documentation for developers of Cookie Control, and the final code was as follows.
<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
var config = {
apiKey: 'xxxxxxxxxxxxxx',
product: 'COMMUNITY',
optionalCookies: [{
name: 'analytics',
label: 'アクセス解析ツール',
description: 'サイト改善のための分析ツールとして「Googleアナリティクス」を用いています。このCookieを無効化するとブラウザ固有のIDがセットされず、断続的な統計データのみが送信されます。',
cookies: [],
onAccept : function(){},
onRevoke: function(){}
}, {
name: 'ads',
label: 'Web広告',
description: 'サイトの閲覧や広告のクリック履歴がサイト内外で表示される広告の最適化に使われます。広告媒体には、GoogleとYahooの2つの媒体を利用しています。',
cookies: [],
onAccept : function(){},
onRevoke: function(){}
}],
text: {
title: '本サイトで読み書きするCookieについて',
intro: '本サイトでは以下の目的でCookieを読み書きします。',
necessaryTitle: '必要不可欠なCookie',
necessaryDescription: 'ブラウザの設定で無効化できますが、サイトの機能が正常に動作しなくなることがあります。',
accept: '許可する',
acceptSettings: '許可する',
reject: '拒否',
rejectSettings: '拒否'
},
initialState: 'open',
position: 'RIGHT',
theme: 'DARK'
};
CookieControl.load( config );
</script>The cookie consent banner displayed with this code looks like this:
Of course, the cookie consent banner is displayed as it is now, but since the tag operation is not based on this consent, it is necessary to incorporate it into Google Tag Manager’s consent mode.
Change execution timing of Cookie Control tag
With this update of Google Tag Manager, as a default trigger,
- Consent Initialization – All Pages (trigger type is “Consent Initialization”)
- Initialization – ALl Pages (trigger type is “Initialize”)
two have been added. Together with the original triggers, the execution order of these default triggers is
- Consent Initialization (gtm.init_consent)
- Initialization(gtm.init)
- Container Loaded (gtm.js)
- DOM Ready (gtm.dom)
- Window Loaded (gtm.load)
It looks like. Of these triggers, “Consent Initialization” is the first to execute and should be modified to fire the tag that executes the cookie consent banner.
So I changed the trigger of the “Cookie Control” tag.
However, although we were able to control the execution order of the tags in this state, the behavior of the Google Analytics tags and advertising tags is not based on the cookie consent status. Next, we will proceed with the implementation so that the behavior is based on the cookie consent status.
Configure the Cookie Control tag to use consent mode
Currently, the problem is that Google Tag Manager is not configured to run in consent mode. Therefore, implement to invoke consent mode. As a result of reading Google’s official help page for developers, it seems necessary to implement the following.
Set default behavior to Deny
At the timing of “initialization of consent”, set the default behavior of Google Tag Manager’s consent mode to deny once. This time, edit the custom HTML of the tag “Cookie Control Tag” that has already been implemented in the tag manager as follows.
<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
<!-- ここから追加 -->
function gtag(){ dataLayer.push(arguments); }
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied'
});
dataLayer.push({
'event': 'default_consent'
});
<!-- ここまでを追加 -->
var config = {
...As a result, the consent mode can be set to deny once, and Google tags delivered from Google Tag Manager will not use cookies unless a command to allow the use of cookies is executed.
Set permission/denial according to user settings
Then, update your Google Tag Manager consent mode settings when the user accepts or declines cookies based on the consent banner. For example, using the gtag command,
gtag('consent', 'update', {
'ad_storage': 'granted'
});You can allow advertising-related cookies by running JavaScript such as
Make these actions based on the actions of the Cookie Control consent banner. According to the Cookie Control developer documentation , the onAccept / onRevoke methods in each cookie option are called when the consent banner action is taken. So we also rewrite the onAccept/onRevoke methods.
Code for default behavior and user preferences
The parts changed in the above “Set default action to deny” and “Set allow/deny according to user settings” are highlighted below.
The full custom HTML looks like this:
<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied'
});
dataLayer.push({
'event': 'default_consent'
});
var config = {
apiKey: 'xxxxxxxxxxxxxx',
product: 'COMMUNITY',
optionalCookies: [{
name: 'analytics',
label: 'アクセス解析ツール',
description: 'サイト改善のための分析ツールとして「Googleアナリティクス」を用いています。このCookieを無効化するとブラウザ固有のIDがセットされず、断続的な統計データのみが送信されます。',
cookies: [],
onAccept : function(){
gtag('consent', 'update', {
'analytics_storage': 'granted'
});
},
onRevoke: function(){
gtag('consent', 'update', {
'analytics_storage': 'denied'
});
}
}, {
name: 'ads',
label: 'Web広告',
description: 'サイトの閲覧や広告のクリック履歴がサイト内外で表示される広告の最適化に使われます。広告媒体には、GoogleとYahooの2つの媒体を利用しています。',
cookies: [],
onAccept : function(){
gtag('consent', 'update', {
'ad_storage': 'granted'
});
},
onRevoke: function(){
gtag('consent', 'update', {
'ad_storage': 'denied'
});
}
}],
text: {
title: '本サイトで読み書きするCookieについて',
intro: '本サイトでは以下の目的でCookieを読み書きします。',
necessaryTitle: '必要不可欠なCookie',
necessaryDescription: 'ブラウザの設定で無効化できますが、サイトの機能が正常に動作しなくなることがあります。',
accept: '許可する',
acceptSettings: '許可する',
reject: '拒否',
rejectSettings: '拒否'
},
initialState: 'open',
position: 'RIGHT',
theme: 'DARK'
};
CookieControl.load( config );
</script>Checking Consent Mode Behavior
This completes the implementation of consent mode for Google Tag Manager. Publish the Google Tag Manager workspace and use Chrome developer tools to check the contents of beacon transmissions and the contents of cookies saved. However, since the handling of cookies is complicated for advertising tags, here we would like to check the “cid” (client ID) parameter used in Google Analytics beacons and the “_ga” value saved in cookies. .
GA tag when the page is displayed for the first time
When the page is displayed for the first time, the user has not yet consented to the use of cookies. At this time, a beacon is sent to Google Analytics, but nothing is saved in the cookie “_ga” .
In this state, try reloading the page again without touching the cookie consent banner. Then you can see that the client ID sent to Google Analytics is different between the first and second times. This is because the client ID is not saved in the cookie, so the first and second pages are recognized as different users, and it can be said that this is an appropriate behavior when cookies are not used.
Also, when I checked the case where pageview and event hits were sent to Google Analytics within the same page, they were also sent with different client ID values. This is probably because a GA tracker is generated for each triggered tag in the case of tag firing from Google Tag Manager, and trackers are not shared.
Behavior when accepting the use of cookies
If you accept the use of cookies, a page view beacon will be sent to Google Analytics. And I was able to confirm that the information of the client ID is recorded in the cookie at this timing. Of course, since the client ID information is recorded in the cookie, hits will be sent to Google Analytics with the same client ID even if you send events later on the same page. Also, even if you transition to another page, you can confirm that the client ID can be inherited and sent in the same way.
Since pageviews are sent both when the page is first loaded and when the use of cookies is permitted, pageviews are sent twice. However, the client ID differs between the first and second visits, and if the page view is not sent with the client ID used when the use of cookies was permitted, information such as the referrer information will be lost. It may be that this behavior is unavoidable.
Behavior when refusing to use cookies
Try to deny the cookies that you once allowed. Then, the cookies related to Google Analytics are immediately deleted from the browser cookies, and you can confirm the intended behavior. In other words, when you refuse to use cookies, it seems that Google Tag Manager will properly process cookies even if you do not clear the related cookie information yourself.
What about non-Google tags?
Regarding Google tags, I found that Google Tag Manager seems to handle it well. Now, we need to look at non-Google tags as well. In this verification, we installed Yahoo Ads remarketing conversion tags, so we checked the movement of these tags.
As a result, I added a check item for “additional consent check” of the corresponding tag, and tried various other things, but it did not work as intended. This is the official developer help page
Adjusting tag behavior based on user consent status is supported by:
- Google Ads
- Floodlight
- Google Analytics
- conversion linker
It can also be seen from the fact that it is written as It seems natural to say that such behavior is natural because Google can not grasp and manage appropriate movements.
summary
This time, I introduced how I actually used the newly integrated “Consent Mode” in Google Tag Manager. The following six points should be remembered when using consent mode.
- To display the cookie consent banner itself, it is necessary to use an external dedicated tool and link the results of allowing or denying with the dedicated tool to Google Tag Manager.
- In Google Tag Manager’s consent mode, even users who refuse cookies will still execute the tag. However, instead of using the full function of the tag, only the functions that can be used without using cookies are executed.
- Currently, there are only four tags that support Google Tag Manager’s consent mode: Google Ads, Floodlight, Google Analytics, and Conversion Linker.
- Since it is also necessary to change the settings on the Cookie Consent Tool side, it is difficult to introduce without a minimum understanding of JavaScript.
- It is a good idea to reconfirm the detailed operations when allowing/rejecting when you actually use it.
- After all, when considering the introduction of tools other than Google tools, the standard consent mode function cannot be diverted as it is.
Personally, I feel that the last point is a bottleneck and it will take time for the consent mode to spread.
