May 14, 2017
Cookie Consent Notification with Google Tag Manager
IMPORTANT UPDATE: Due to GDPR (General Data Protection Regulation) this cookie consent is not relevant anymore. Read this step-by-step guide instead how to implement a new GDPR Cookie Consent Notification with Google Tag Manager.
=======
Have you ever wondered why some sites display a cookie consent notice? If you or your business is located in the European Union, or if you are targeting EU citizens AND you’re using tracking software (i.e. Google Analytics), then you need to display a cookie consent notification on your website. In this Google Tag Manager Cookie Consent guide, I’ll show you how to install one without much hassle.
Short context
In May 2011, a European Union (EU) Directive was adopted by all EU member countries to protect consumer privacy online. This piece of privacy legislation requires that covered websites:
- Let users know if they are using cookies.
- Explain what data is gathered through the use of cookies and how that data is used.
- Gather user consent to the use of cookies.
The law is enforced by governing bodies in the EU, and therefore cannot apply unilaterally to everyone. If you live outside of the EU, have a website hosted on a server outside of the EU, and are targeting consumers anywhere other than the EU, you don’t need a cookie consent notice.
But since it’s pretty difficult to avoid visitors from European Union, you should add a consent notification.
So what’s the plan?
For the notification to work, you’ll need to complete the following steps:
- Get a Javascript code of Cookie Consent Notification. It displays a message to your visitor and once he/she clicks Got It button, saves a cookie in visitor’s browser. The cookie makes sure that a person does not see the notification on every page load. If a visitor uses a different browser or clears browser cache/cookies, the notification will be displayed once again.
- Modify the code in order to match notification’s style with your website’s. In addition to that, you’ll need to edit text as well.
- Create a Privacy Policy page and paste its link to notification’s Javascript code.
- Publish Javascript code with help of Google Tag Manager.
- Test, test, test.
Cookie consent code
For your convenience, I have created a ready-made Google Tag Manager Cookie Consent Recipe. Just download it, import it to your GTM container and follow the instructions.
If you’re willing to better understand how everything works, continue reading.
Update: Since GDPR (General Data Protection Regulation) changed the way we should be tracking users and getting their consent, this guide became irrelevant. I started using a different cookie consent tool offered by OneTrust. Here is a new step-by-step guide.
For Cookie Consent Javascript code, I chose a free solution offered by Insites (which you have already seen on my website). They offer a user-friendly solution with configuration wizard. You can choose notification’s position, layout, color theme, edit content, etc.
After you finish configuring your cookie consent notice, on the right side of the screen, you’ll see a read-to-use code. It should look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#ebebeb", "text": "#3c3c3c" }, "button": { "background": "#5c5c5c", "text": "#ffffff" } }, "theme": "edgeless", "content": { "message": "This website uses cookies to ensure you get the best experience on our website.", "dismiss": "Got it ", "link": "Learn more", "href": "https://www.analyticsmania.com" } })}); </script> |
If you use my Google Tag Manager Cookie Consent Recipe, then this code is already created as a Custom HTML tag. In that case, do not forget to edit the following parameters in the code:
- background and text colors (to match the style of your brand).
- message (this is the main text of the notification).
- dismiss (title of the main button).
- link (“Privacy Policy” link title).
- href (actual link to your “Privacy Policy” page. I have explained how to create a PP page in the next chapter of this blog post.).
Great! The code is complete. Now, you should take care of Privacy Policy page.
How to create a privacy policy page
In this chapter we’ll need to find a quick solution how we can easily create this page without the help of lawyers whose services are pretty expensive 🙂
My recommendation for you: don’t try to invent the wheel, it’s already been created. Use others’ creations and adapt them to your needs.
There are two quick ways to get a Privacy Policy:
- Use a Privacy Policy Generator.
- Take a look at what well-known players in your industry (or competitors) are using.
Privacy Policy Generator
Here are several alternatives to choose from:
- Getterms.io – generates 2-in-1: Terms of Use and Privacy policy.
- Pros – easy to generate and free.
- Cons – a bit too broad, does not cover various nuances and isn’t personalized.
- Termsfeed – Generates a Privacy Policy, adapted to your business.
- Pros – easy to generate, personalized.
- Cons – isn’t free, price depends on your needs and technologies you use.
- SerpRank Generator (requires a free account) + Freeprivacypolicy.com. For Analytics Mania, I just took these two resources and used their best/most suitable parts.
- Pros – free.
- Cons – requires a bit more effort while editing the content.
“Borrow” ideas from Well Known Websites/Competitors
Several reasons to choose this method:
- Owners of a well-known website (usually) invest in such content. They have probably consulted with lawyers to create it.
- If you find a leader in your industry (or a pretty similar competitor) who has implemented Cookie Consent Notification on their website, that’s even better! They have prepared a ready-made template which should apply to your business as well.
- Well, it’s free. While I am not encouraging you to 100% steal their policy, you can take it as a solid draft and easily edit it + cut unnecessary parts.
I will not explain Privacy Policies in detail, because I am not an expert in this field. If you wish to learn more, here are two resources for a good start – 7 steps to writing a good privacy policy and How do you create a privacy policy without spending a lot of money on lawyers? (Quora).
Set up cookie consent code with Google Tag Manager
For this part you’ll need to complete the following steps:
- Create a trigger – Page view or DOM ready. In my Google Tag Manager Cookie Consent Recipe, I used DOM ready. I tried to utilize the Window Loaded trigger, but it did not work. So save your time and just use one of two aforementioned options.
- Create a Custom HTML tag and paste our modified Cookie Consent Javascript code and link it with DOM Ready trigger.
- Test and publish.
Create a trigger
In your Google Tag Manager account, go to Triggers and create new one with the following settings:
Create a tag
Now, let’s head over to Tags and create a Custom HTML tag which will contaa in code of cookie notification. Its settings should look like this:
cHTML (in the title) stands for Custom HTML. If you wish to learn more about naming conventions in Google Tag Manager, read this awesome blog post by Lunametrics.
If you skipped some chapters of this blog post, make sure you have edited the following settings in the Javascript of cookie consent notification:
- background and text (to match colors of your site).
- message (this is the main text of the notification).
- dismiss (title of the main button).
- link (“Privacy Policy” link title).
- href (actual link to your “Privacy Policy” page).
Time to test
Use Google Tag Manager’s Preview and Debug mode to test whether the notification appears when it’s supposed to. Click “Got It” button in the cookie consent dialog and refresh the page. If it did not reappear, you’re good to go!
If you’re new to GTM, here’s a comprehensive guide to Preview and Debug mode. It’s an essential tool in the tag deployment process, so make sure you fully understand its capabilities.
Google Tag Manager Cookie Consent: Conclusion
If your website visitors are from the European Union or your business/website is located in the EU, you must display a cookie consent notification which informs visitors that you’re using cookies.
In this blog post, I explained how you can easily generate a Javascript code of cookie notification and implement it with help of Google Tag Manager.
I am using that very same solution on analyticsmania.com as well. If you don’t like its style, head over to Cookie Consent by Insites and generate your own code.
For your convenience, I have created a ready made Google Tag Manager Cookie Consent Recipe. Just download it, follow the instructions and publish on your website.
16 COMMENTS