🐛 fix(spa): inject google analytics tag in html template

src/app/spa/[variants]/[[...path]]/route.ts

@@ -155,6 +155,24 @@ function buildAnalyticsConfig(): AnalyticsConfig {
   return config;
 }
 
+function buildAnalyticsScripts(): string {
+  if (!analyticsEnv.ENABLE_GOOGLE_ANALYTICS || !analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID) {
+    return '';
+  }
+
+  const measurementId = serializeForHtml(analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID);
+
+  return [
+    `<script async src="https://www.googletagmanager.com/gtag/js?id=${analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID}"></script>`,
+    `<script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', ${measurementId});
+    </script>`,
+  ].join('\n    ');
+}
+
 function buildClientEnv(): SPAClientEnv {
   return {
     marketBaseUrl: appEnv.MARKET_BASE_URL,
@@ -216,7 +234,7 @@ export async function GET(
 
   const seoMeta = await buildSeoMeta(locale);
   html = html.replace('<!--SEO_META-->', seoMeta);
-  html = html.replace('<!--ANALYTICS_SCRIPTS-->', '');
+  html = html.replace('<!--ANALYTICS_SCRIPTS-->', buildAnalyticsScripts());
 
   return new Response(html, {
     headers: {

src/components/Analytics/Google.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import { memo, useEffect } from 'react';
-
-interface GoogleAnalyticsProps {
-  gaId?: string;
-}
-
-const GoogleAnalytics = memo<GoogleAnalyticsProps>(({ gaId }) => {
-  useEffect(() => {
-    if (!gaId) return;
-
-    const script = document.createElement('script');
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
-    script.async = true;
-    document.head.appendChild(script);
-
-    (window as any).dataLayer = (window as any).dataLayer || [];
-    function gtag(...args: any[]) {
-      (window as any).dataLayer.push(args);
-    }
-    gtag('js', new Date());
-    gtag('config', gaId);
-  }, [gaId]);
-
-  return null;
-});
-
-export default GoogleAnalytics;

src/components/Analytics/index.tsx

@@ -3,7 +3,6 @@ import { analyticsEnv } from '@/envs/analytics';
 import dynamic from '@/libs/next/dynamic';
 
 import Desktop from './Desktop';
-import Google from './Google';
 import Vercel from './Vercel';
 
 const Plausible = dynamic(() => import('./Plausible'));
@@ -17,9 +16,6 @@ const Analytics = () => {
       {analyticsEnv.ENABLE_VERCEL_ANALYTICS && (
         <Vercel debug={analyticsEnv.DEBUG_VERCEL_ANALYTICS} />
       )}
-      {analyticsEnv.ENABLE_GOOGLE_ANALYTICS && (
-        <Google gaId={analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID} />
-      )}
       {analyticsEnv.ENABLED_PLAUSIBLE_ANALYTICS && (
         <Plausible
           domain={analyticsEnv.PLAUSIBLE_DOMAIN}