Google Tag Manager: There is a way to integrate GTM with material-mkdocs

[Marlony-Gabriel]

Hello.
I'm trying to finda a way to integrate the GTM from GA4 in my documentation project.
My problem is that I build the project with gitlab runners directly on the server. And for what I saw, you need to add some code in your html pages to getting it work.
There is a way to do this, without building the project first and adding the code lines, before sent it to my server ?

[squidfunk]

Yes, several users already did that successfully. Please try and use the issue/discussion search, as this was asked before.

[squidfunk]

Thanks for the feedback! Since we've thrown out UA, we're open to PRs to integrate GTM. It shouldn't be too hard to integrate this functionality, but it's currently not a priority, given how many other features we have in our pipeline ☺️

[ooker777]

have you successfully integrated GTM? Can you post your final code?

[rachel-rigdon-sp]

@ooker777 Unfortunately, no. I'm just a tech writer, so I'm having to work with my web team to get the script written. Once we get that sorted, I'll update this post.

If anyone else has resolved it and can share their code, that would be a huge help.

[normandy7]

I'm also a tech writer and by no means frontend-savvy, but we use multiple providers and I got GTM to work like this:

1. Add the following to overrides/partials/integrations/analytics/custom.html:

<!-- Google Tag Manager -->
<script>(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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

2. Add the following to overrides/main.html:

{% extends "base.html" %}

{% block scripts %}
  {{ super() }}
  
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
{% endblock %}

[kevinah95]

I'm also a tech writer and by no means frontend-savvy, but we use multiple providers and I got GTM to work like this:

1. Add the following to overrides/partials/integrations/analytics/custom.html:

<!-- Google Tag Manager -->
<script>(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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

2. Add the following to overrides/main.html:

{% extends "base.html" %}

{% block scripts %}
  {{ super() }}
  
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
{% endblock %}

I'm also a tech writer and by no means frontend-savvy, but we use multiple providers and I got GTM to work like this:

1. Add the following to overrides/partials/integrations/analytics/custom.html:

<!-- Google Tag Manager -->
<script>(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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

2. Add the following to overrides/main.html:

{% extends "base.html" %}

{% block scripts %}
  {{ super() }}
  
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
{% endblock %}

Don't forget to modify mkdocs.yml file:

extra:
  analytics:
    provider: custom

[tomfast]

This was 🥇 . Thanks all this @normandy7 and @kevinah95 !

[oleg-nenashev]

@squidfunk would you be open to a PR that adds the stock implementation to Material for MkDocs? It's kind of a good first issue, but GTM gets trendy

[squidfunk]

Currently no, sorry. The reason is we're working on fundamental changes right now. In the end, integrations like this should be much simpler and should be achievable in a much more modular way. Additionally, this is a prime example of customizations, maybe even via plugins or theme extension.

[vikian050194]

Hello! Probably there is someone else who interested in temp solution till fundamental changes will be released.
There is a bit shorter solution:

1. Just update mkdocs.yml

...
theme:
  name: material
  custom_dir: docs/overrides
...

2. Add docs/overrides/main.html

{% extends "base.html" %}

{% block analytics %}
    <!-- Google Tag Manager -->
    <script>(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','GTM-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->

    {{ super() }}
{% endblock %}

{% block header %}
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    {{ super() }}
{% endblock %}

Thank you, @teners for this solution example