feat: customize URL of Google Tag Manager

docusaurus.config.js

@@ -23,23 +23,14 @@ module.exports = {
   // do not delete the following 'noIndex' line as it is modified for production
   noIndex: true,
   plugins: [
-    //        ["@edno/docusaurus2-graphql-doc-generator",
-    //          {
-    //            schema: "http://localhost:8080/tasklist/graphql",
-    //            rootPath: "./docs/", // docs will be generated under (rootPath/baseURL)
-    //            baseURL: "apis-tools/tasklist-api",
-    //            linkRoot: "/docs/",
-    //            loaders: {
-    //              UrlLoader: "@graphql-tools/url-loader"
-    //            }
-    //          },
-    //        ],
     // This custom Osano plugin must precede the gtm-plugin.
     "./static/plugins/osano",
     [
-      require.resolve("docusaurus-gtm-plugin"),
+      "./static/plugins/gtm",
       {
-        id: "GTM-KQGNSTS", // GTM Container ID
+        containerId: "GTM-KQGNSTS",
+        tagManagerUrl:
+          process.env.TAG_MANAGER_URL || "https://ssgtm.camunda.io",
       },
     ],
     "./static/plugins/bpmn-js",

package.json

@@ -41,7 +41,6 @@
     "@saucelabs/theme-github-codeblock": "^0.2.3",
     "clsx": "^1.2.1",
     "docusaurus": "^1.14.7",
-    "docusaurus-gtm-plugin": "0.0.2",
     "docusaurus-plugin-openapi-docs": "^2.0.4",
     "docusaurus-theme-openapi-docs": "^2.0.4",
     "mixpanel-browser": "^2.47.0",

static/plugins/gtm/index.js

@@ -0,0 +1,35 @@
+// Inspired by https://github.com/LukasGentele/docusaurus-gtm-plugin (the one we were using)
+//   and https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-google-tag-manager
+//   But modified to support a custom URL for the tag manager script.
+
+module.exports = function pluginGoogleTagManager(_context, options) {
+  if (process.env.NODE_ENV !== "production") {
+    return null;
+  }
+
+  const { containerId, tagManagerUrl = "https://www.googletagmanager.com" } =
+    options;
+  return {
+    name: "docusaurus-plugin-google-tag-manager",
+
+    injectHtmlTags() {
+      return {
+        headTags: [
+          `<!-- 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=
+    '${tagManagerUrl}/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','${containerId}');</script>
+    <!-- End Google Tag Manager -->`,
+        ],
+        postBodyTags: [
+          `<!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="${tagManagerUrl}/ns.html?id=${containerId}"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->`,
+        ],
+      };
+    },
+  };
+};