Install Google Tag Manager

components/Script.tsx

@@ -0,0 +1,57 @@
+/** Reversed engineerd from next/script
+ * https://github.com/vercel/next.js/blob/9f1d5d7fca55f909a3c1b60b1996e6c2124702a5/packages/next/client/script.tsx#L31
+ */
+
+import { ScriptHTMLAttributes, useEffect } from "react";
+import { requestIdleCallback } from "./request-idle-callback";
+
+const loadScript = (props: ScriptHTMLAttributes<HTMLScriptElement>): void => {
+  const { dangerouslySetInnerHTML } = props;
+
+  const el = document.createElement("script");
+
+  if (dangerouslySetInnerHTML) {
+    el.innerHTML = dangerouslySetInnerHTML.__html || "";
+  }
+
+  document.body.appendChild(el);
+};
+
+type RequestIdleCallbackHandle = any;
+type RequestIdleCallbackOptions = {
+  timeout: number;
+};
+type RequestIdleCallbackDeadline = {
+  readonly didTimeout: boolean;
+  timeRemaining: () => number;
+};
+
+declare global {
+  interface Window {
+    requestIdleCallback: (
+      callback: (deadline: RequestIdleCallbackDeadline) => void,
+      opts?: RequestIdleCallbackOptions
+    ) => RequestIdleCallbackHandle;
+    cancelIdleCallback: (handle: RequestIdleCallbackHandle) => void;
+  }
+}
+
+function loadLazyScript(props: ScriptHTMLAttributes<HTMLScriptElement>) {
+  if (document.readyState === "complete") {
+    requestIdleCallback(() => loadScript(props));
+  } else {
+    window.addEventListener("load", () => {
+      requestIdleCallback(() => loadScript(props));
+    });
+  }
+}
+
+export function Script(
+  props: ScriptHTMLAttributes<HTMLScriptElement>
+): JSX.Element | null {
+  useEffect(() => {
+    loadLazyScript(props);
+  }, [props]);
+
+  return null;
+}

components/request-idle-callback.ts

@@ -0,0 +1,42 @@
+/** From https://github.com/vercel/next.js/blob/0af3b526408bae26d6b3f8cab75c4229998bf7cb/packages/next/client/request-idle-callback.ts */
+
+type RequestIdleCallbackHandle = any;
+type RequestIdleCallbackOptions = {
+  timeout: number;
+};
+type RequestIdleCallbackDeadline = {
+  readonly didTimeout: boolean;
+  timeRemaining: () => number;
+};
+
+declare global {
+  interface Window {
+    requestIdleCallback: (
+      callback: (deadline: RequestIdleCallbackDeadline) => void,
+      opts?: RequestIdleCallbackOptions
+    ) => RequestIdleCallbackHandle;
+    cancelIdleCallback: (id: RequestIdleCallbackHandle) => void;
+  }
+}
+
+export const requestIdleCallback =
+  (typeof self !== "undefined" && self.requestIdleCallback) ||
+  function (
+    cb: (deadline: RequestIdleCallbackDeadline) => void
+  ): NodeJS.Timeout {
+    let start = Date.now();
+    return setTimeout(function () {
+      cb({
+        didTimeout: false,
+        timeRemaining: function () {
+          return Math.max(0, 50 - (Date.now() - start));
+        },
+      });
+    }, 1);
+  };
+
+export const cancelIdleCallback =
+  (typeof self !== "undefined" && self.cancelIdleCallback) ||
+  function (id: RequestIdleCallbackHandle) {
+    return clearTimeout(id);
+  };

pages/index.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { Script } from "../components/Script";
 
 type Props = {
   html: string;
@@ -45,6 +46,23 @@ export default function Home(props: Props) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <style dangerouslySetInnerHTML={{ __html: props.css }} />
       </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','GTM-5X4ZPBX');`,
+        }}
+      />
+      <noscript>
+        <iframe
+          src="https://www.googletagmanager.com/ns.html?id=GTM-5X4ZPBX"
+          height="0"
+          width="0"
+          style={{ display: "none", visibility: "hidden" }}
+        ></iframe>
+      </noscript>
       <main>
         <header>
           <h1>