feat(analytics): add Google Tag Manager support via CMS settings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/(frontend)/layout.tsx

@@ -6,6 +6,7 @@ import { Header } from '@/components/layout/Header'
 import { Footer } from '@/components/layout/Footer'
 import { CookieBanner } from '@/components/ui/CookieBanner'
 import { GoogleAnalytics } from '@/components/analytics/GoogleAnalytics'
+import { GoogleTagManager } from '@/components/analytics/GoogleTagManager'
 import { BinotelWidget } from '@/components/analytics/BinotelWidget'
 import { getSiteSettings } from '@/lib/getSiteSettings'
 import { CartProvider } from '@/context/CartContext'
@@ -51,6 +52,7 @@ export default async function FrontendLayout({ children }: { children: React.Rea
     <div
       className={`${montserrat.variable} ${inter.variable} ${poppins.variable} bg-background text-foreground flex min-h-screen flex-col`}
     >
+      {settings.gtmId && <GoogleTagManager gtmId={settings.gtmId} />}
       {settings.ga4Id && <GoogleAnalytics measurementId={settings.ga4Id} />}
       {settings.binotelId && <BinotelWidget widgetId={settings.binotelId} />}
       <CartProvider>

src/components/analytics/GoogleTagManager.tsx

@@ -0,0 +1,20 @@
+import Script from 'next/script'
+
+export function GoogleTagManager({ gtmId }: { gtmId: string }) {
+  if (!gtmId) return null
+  return (
+    <>
+      <Script id="gtm-script" strategy="afterInteractive">
+        {`(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','${gtmId}');`}
+      </Script>
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+    </>
+  )
+}

src/globals/SiteSettings.ts

@@ -9,6 +9,7 @@ export const SiteSettings: GlobalConfig = {
   access: { read: () => true, update: isAdminOrEditor },
   hooks: { afterChange: [revalidateGlobalAfterChange] },
   fields: [
+    { name: 'gtmId', type: 'text', label: 'Google Tag Manager Container ID (GTM-XXXXXXX)' },
     { name: 'ga4Id', type: 'text', label: 'Google Analytics 4 Measurement ID' },
     { name: 'binotelId', type: 'text', label: 'Binotel Widget ID' },
     { name: 'telegramChatId', type: 'text', label: 'Telegram Chat ID' },

src/lib/getSiteSettings.ts

@@ -3,6 +3,7 @@ import { getPayload } from 'payload'
 import configPromise from '@payload-config'
 
 export interface SiteSettingsData {
+  gtmId?: string | null
   ga4Id?: string | null
   binotelId?: string | null
   defaultMetaTitle?: string | null