Set Up A GDPR Cookie Consent Form Using Google Tag Manager

NOTE: This is not legal advice. We are not lawyers. It’s also not the only thing you’ll need to do to reach GDPR compliance for your business. Cookie consent is only one portion of GDPR compliance. Please consult legal counsel before implementing this solution.

Another note: This solution works for cookies fired from inside the GTM container. It won’t prevent cookie placement for those placed outside the container.

We’ve already provided some GDPR basics for marketers. This post gets a lot more tactical.

Under the General Data Protection Regulation (GDPR), the ideal cookie consent form will:

1. Detect your location and see whether you’re in the EU
2. Based on your location, display the cookie consent (or not)
3. Request cookie consent
4. If you consent, place analytics cookies as usual
5. By default, let you browse the site, but turn off analytics cookies, providing a seamless user experience
6. Oh, and since you have about 48 hours (GDPR goes into effect May 25th), require as little developer time as possible.

Ask, and ye shall receive: This step-by-step uses Google Tag Manager (GTM) to create a cookie consent banner that pops up at the bottom of your site only for EU visitors. The banner asks visitors to opt-in. If they don’t, they can still browse the site, but GTM will not fire cookies that require consent.

To set this up, you need to understand GTM and GTM configuration. When you’re done, you’ll get something like this:

Step 1: Sign up for an ipinfo.io account

First, you need a way to identify visitors from the European Union. IP Info provides an API to do just that.

It’s free for up to 1,000 requests/day. We get more traffic than that, so we’re paying $100/month for up to 40K requests/day. Not bad.

After signup you get an API token:

Copy that and hang on to it for later.

Step 2: Generate a cookie consent banner at Cookie Consent by Insites

At Cookie Consent by Insites, you can generate a Cookie Consent banner that matches the look and feel of your site.

Link it to your privacy policy and choose the “opt-in” method under “Compliance Type.”

Once you have configured and styled your banner, copy the code in the box on the right-hand side and hang on to it for later.

Step 3: Configure Google Tag Manager

For this step, we’re assuming you know a bit about GTM variables, triggers, and tags work. This is where the rubber meets the road. If you aren’t sure what this all means, stop. Get your analytics nerd to help out.

Set up country lookup

Set up a Custom HTML tag with a JavaScript that will query the IP Info API and return the visitor’s Country Code.

Use this code:

<script type="application/javascript">
  function callback(json) {
    dataLayer.push({'event': 'ipEvent', 'ipCountry': json.country});	
  }
</script>
<script type="application/javascript" src="https://ipinfo.io/?token=YOUR-TOKEN-GOES-HERE&callback=callback"></script>

Replace the YOUR-TOKEN-GOES-HERE portion with your IP Info API Token you set aside from Step 1.

Then create a data layer variable to pull the value of that Country Code.

Once the Country Code is available in the data layer, use a Lookup Table variable to look for each of the EU Alpha-2 Country Codes and return a “Yes” if they are in the EU and a “No” for all other Country Codes.

That will inform a trigger called “IP Event – EU” which will show/hide the Cookie Consent banner based on location.

Add the cookie consent banner

Next, take your script from Step 2 and create a Custom HTML tag to fire that when the “IP Event – EU” trigger meets its criteria.

If the visitor accepts, the banner sets a first-party cookie. Otherwise, no cookies for them.

We’ll also need a trigger that verifies the corresponding cookie values if the visitor accepts.

Once that trigger executes, we send a data layer event and trigger.

Here’s example code for that data layer event.

<script>
dataLayer.push({'event': 'cookieConsent'});
</script>

The “cookieConsent” Custom Event then becomes the trigger that you use to fire all tags for EU visitors.

Non-EU Visitors

Make sure this doesn’t impact any tracking you’re doing for non-EU visitors: Delay your tags to fire on Window Loaded (not Pageview), and ensure your “In The EU” variable equals “No.” That way, the Country Code process has a chance to run.

Quality Assurance

Test! Test! Test! Test on staging or in Google Tag Manager’s preview mode:

Next, you’ll want to find a proxy service that allows you to view the preview mode URL from a server in the EU. We used Hide Me, a service that has options to proxy from Holland or Germany.

Be sure you test this on a mobile device and in every possible form factor. We didn’t, and our social share ribbon overlapped with the consent button. Luckily @_sebastiansimon was on the case and let us know. We’re fixing it as I write this.

Done! And A Question

That’s it! You now have a low-code cookie consent form in place.

We did grapple with one question, and we’d love your opinion: Should we display the cookie consent for everyone, regardless of location? That way if someone from the EU is, say, traveling in Canada, the would still see the form? We don’t want to litter our site with forms. We don’t want to get fined a few million Euros, either. GTM exceptions are a solution to respect cookie exceptions when needed.

Questions or comments? Leave them below.