feat: add google-tag-manager, fixes in auth

.changeset/twelve-moons-sparkle.md

@@ -0,0 +1,6 @@
+---
+'@wayofdev/google-tag-manager': patch
+'web': patch
+---
+
+feat: google-tag-manager support in web application

apps/web/src/pages/_document.tsx

@@ -1,4 +1,5 @@
 import { Analytics } from '@vercel/analytics/react'
+import { GoogleTagManagerNoScript } from '@wayofdev/google-tag-manager/src'
 import type { DocumentContext, DocumentInitialProps } from 'next/document'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { i18n } from '../../next-i18next.config'
@@ -45,6 +46,7 @@ class MyDocument extends Document {
           <NextScript />
         </body>
         <Analytics />
+        <GoogleTagManagerNoScript />
       </Html>
     )
   }

packages/google-tag-manager/src/components/GoogleTagManagerNoScript.tsx

@@ -0,0 +1,16 @@
+import { gtmId } from '../lib/gtm'
+export function GoogleTagManagerNoScript() {
+  return (
+    <>
+      <noscript>
+        {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+    </>
+  )
+}

packages/google-tag-manager/src/components/GoogleTagManagerScript.tsx

@@ -1,18 +1,15 @@
 import { useRouter } from 'next/router'
 import Script from 'next/script'
 import { useEffect } from 'react'
+import { onRouteChangeComplete, gtmId } from '../lib/gtm'
 
+/**
+ * https://github.com/vercel/next.js/blob/canary/examples/with-google-tag-manager
+ */
 export function GoogleTagManagerScript() {
-  const gtmId = process.env.NEXT_PUBLIC_GTM_ID
-
   const router = useRouter()
 
   useEffect(() => {
-    const onRouteChangeComplete = (url: string) => {
-      const dataLayer = (globalThis as unknown as { dataLayer: Record<string, unknown>[] })
-        .dataLayer
-      dataLayer?.push({ event: 'pageview', page: url })
-    }
     router.events.on('routeChangeComplete', onRouteChangeComplete)
     return () => {
       router.events.off('routeChangeComplete', onRouteChangeComplete)
@@ -23,22 +20,13 @@ export function GoogleTagManagerScript() {
 
   return (
     <>
-      <Script id="google-tag-manager" strategy="afterInteractive">{`
+      <Script id="gtag-base" strategy="afterInteractive">{`
       (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>
-      <noscript>
-        {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
-        <iframe
-          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
-          height="0"
-          width="0"
-          style={{ display: 'none', visibility: 'hidden' }}
-        />
-      </noscript>
     </>
   )
 }

packages/google-tag-manager/src/components/index.ts

@@ -1 +1,2 @@
 export * from './GoogleTagManagerScript'
+export * from './GoogleTagManagerNoScript'

packages/google-tag-manager/src/lib/gtm.ts

@@ -0,0 +1,6 @@
+export const gtmId = process.env.NEXT_PUBLIC_GTM_ID
+
+export const onRouteChangeComplete = (url: string) => {
+  const dataLayer = (globalThis as unknown as { dataLayer: Record<string, unknown>[] }).dataLayer
+  dataLayer?.push({ event: 'pageview', page: url })
+}