feat: integrate react-gtm-module

Yukaii · Yukaii · commit d224536c11ea · 2023-11-29T12:29:01.000+08:00
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-gtm-module": "^2.0.11",
     "sass": "^1.26.11",
     "shorthash": "^0.0.2",
     "simple-react-lightbox": "3.6.6",
diff --git a/pages/_app.js b/pages/_app.js
@@ -3,6 +3,7 @@ import Router from 'next/router'
 import SimpleReactLightbox from 'simple-react-lightbox'
 import { ThemeProvider } from 'next-themes'
 import { appWithTranslation } from 'next-i18next'
+import TagManager from 'react-gtm-module'
 import nextI18NextConfig from '../next-i18next.config'
 
 import Header from 'components/Header'
@@ -22,6 +23,14 @@ Router.events.on(
   (url) => process.env.NODE_ENV === 'production' && pageview(url)
 )
 
+const tagManagerArgs = {
+  gtmId: process.env.NEXT_PUBLIC_GTM_ID,
+}
+
+if (tagManagerArgs.gtmId) {
+  TagManager.initialize(tagManagerArgs)
+}
+
 function MyApp({ Component, pageProps, router }) {
   return (
     <>
diff --git a/pages/_document.js b/pages/_document.js
@@ -4,6 +4,7 @@ import { NEXT_PUBLIC_GA_TRACKING_ID } from 'lib/constants'
 class MyDocument extends Document {
   render() {
     const isProduction = process.env.NODE_ENV === 'production'
+    const isGTMEnabled = process.env.NEXT_PUBLIC_GTM_ID && isProduction
 
     return (
       <Html lang="zh-Hant-TW" data-dark-theme="dark">
@@ -48,8 +49,26 @@ class MyDocument extends Document {
               />
             </t>
           )}
+          {isGTMEnabled && (
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `(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', '${process.env.NEXT_PUBLIC_GTM_ID}');`,
+              }}
+            ></script>
+          )}
         </Head>
         <body>
+          {isGTMEnabled && (
+            <noscript
+              dangerouslySetInnerHTML={{
+                __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+              }}
+            ></noscript>
+          )}
           <Main />
           <NextScript />
         </body>
diff --git a/yarn.lock b/yarn.lock
@@ -3570,6 +3570,11 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-gtm-module@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
+  integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==
+
 react-i18next@^11.16.2:
   version "11.17.2"
   resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.17.2.tgz"
