What is a gtag?

A gtag is a JavaScript library that helps you send event data to Google Analytics, allowing you to track user interactions on your website.

Example on a gtag:

            
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=your_ga_measurement_id"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
    
        gtag('config', 'your_ga_measurement_id');
    </script>
            
        

What is a gtag with consent settings?

A gtag with consent settings incorporates Google Consent Mode, allowing you to dynamically adjust how Google tags behave based on user consent preferences.

Gtag with the default consent settings:

            
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=your_ga_measurement_id"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
    
        gtag('consent', 'default', {
            'ad_storage': 'denied',
            'ad_user_data': 'denied',
            'ad_personalization': 'denied',
            'analytics_storage': 'denied',
            'functionality_storage': 'denied',
            'personalization_storage': 'denied',
            'security_storage': 'granted'
        });
    
        gtag('config', 'your_ga_measurement_id');
    </script>
            
        

Gtag with the Marketing Consent Settings:

            
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=your_ga_measurement_id"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
    
        gtag('consent', 'update', {
            ad_storage: "granted",
            ad_user_data: "granted",
            ad_personalization: "granted",
            analytics_storage: "denied",
            functionality_storage: "denied",
            personalization_storage: "denied",
            security_storage: "granted"
        });
    
        gtag('config', 'your_ga_measurement_id');
    </script>
            
        

Gtag with the Statistical Consent Settings:

            
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=your_ga_measurement_id"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
    
        gtag('consent', 'update', {
            ad_storage: "denied",
            ad_user_data: "denied",
            ad_personalization: "denied",
            analytics_storage: "granted",
            functionality_storage: "denied",
            personalization_storage: "denied",
            security_storage: "granted"
        });
    
        gtag('config', 'your_ga_measurement_id');
    </script>
            
        

Ensure Your Cookie Banner is Compatible

Make sure your Cookie Banner provider is up to date with Google Consent Mode by checking its functionality in Google Tag Manager Preview Mode.

Enable Consent Mode in Google Tag Manager

If you haven't already I suggest you enable Consent Mode so you can set the Consent Setting for your tags:

1. Go to adming
2. Choose Container Settings
3. Enable Conset Overview

Complete the Consent Settings

Go to Tags in Google Tag Manager and in the top right corner just above your tags, you'll see a shield icon which is your Consent Overview.

Inside the Consent Overview you'll have an overview over the Tags which have not yet been configured and the tags you have configured. You'll notice that there is Build-in Consent Settings on your Google Tags.

You add Consent Settings by clicking the tag and then scroll down to the section "Consent Settings" where you can select "Require additional consent for tag to fire" and then click the button with the title "Add required Consent".

Make sure to trigger tags only once Consent has been given

Most Cookie Banner Providers should fire a Consent Change Event to the datalayer when the user on your website selects their preferred Consent Settings. This datalayer event can be used as an trigger on your tags to make sure your tags only are being fired once the user completes their preferred Consent Settings.

Create a custom event trigger. As event name insert the event name taken from the datalayer which in this case is "consentSettingChange".

Then add them as triggers to your tags.

Test and confirm the Consent Settings

Test and confirm the tags are being fired only when there is a Consent Change.

On the event go to the tab Consent and check if the Consent Settings are applied. In this test I change from Default to have all the settings granted and it seems to be working well. In the screenshot you can see the state changed from all being "Denied" to the "Current State" being all "Granted":