fix: broken tracking of custom events

Author: lmammino

astro.config.ts

@@ -5,19 +5,13 @@ import sitemap from '@astrojs/sitemap'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig, fontProviders } from 'astro/config'
 import expressiveCode from 'astro-expressive-code'
-import partytown from '@astrojs/partytown'
 import remarkDirective from 'remark-directive' /* Handle ::: directives as nodes */
 import { remarkAdmonitions } from './src/plugins/remark-admonitions' /* Add admonitions */
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://nodejsdesignpatterns.com',
-  integrations: [
-    react(),
-    expressiveCode(),
-    sitemap(),
-    partytown({ config: { forward: ['dataLayer.push'] } }),
-  ],
+  integrations: [react(), expressiveCode(), sitemap()],
   markdown: {
     remarkPlugins: [remarkDirective, remarkAdmonitions],
   },

package.json

@@ -14,7 +14,6 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@astrojs/partytown": "^2.1.4",
     "@astrojs/react": "^4.4.2",
     "@astrojs/sitemap": "^3.7.0",
     "@expressive-code/plugin-collapsible-sections": "^0.41.3",

pnpm-lock.yaml

@@ -249,9 +249,9 @@ const {
     <!-- Google tag (gtag.js) -->
     <script
       is:inline
-      type="text/partytown"
+      async
       src="https://www.googletagmanager.com/gtag/js?id=G-NFE37ZH2W3"></script>
-    <script is:inline type="text/partytown">
+    <script is:inline>
       window.dataLayer = window.dataLayer || []
       function gtag() {
         // eslint-disable-next-line no-undef

src/Layout.astro

@@ -2,18 +2,11 @@
  * Analytics Utility Module for GA4 Event Tracking
  *
  * This module provides type-safe helper functions for sending GA4 events.
- * It handles Partytown's async nature and provides debug mode for development.
+ * It uses the global gtag() function which runs in the main thread.
  *
  * @module analytics
  */
 
-// Type for gtag function (loaded by Google Tag Manager via Partytown)
-type GtagFunction = (
-  command: string,
-  eventNameOrConfig: string,
-  params?: Record<string, unknown>,
-) => void
-
 // ============================================================================
 // Types & Interfaces
 // ============================================================================
@@ -198,36 +191,41 @@ function debugLog<T extends Record<string, unknown>>(
 // Core Tracking Function
 // ============================================================================
 
+// Extend Window interface for gtag
+declare global {
+  interface Window {
+    gtag?: (...args: unknown[]) => void
+  }
+}
+
 /**
- * Safely get the gtag function, handling Partytown's async loading
+ * Get the gtag function from the window object
  */
-function getGtag(): GtagFunction | null {
+function getGtag(): ((...args: unknown[]) => void) | null {
   if (typeof window === 'undefined') return null
-  // gtag is loaded via Partytown, may not be immediately available
-  return (window as unknown as { gtag?: GtagFunction }).gtag ?? null
+  return window.gtag ?? null
 }
 
 /**
  * Generic event tracking function
- * Handles cases where gtag might not be loaded yet (Partytown delay)
+ * Uses the global gtag() function directly for event tracking.
  */
 export function trackEvent<T extends Record<string, unknown>>(
   eventName: string,
   params: T,
 ): void {
   debugLog(eventName, params)
 
-  const gtagFn = getGtag()
-  if (gtagFn) {
-    gtagFn('event', eventName, params)
+  const gtag = getGtag()
+  if (gtag) {
+    gtag('event', eventName, params)
   } else {
-    // If gtag not ready, queue the event for when it becomes available
-    // This is a fallback for slow Partytown initialization
+    // If gtag not ready, queue the event with retry
     let timeoutId: ReturnType<typeof setTimeout> | null = null
     const checkInterval = setInterval(() => {
-      const fn = getGtag()
-      if (fn) {
-        fn('event', eventName, params)
+      const g = getGtag()
+      if (g) {
+        g('event', eventName, params)
         clearInterval(checkInterval)
         if (timeoutId) clearTimeout(timeoutId)
       }