Consent Mode

The Right Way to Use It

To properly implement Consent Mode, follow these three crucial steps in order. Failing to do so may disrupt the analytics functionality.

1. Adding the Code in the Header
2. Implementing the gtag Code
3. Applying/Updating Consent

Adding the Code in the Header

At every page load, inform the gtag about the default consents. Use the browser's local storage to store and retrieve the updated consents. If no consents are stored, send the default denied ones. Check if consents are stored in the local storage and use them instead of the default consents if available:

(function() {
    // Define dataLayer and the gtag function.
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    const storage = window.localStorage || window.sessionStorage;
    const consent = JSON.parse(storage.getItem('cookie-consent') || '{}');

    gtag('consent', 'default', Object.keys(consent).length ? consent : {
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'analytics_storage': 'denied'
    });
})();

tip

You can use the inbuilt yui.getBrowserStorage function to get the local storage object.

Implementing the gtag Code

After the initial consent setup, implement the gtag code and scripts on your site:

{% if site.gtmContainerId is not empty %}
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.gtmContainerId }}"></script>
{% endif %}

Then update the gtag variable with these parameters:

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    
    gtag('js', new Date());
    gtag('config', '{{ site.gtmContainerId }}');
</script>

Applying/Updating Consent

When the user updates their consent settings, update the local storage and send the updated consents through gtag:

// Use your own logic to retrive the consents saved
// ...

const acceptedConsents = {/*...*/};

// Save the updated consent list to browser storage
(window.localStorage || window.sessionStorage).setItem('cookie-consent', JSON.stringify(acceptedConsents));

// Send the updated list
gtag('consent', 'update', acceptedConsents);

warning

Any changes made to the gtag configuration, such as updating or adding new settings, are automatically sent to Google Services. This process is handled seamlessly, eliminating the need for manual updates or submissions.

Available Consents

Consent Type	Description
ad_storage	Enables storage, such as cookies (web) or device identifiers (apps), related to advertising.
ad_user_data	Sets consent for sending user data to Google for online advertising purposes.
ad_personalization	Sets consent for personalized advertising.
analytics_storage	Enables storage, such as cookies (web) or device identifiers (apps), related to analytics, e.g., visit duration.
functionality_storage	Enables storage that supports the functionality of the website or app, e.g., language settings.
personalization_storage	Enables storage related to personalization, e.g., video recommendations.
security_storage	Enables storage related to security, such as authentication functionality, fraud prevention, and other user protection.

You can read more about consents on the official Google Developers site