Feat/add gtag (#1652)

* feat: add gtag

* chore: add consent button

* feat: add consent management link

* Update src/theme/Root.js

Co-authored-by: Ben Kremer <ben@walletconnect.com>

* chore: add longer explanation as to why the termly button is rerendered

* chore: update order of termly script

* chore: defer gtm

---------

Co-authored-by: Ben Kremer <ben@walletconnect.com>

docusaurus.config.js

@@ -12,6 +12,51 @@ const projectKey =
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
+  headTags: [
+    {
+      tagName: 'script',
+      attributes: {
+        type: 'text/javascript',
+        src: 'https://app.termly.io/resource-blocker/22740907-ba21-41a3-bbd9-106afc077eab?autoBlock=on'
+      }
+    },
+    {
+      tagName: 'script',
+      attributes: {
+        defer: 'true',
+        type: 'text/javascript',
+        src: 'https://www.googletagmanager.com/gtag/js?id=G-T8KHTQMBG8'
+      }
+    },
+    {
+      tagName: 'script',
+      attributes: {
+        type: 'text/javascript',
+        defer: 'true'
+      },
+      innerHTML: `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-T8KHTQMBG8');
+      `
+    },
+    {
+      tagName: 'script',
+      attributes: {
+        type: 'text/javascript',
+        defer: 'true'
+      },
+      innerHTML: `
+        (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-5557TG59');
+      `
+    }
+  ],
   title: 'WalletConnect Docs',
   tagline: 'WalletConnect is an open protocol to communicate securely between Dapps and Wallets.',
   url: 'https://docs.walletconnect.com/',
@@ -25,7 +70,7 @@ const config = {
   scripts: [
     {
       src: 'https://plausible.io/js/plausible.js',
-      defer: true,
+      defer: 'true',
       'data-domain': 'docs.walletconnect.com'
     }
   ],
@@ -148,6 +193,17 @@ const config = {
               href: 'https://warpcast.com/walletconnect/'
             }
           ]
+        },
+        {
+          title: 'Privacy',
+          items: [
+            {
+              href: '#',
+              id: 'termly-display-preferences',
+              class: 'termly-display-preferences footer__link-item',
+              label: 'Consent Preferences'
+            }
+          ]
         }
       ],
       copyright: `Copyright © ${new Date().getFullYear()} WalletConnect, Inc.`

src/theme/Root.js

@@ -1,6 +1,36 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { DocsSidebarProvider } from '@docusaurus/theme-common/internal'
 
 export default function Root({ children }) {
-  return <DocsSidebarProvider>{children}</DocsSidebarProvider>
+  useEffect(() => {
+    // Need to replace the consent preferences button after render due
+    // to the loading order of docusaurus scripts and footer tags.
+    // The server rendered tags are present before the termly script
+    // finishes loading. Making the tags not trigger the termly modal.
+    setTimeout(() => {
+      const termlyATag = document.createElement('a')
+      termlyATag.href = '#'
+      termlyATag.className = 'termly-display-preferences footer__link-item'
+      termlyATag.innerHTML = 'Consent Preferences'
+      document.getElementById('termly-display-preferences')?.parentElement.append(termlyATag)
+      document.getElementById('termly-display-preferences')?.remove()
+    }, 0)
+  }, [])
+
+  return (
+    <>
+      <noscript>
+        <iframe
+          src="https://www.googletagmanager.com/ns.html?id=GTM-5557TG59"
+          height="0"
+          width="0"
+          style={{
+            display: 'none',
+            visibility: 'hidden'
+          }}
+        ></iframe>
+      </noscript>
+      <DocsSidebarProvider>{children}</DocsSidebarProvider>
+    </>
+  )
 }