change GA tracking place

Author: eugenebelov

.storybook/main.ts

@@ -15,7 +15,6 @@ const config: StorybookConfig = {
       },
     },
     '@storybook/addon-themes',
-    '@storybook/addon-google-analytics',
   ],
   staticDirs: ['../src/static', '../src/lib/assets/fonts'],
   framework: {

.storybook/manager.ts

@@ -4,6 +4,3 @@ import yourTheme from './theme';
 addons.setConfig({
   theme: yourTheme,
 });
-
-window.STORYBOOK_GA_ID = 'G-H4X1J4017T';
-window.STORYBOOK_REACT_GA_OPTIONS = {};

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
 import type { Preview } from '@storybook/react-vite';
 
@@ -16,11 +16,35 @@ const GlobalStyles = createGlobalStyle`
 const preview: Preview = {
   // tags: ['autodocs'], // turn on when fix some components stories
   decorators: [
-    (Story) => (
-      <ThemeProvider theme={themeConfig}>
-        <Story />
-      </ThemeProvider>
-    ),
+    (Story) => {
+      useEffect(() => {
+        // Google Analytics tracking code
+        const script = document.createElement('script');
+        script.async = true;
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-H4X1J4017T'; // Replace with your GA4 Measurement ID
+        document.head.appendChild(script);
+
+        script.onload = () => {
+          window.dataLayer = window.dataLayer || [];
+          function gtag() {
+            dataLayer.push(arguments);
+          }
+          gtag('js', new Date());
+          gtag('config', 'G-H4X1J4017T'); // Replace with your GA4 Measurement ID
+        };
+
+        return () => {
+          // Optional: Clean up the script if needed
+          document.head.removeChild(script);
+        };
+      }, []);
+
+      return (
+        <ThemeProvider theme={themeConfig}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
     withThemeFromJSXProvider({
       themes: {
         light: themeConfig.light,