Add GTM scripts to document.tsx

StreetOfCode · Oct 30, 2023 · 09ad907 · 09ad907
1 parent cd6d8a8
commit 09ad907
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/.env.template b/.env.template
@@ -34,3 +34,4 @@ NEXT_PUBLIC_COURSE_PRODUCT_ID_JAVA_KURZ_PRO="prod_OkklGrYeJgDOg4"
 NEXT_PUBLIC_COURSE_PRODUCT_BUYABLE_UNTIL_JAVA_KURZ="2023-10-21T13:00:00.000Z"
 
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_API_KEY=
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID="GTM-XXX"
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -115,9 +115,28 @@ export default class MyDocument extends Document {
     return (
       <Html>
         <Head>
+          <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_GOOGLE_TAG_MANAGER_ID}');`,
+            }}
+          />
           <link rel="stylesheet" href="https://use.typekit.net/vve8dub.css" />
         </Head>
         <body>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<iframe
+              src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}"
+              height="0" width="0"
+              style="display:none;visibility:hidden"></iframe>`,
+            }}
+          />
           <script dangerouslySetInnerHTML={{__html: codeToRunOnClient}} />
           <Main />
           <NextScript />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,3 +34,4 @@ NEXT_PUBLIC_COURSE_PRODUCT_ID_JAVA_KURZ_PRO="prod_OkklGrYeJgDOg4"
		NEXT_PUBLIC_COURSE_PRODUCT_BUYABLE_UNTIL_JAVA_KURZ="2023-10-21T13:00:00.000Z"

		NEXT_PUBLIC_STRIPE_PUBLISHABLE_API_KEY=
		NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID="GTM-XXX"