GTag + Gatsby = <3

.gitignore

@@ -66,4 +66,7 @@ public
 
 .idea
 .vscode
-.DS_Store
+.DS_Store
+
+# Partytown
+static/~partytown

gatsby-browser.tsx

@@ -0,0 +1,14 @@
+export const onRouteUpdate = ({ location }) => {
+  if (process.env.NODE_ENV !== "production") {
+    return null;
+  }
+
+  const pagePath = location
+    ? location.pathname + location.search + location.hash
+    : undefined;
+  setTimeout(() => {
+    if (typeof gtag === "function") {
+      gtag("event", "page_view", { page_path: pagePath });
+    }
+  }, 100);
+};

gatsby-config.ts

@@ -64,6 +64,15 @@ const config: GatsbyConfig = {
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-plugin-google-gtag`,
+      options: {
+        trackingIds: ["G-2XYKVWN08T"],
+        pluginConfig: {
+          head: true,
+        },
+      },
+    },
   ].filter(Boolean) as Array<PluginRef>,
 };
 

gatsby-node.ts

@@ -1,6 +1,12 @@
 import { createPages } from "@lekoarts/gatsby-theme-cara/gatsby-node.mjs";
 import { createRemoteFileNode } from "gatsby-source-filesystem";
 import { GatsbyNode } from "gatsby";
+import path from "path";
+import { copyLibFiles } from "@builder.io/partytown/utils";
+
+export const onPreBuild = async () => {
+  await copyLibFiles(path.join(__dirname, "static", "~partytown"));
+};
 
 export const createResolvers: GatsbyNode["createResolvers"] = ({
   actions,

gatsby-ssr.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { GatsbySSR, withPrefix } from "gatsby";
+import { Partytown } from "@builder.io/partytown/react";
+
+// You might prefer to add these as an env vars
+const ORIGIN = "https://www.googletagmanager.com";
+const GATSBY_GA_MEASUREMENT_ID = "G-2XYKVWN08T";
+
+export const onRenderBody: GatsbySSR["onRenderBody"] = ({
+  setHeadComponents,
+}) => {
+  setHeadComponents([
+    <link
+      key="icons-preload"
+      rel="preload"
+      href={withPrefix(`/icons.svg`)}
+      as="image"
+      type="image/svg+xml"
+    />,
+    ...(process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test"
+      ? [
+          <Partytown key="partytown" forward={["gtag"]} />,
+          <script
+            key="google-analytics"
+            type="text/partytown"
+            src={`${ORIGIN}/gtag/js?id=${GATSBY_GA_MEASUREMENT_ID}`}
+          />,
+          <script
+            key="google-analytics-config"
+            type="text/partytown"
+            dangerouslySetInnerHTML={{
+              __html: `window.dataLayer = window.dataLayer || [];
+                window.gtag = function gtag(){ window.dataLayer.push(arguments);}
+                gtag('js', new Date()); 
+                gtag('config', '${GATSBY_GA_MEASUREMENT_ID}', { send_page_view: false })`,
+            }}
+          />,
+        ]
+      : []),
+  ]);
+};

package.json

@@ -16,8 +16,10 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@builder.io/partytown": "^0.10.2",
     "@lekoarts/gatsby-theme-cara": "^5.1.4",
     "gatsby": "^5.13.3",
+    "gatsby-plugin-google-gtag": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-sharp": "^5.13.1",