chore: install GTM tag manager, split dev/prod containers

.env.example

@@ -0,0 +1 @@
+VITE_GTM_CONTAINER_ID=GTM-XXXXXXX

.github/workflows/deploy-s3-dev.yml

@@ -42,6 +42,8 @@ jobs:
 
       - name: Build
         run: npm run build
+        env:
+          VITE_GTM_CONTAINER_ID: ${{ secrets.DEV_GTM_CONTAINER_ID }}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4

.github/workflows/deploy-s3-prod.yml

@@ -41,6 +41,8 @@ jobs:
 
       - name: Build
         run: npm run build
+        env:
+          VITE_GTM_CONTAINER_ID: ${{ secrets.GTM_CONTAINER_ID }}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4

src/gtm.ts

@@ -0,0 +1,32 @@
+interface GTMEvent {
+  event: string;
+  [key: string]: unknown;
+}
+
+declare global {
+  interface Window {
+    dataLayer: GTMEvent[];
+  }
+}
+
+export const initGTM = (containerId?: string): void => {
+  if (!containerId) return;
+
+  window.dataLayer = window.dataLayer ?? [];
+  window.dataLayer.push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = `https://www.googletagmanager.com/gtm.js?id=${containerId}`;
+  document.head.insertBefore(script, document.head.firstChild);
+
+  const iframe = document.createElement("iframe");
+  iframe.src = `https://www.googletagmanager.com/ns.html?id=${containerId}`;
+  iframe.height = "0";
+  iframe.width = "0";
+  iframe.style.display = "none";
+  iframe.style.visibility = "hidden";
+  const noscript = document.createElement("noscript");
+  noscript.appendChild(iframe);
+  document.body.insertBefore(noscript, document.body.firstChild);
+};

src/main.tsx

@@ -3,6 +3,9 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import "shepherd.js/dist/css/shepherd.css";
 import App from "./app";
+import { initGTM } from "./gtm";
+
+initGTM(import.meta.env.VITE_GTM_CONTAINER_ID);
 
 ReactDOM.render(
   <React.StrictMode>

src/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_GTM_CONTAINER_ID?: string;
+}