Mkdocs-material: Google Tag Manager GTM for cookie consent

[chrieke]

Struggled with adding a cookie consent banner via Google Tag Manager (GTM) injection until a frontend colleague helped. Since I could not find anything about this topic related to mkdocs or mkdocs material I thought I'd open an issue here for others to google. Could maybe be added as a feature if relevant for more people, otherwise feel free to close soon.

HOWTO: Use the mkdocs theme override functionality and create a main.html file with the following javascript code taken from here. The first, custom part of the code ensures that the GTM is not being active when running mkdocs serve locally since this blocks from interacting with the site. Also see this PR and repository as an example for the structure of the overrides.

<!-- Elements added to main will be displayed on all pages -->
{% extends "base.html" %}

{% block libs %}
<!-- Google Tag Manager -->
<script>
var gtmId = 'GTM-YOURGTMCODE;
if (typeof window !== 'undefined' && window.location.href.includes('127.0.0.1')) {
  gtmId = 'GTM-XXX'
}
(function(w,d,s,l,i){
  w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer', gtmId);
</script>
  <!-- End Google Tag Manager -->
{% endblock %}

Description

If this would be added by default I could imagine it being used similarly to the Google Analytics tag in the mkdocs.yml file. Depending on your GTM configuration adds a cookie banner. However probably not relevant for too many users. Don't know much about cookies and was also told that when using Google Analytics anonymized this would not actually be neccessary (was still decided to add it for the future).

Screenshots / Mockups

• [x] ... the documentation does not mention anything about my idea
• [x] ... to my best knowledge, my idea wouldn't break something for other users
• [x] ... there are no open or closed issues that are related to my idea

[squidfunk]

Thanks for providing your solution! We switched from Google Analytics to Tag Manager at some point but reverted due to a huge increase in byte size (GTM + GA vs. GA only). Furthermore, I wonder how this complies with GDPR, as a third-party service is used to serve the cookie consent. I'll revisit this topic as soon as possible!

Are you using the Osana service, or how did you implement Cookie Consent?

[Arnaud-UP42]

Hello @squidfunk - so far the load from GTM is not too heavy. We are hand-picking which tags are injected in the mkdocs by adding either an exception or a trigger based on the hostname. That way the GTM container injects very few tags in the mkdocs. These scripts are quite light - I am surprised that you had a noticeable increase in byte size.

We are using a third party to manage the cookie consent (in our case, this is powered by One Trust). There is indeed a catch: the cookie consent banner needs to drop a cookie to check if the users accepted the cookie or not - this is paradoxical but inevitable. Also, using a third party sounds counter-intuitive as well. However, to our knowledge, this is justified as a legitimate interest in providing a functional and legally certain service.

[squidfunk]

Is there some open source solution that doesn't need a third-party service? Or is the third-party service mandatory due to the way this must be handled?

[Arnaud-UP42]

I do not know an ready-to-use open-source solution for this, unfortunately. However, a third-party service is absolutely not necessary. You could definitely build this in-house. This would all come down to designing a banner and a front-end script that allows the GTM container to load or not.

The way the one-trust banner works is that it stores the consent information in an event variable. Each type of cookie is named with a code (C1,C2,C3,C4...). If the user picks all or one of them, the code is stored in the event variable "cookie consent". From there, tags are fired in GTM depending on what is in the variable (eg: if OneTrust's variable "cookie consent" contains "C1" then trigger Google Analytics Snippet tag). I'm pretty sure it is easy to reproduce. We didn't have the time to set it up on our side though, and found this tool a faster solution, especially given the price.

But, once again, no need for a third party here. I would say that an open-source or a in-house solution is even better.

[squidfunk]

Thanks for clearing things up. I'd just have thought that you'd save the cookie consent in local storage and run any tracking based on whether the user has accepted cookies or not. However, there may be a thousand possible combinations of cookies, so a third-party solution might be easier to integrate and configure, as tailoring would be done by the third-party.

[Arnaud-UP42]

Indeed - that is a bit how we've started the discussion here:

• having a "yes/no" cookie banner is quite simple and can be done internally. It would fire or not all cookies.
• having a "yes/no/not-given" cookie banner was a bit harder to develop. This was for the case where we wouldn't block navigation and allow users to be on the website without having said explicitly yes or no.
• having a "pick your cookie" was very hard to develop. The combination of cookies and the categorization of them is much more work.

Far from being impossible though - the script provided by the third party doesn't seem to be something extremely advanced.

[squidfunk]

Thank you all for the input on this topic. I'm still wondering whether there's any value in providing a completely self-contained solution for this, i.e. asking the user, setting a value in local storage, and firing an event when the value in local storage allows for tracking. What we could do is provide a simple yes/no solution for Google Analytics. Anything else would require some customizations, obviously, as there are too many potential services to integrate. So wrapping this in a template block could work.