Merge pull request #1369 from AppQuality/develop

Release 20250630

Author: cannarocks

package.json

@@ -3,13 +3,16 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
+    "@analytics/google-tag-manager": "^0.6.0",
+    "@analytics/segment": "^2.1.0",
     "@appquality/languages": "1.4.3",
     "@appquality/unguess-design-system": "4.0.42",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@sentry/react": "^8.32.0",
     "@zendeskgarden/svg-icons": "^7.2.0",
     "comuni-province-regioni": "^0.4.3",
+    "analytics": "^0.8.16",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
     "i18n-iso-countries": "^7.3.0",
@@ -20,7 +23,6 @@
     "query-string": "^7.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-i18next": "^15.0.2",
     "react-redux": "^7.2.6",
@@ -29,6 +31,7 @@
     "styled-components": "^6.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^4.6.2",
+    "use-analytics": "^1.1.0",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
@@ -79,10 +82,10 @@
     "@types/qs": "^6.9.7",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
-    "@types/react-gtm-module": "^2.0.1",
     "@types/react-helmet": "^6.1.5",
     "@types/react-scroll": "^1.8.10",
     "@types/react-transition-group": "^4.4.5",
+    "@types/use-analytics": "^0.0.3",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",

src/@types/analytics__google-tag-manager/index.d.ts

@@ -0,0 +1,16 @@
+declare module '@analytics/google-tag-manager' {
+  type AnalyticsPlugin = import('analytics').AnalyticsPlugin;
+
+  type GoogleTagManagerConfig = {
+    auth?: string;
+    containerId: string;
+    customScriptSrc?: string;
+    dataLayerName?: string;
+    debug?: boolean;
+    execution?: string;
+    preview?: string;
+  };
+
+  function googleTagManager(config: GoogleTagManagerConfig): AnalyticsPlugin;
+  export default googleTagManager;
+}

src/@types/analytics__segment/index.d.ts

@@ -0,0 +1,20 @@
+declare module '@analytics/segment' {
+  type AnalyticsPlugin = import('analytics').AnalyticsPlugin;
+
+  type SegmentConfig = {
+    /** Your segment write key */
+    writeKey: string;
+    flushAt?: number;
+    /* Segment sdk config options. Docs https://segment.com/docs/connections/sources/catalog/libraries/server/node/#configuration */
+    flushInterval?: number;
+    /** Disable loading segment for anonymous visitors */
+    disableAnonymousTraffic?: boolean;
+    /** Override the Segment snippet url, for loading via custom CDN proxy */
+    customScriptSrc?: boolean;
+    /** Enable/disable segment destinations https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#managing-data-flow-with-the-integrations-object */
+    integrations?: Record<string, boolean>;
+  };
+
+  function segmentPlugin(config: SegmentConfig): AnalyticsPlugin;
+  export default segmentPlugin;
+}

src/analytics.ts

@@ -0,0 +1,24 @@
+import Analytics from 'analytics';
+import googleTagManager from '@analytics/google-tag-manager';
+import segmentPlugin from '@analytics/segment';
+import { isDev } from './common/isDevEnvironment';
+
+const analytics = Analytics({
+  app: 'unguess-react',
+  plugins: [
+    googleTagManager({
+      containerId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
+      ...(isDev() && {
+        auth: 'HjeAxSQB9e685mi-_8YiDw',
+        preview: 'env-4',
+      }),
+    }),
+    segmentPlugin({
+      writeKey: isDev()
+        ? 'AxHbacd31w50NwjDM8tadsP82hSwTz4Z'
+        : 'oxd3W7coKxDdzq99F88doV5VvQrESbJh',
+    }),
+  ],
+});
+
+export default analytics;

src/app/App.tsx

@@ -7,40 +7,44 @@ import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { appTheme } from 'src/app/theme';
+import { AnalyticsProvider } from 'use-analytics';
 import Pages from 'src/common/Pages';
