How Google Tag Manager helps you with GDPR

Tomorrow the new form of the personal data protection law, otherwise known as GDPR, comes into effect. Under this regulation a number of changes have to be made to websites. One important change is configuring things so that the tracking tags collecting data about cookies for the purpose of personalising ads in users' browsers only fire once the user has given consent on the website.

For managing tracking tags easily I recommend using a tool called Google Tag Manager (GTM). I have already written several articles about this free and effective tool. If you are only starting out with it, I recommend reading those first: An introduction to Google Tag Manager, An introduction to Google Tag Manager II

So that you can control which tracking tags load only after the user has actively consented, we have prepared a Google Tag Manager export for you, which you can import very quickly and easily. Let us go over what this export should contain and how to adjust it so that everything works as it should on your website too.

The export contains:

Triggers

Click – Cookie – Accept. This trigger is set to the consent click in the pop-up window. If you use a different notice, this trigger has to be changed. The exact configuration will always differ depending on the type of site
DOM – With cookie. Fires tags in cases where the user has expressed consent to data processing on the website and has the cookie written.

Variable

Cookie. Identifies whether or not consent to the processing of personal data was granted and the cookie subsequently stored in the user's browser.

Importing the export into GTM

We import the export by choosing Admin in the top tab of GTM, then Import Container, and uploading the downloaded export there. The export can be downloaded HERE. I recommend merging this export into your GTM rather than overwriting, so that we do not lose all the tags already configured.

Google Tag Manager – Admin tab for importing an exported container

Google Tag Manager – container admin with the Import Container option

Google Tag Manager – container import with export file, workspace choice and the Merge option

Adjusting and configuring further tags

Once the settings are imported, the appearance of the pop-up window has to be adjusted. We can generate our own pop-up by opening the button below, where we can choose the colours, the text and the page holding our personal data policy. It is important to keep the link tags (<a> </a>) in the text.

Vygenerujte si vlastný cookie notice

Vyplňte texty, vyberte farby a nižšie sa vám priebežne skladá hotový kód. Skopírujte ho a vložte do svojej stránky.

Text lišty

Tlačidlo Súhlasím Tlačidlo Nesúhlasím

Pozadie lišty Tlačidlo Súhlasím Text Odkazy

Náhľad

HTML

<style>
    .invelity-cookie-notice {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 350px;
        padding: 20px;
        background-color: #f4f9fa;
        color: #717982;
        box-shadow: 0 5px 18px 0 rgba(26, 23, 24, .07);
        font-family: sans-serif;
        text-align: center;
    }

    .invelity-cookie-notice p {
        margin: 0 0 10px;
    }

    .invelity-cookie-notice a {
        color: #000000;
        text-decoration: underline;
    }

    .invelity-cookie-notice .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .invelity-cookie-notice button {
        font: inherit;
        cursor: pointer;
    }

    .invelity-cookie-notice .accept {
        padding: 7px 17px;
        border: 0;
        border-radius: 500px;
        background: #e23b73;
        color: #fff;
    }

    .invelity-cookie-notice .decline {
        padding: 7px;
        border: 0;
        background: none;
        color: inherit;
        font-size: 14px;
        text-decoration: underline;
    }
</style>

<div class="invelity-cookie-notice" id="cookie-notice" hidden>
    <p>Na zlepšenie našich služieb používame cookies. O ich používaní a možnostiach nastavenia sa dozviete viac v <a href="/zasady-ochrany-osobnych-udajov">Zásadách ochrany osobných údajov</a>.</p>
    <div class="actions">
        <button type="button" class="accept" data-cookie="accepted">Súhlasím</button>
        <button type="button" class="decline" data-cookie="declined">Nesúhlasím</button>
    </div>
</div>

<script>
    (function () {
        var notice = document.getElementById('cookie-notice');
        var KEY = 'cookie-consent';

        // Already answered — leave the visitor alone.
        if (localStorage.getItem(KEY)) {
            return;
        }

        notice.hidden = false;

        notice.addEventListener('click', function (event) {
            var choice = event.target.dataset.cookie;

            if (!choice) {
                return;
            }

            localStorage.setItem(KEY, choice);
            notice.hidden = true;

            // Load your analytics here when choice === 'accepted'.
        });
    })();
</script>

Vložte tento kód do svojej stránky tesne pred koniec značky </body>.

If you already use another solution you can remove this tag, but the trigger named "Click – Cookie – Accept" has to be adjusted so that it is set to the consent click on your current notice.

AW remarketing – Example

This tag is for illustration only; if you want it to work as it should, the variables within the tag's configuration have to be adjusted. It is attached to a trigger that will fire the tag only once consent has been given and for the lifetime of the cookie. If you already have such code configured in your GTM, I recommend removing it and simply adjusting the trigger on the original code.

Other tags

Every other tag and tracking code requiring active consent has to be attached to the "DOM – With cookie" trigger, which will switch these tags on only for a visitor who has given consent. It is essentially the same as the "AW remarketing – Example" tag, which serves as the example.

This is how we can configure retargeting tags, for instance, or a Google Analytics property with remarketing enabled. You can read more about this setting and how to check it on the Google support pages. We recommend turning this setting off on the property currently in use. If you do not want to lose those options, create a new Google Analytics property where the setting is enabled, but fire that property's tag only for users who have consented.

And there we have it. We have shown everything needed to create and read cookies with Google Tag Manager, and how to fire tags on the basis of them.

In closing I would like to thank Julius Fed for the blog post from which I used part of the HTML code. My thanks also go to the developers who helped me adjust the scripts and build the custom HTML for the pop-up, and to Jakub Gombár, who designed this whole solution.

Author

Jakub Gombár

Co-Founder

I got into online marketing through my own web project in 2011. Lately I have specialised mainly in performance online marketing, meaning paid search advertising, social media advertising and banner promotion across various websites. I really enjoy training new employees and interns, and I regularly share my experience at professional training sessions and workshops.