Set Up A GDPR Cookie Consent Form Using Google Tag Manager
Michael Wiegand and Ian Lurie May 23 2018
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:
- Detect your location and see whether you’re in the EU
- Based on your location, display the cookie consent (or not)
- Request cookie consent
- If you consent, place analytics cookies as usual
- By default, let you browse the site, but turn off analytics cookies, providing a seamless user experience
- 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.
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
Use this code:
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.
The “cookieConsent” Custom Event then becomes the trigger that you use to fire all tags for 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.
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.
Questions or comments? Leave them below.
In 15 years as a marketer, Michael's experience has run the gamut from design, development, direct mail, multivariate testing, print, and search. He now heads Portent's Analytics practice, overseeing everything from Google Tag Management, to CRM integration for closed-loop analytics, to solving ponderous digital marketing questions. Outside of work, he enjoys recording music, playing JRPGs and supporting Seattle Sounders FC. Read More
CEO & Founder
Ian Lurie is CEO and founder of Portent and the EVP of Marketing Services at Clearlink. He's been a digital marketer since the days of AOL and Compuserve (25 years, if you're counting). He's recorded training for Lynda.com, writes regularly for the Portent Blog and has been published on AllThingsD, Smashing Magazine, and TechCrunch.Ian speaks at conferences around the world, including SearchLove, MozCon, Seattle Interactive Conference and ad:Tech. He has published has published several books about business and marketing: One Trick Ponies Get Shot, available on Kindle, The Web Marketing All-In-One Desk Reference for Dummies, and Conversation Marketing.Follow him on Twitter at portentint, and on LinkedIn at LinkedIn.com/in/ianlurie. Read More