+import analytics from 'src/analytics';
 import '../i18n';
 import { store } from './store';
 
 const App = () => {
   const { t } = useTranslation();
   return (
     <Provider store={store}>
-      <ThemeProvider theme={appTheme}>
-        <GlobalStyle />
-        <Helmet>
-          <meta
-            property="og:title"
-            content={`UNGUESS - ${t('__APP_META_PAYOFF')}`}
-          />
-          <title>UNGUESS - {t('__APP_META_PAYOFF')}</title>
-          <meta name="description" content={t('__APP_META_DESCRIPTION')} />
-        </Helmet>
-        <ToastProvider
-          limit={5}
-          zIndex={500}
-          placementProps={{
-            top: {
-              style: {
-                top:
-                  parseInt(appTheme.components.chrome.header.height, 10) +
-                  appTheme.space.base * 4,
+      <AnalyticsProvider instance={analytics}>
+        <ThemeProvider theme={appTheme}>
+          <GlobalStyle />
+          <Helmet>
+            <meta
+              property="og:title"
+              content={`UNGUESS - ${t('__APP_META_PAYOFF')}`}
+            />
+            <title>UNGUESS - {t('__APP_META_PAYOFF')}</title>
+            <meta name="description" content={t('__APP_META_DESCRIPTION')} />
+          </Helmet>
+          <ToastProvider
+            limit={5}
+            zIndex={500}
+            placementProps={{
+              top: {
+                style: {
+                  top:
+                    parseInt(appTheme.components.chrome.header.height, 10) +
+                    appTheme.space.base * 4,
+                },
               },
-            },
-          }}
-        >
-          <Pages />
-        </ToastProvider>
-      </ThemeProvider>
+            }}
+          >
+            <Pages />
+          </ToastProvider>
+        </ThemeProvider>
+      </AnalyticsProvider>
     </Provider>
   );
 };

src/assets/icons/arrow-trending.svg

@@ -1,25 +1,25 @@
 import React, { useEffect } from 'react';
-import TagManager, { TagManagerArgs } from 'react-gtm-module';
 import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
 import { useAppSelector } from 'src/app/hooks';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
-import { isDev } from './isDevEnvironment';
+import { useAnalytics } from 'use-analytics';
 
-const tagManagerArgs: TagManagerArgs = {
-  gtmId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
-  ...(isDev() && {
-    auth: 'HjeAxSQB9e685mi-_8YiDw',
-    preview: 'env-4',
-  }),
-  events: {
-    unguess_loaded: 'unguess_loaded',
-    workspace_change: 'workspace_change',
-    generic_error: 'generic_error',
-  },
-};
-TagManager.initialize(tagManagerArgs);
+// const tagManagerArgs: TagManagerArgs = {
+//   gtmId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
+//   ...(isDev() && {
+//     auth: 'HjeAxSQB9e685mi-_8YiDw',
+//     preview: 'env-4',
+//   }),
+//   events: {
+//     unguess_loaded: 'unguess_loaded',
+//     workspace_change: 'workspace_change',
+//     generic_error: 'generic_error',
+//   },
+// };
+// TagManager.initialize(tagManagerArgs);
 
-export const GoogleTagManager = ({
+export const Track = ({
   title,
   children,
 }: {
@@ -28,6 +28,12 @@ export const GoogleTagManager = ({
 }) => {
   const { userData } = useAppSelector((state) => state.user);
   const { activeWorkspace } = useActiveWorkspace();
+  const { track, identify, page } = useAnalytics();
+  const location = useLocation();
+
+  useEffect(() => {
+    page();
+  }, [location]);
 
   const helmet = () => (
     <Helmet>
@@ -39,19 +45,24 @@ export const GoogleTagManager = ({
 
   useEffect(() => {
     if (userData?.role && activeWorkspace?.company) {
-      const tagManagerDataLayer = {
+      identify(`profile_${userData.profile_id}`, {
         role: userData.role,
         customer_role: userData.customer_role,
         wp_user_id: userData.tryber_wp_user_id,
         tester_id: userData.profile_id,
         name: userData.name,
         email: userData.email,
         company: activeWorkspace.company,
-        event: 'unguess_loaded',
-      };
+      });
 
-      TagManager.dataLayer({
-        dataLayer: tagManagerDataLayer,
+      track('unguess_loaded', {
+        role: userData.role,
+        customer_role: userData.customer_role,
+        wp_user_id: userData.tryber_wp_user_id,
+        tester_id: userData.profile_id,
+        name: userData.name,
+        email: userData.email,
+        company: activeWorkspace.company,
       });
     }
   }, [userData, activeWorkspace]);

src/assets/icons/gas_module_icon.svg

@@ -10,7 +10,7 @@ import {
 } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as Illustration } from 'src/assets/errorBoundaryPage.svg';
-import { GoogleTagManager } from 'src/common/GoogleTagManager';
+import { Track } from 'src/common/Track';
 import { Logged } from 'src/features/templates/Logged';
 import styled from 'styled-components';
 
@@ -26,7 +26,7 @@ const ErrorBoundaryPage = () => {
   const { t } = useTranslation();
 
   return (
-    <GoogleTagManager title={t('__ERROR_PAGE_TITLE')}>
+    <Track title={t('__ERROR_PAGE_TITLE')}>
       <Logged route="">
         <Container id="error-container" style={{ height: '100%' }}>
           <Grid>
@@ -56,7 +56,7 @@ const ErrorBoundaryPage = () => {
           </Grid>
         </Container>
       </Logged>
-    </GoogleTagManager>
+    </Track>
   );
 };