Skip to content

Integrating Google Tag Manager with Material & MkdocsΒΆ

https://github.com/squidfunk/mkdocs-material/discussions/5607

  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 -->
  1. 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 %}
  1. Add the following to mkdocs.yml:
extra:
  analytics:
    provider: custom