chore(console): cleanup analytics

apps/console/src/app/app.tsx

@@ -1,5 +1,4 @@
 import { Route, Routes, Navigate, Outlet } from "react-router-dom";
-import { hotjar } from "react-hotjar";
 import "./styles.css";
 import "./antd-overrides.css";
 import "./tailwind-overrides.css";
@@ -20,7 +19,6 @@ import { LayoutWrapper } from "./components/layout/LayoutWrapper";
 import { OnboardingPage } from "./pages/organizations/onboarding";
 import { AuthProvider } from "./lib/providers/AuthProvider";
 import { OptionalIntercomProvider } from "./lib/providers/OptionalIntercomProvider";
-import { HOTJAR_SITE_ID, HOTJAR_VERSION } from "../env";
 import { OrgPage } from "./pages/organizations/OrgPage";
 import { AcceptInvitationPage } from "./pages/invitations/AcceptInvitationPage";
 import { LogoutPage } from "./pages/auth/LogoutPage";
@@ -32,10 +30,6 @@ import { RequiredProviderApiKeyModalProvider } from "./lib/providers/RequiredPro
 
 initSuperTokens();
 
-if (HOTJAR_SITE_ID && HOTJAR_VERSION) {
-  hotjar.initialize(Number(HOTJAR_SITE_ID), Number(HOTJAR_VERSION));
-}
-
 // We need to define the paths this way for the
 // breadcrumbs to work properly (useBreadcrumbItems)
 export const paths = {

apps/console/src/app/lib/hooks/useCurrentOrganization.tsx

@@ -52,6 +52,7 @@ export const useCurrentOrganization = ({
 
   return {
     organization: data?.organization,
+    organizationId: data?.organization?.id,
     isLoading,
     currentOrgId,
     selectOrg,

apps/console/src/app/lib/providers/AuthProvider.tsx

@@ -5,8 +5,6 @@ import { createContext, useContext, useEffect, useMemo } from "react";
 import { useGetCurrentUser } from "../../graphql/hooks/queries";
 import { GetMeQuery } from "../../../@generated/graphql/graphql";
 import { LayoutWrapper } from "../../components/layout/LayoutWrapper";
-import { Loading3QuartersOutlined } from "@ant-design/icons";
-import { colors } from "../theme/colors";
 import { Loader } from "../../components/common/Loader";
 import { useIdentify } from "../utils/analytics";
 

apps/console/src/app/lib/utils/analytics.ts

@@ -1,42 +1,68 @@
 import React from "react";
 import Analytics from "analytics";
-import segmentPlugin from "@analytics/segment";
+import segment from "@analytics/segment";
 import { GetMeQuery } from "../../../@generated/graphql/graphql";
-import { SEGMENT_WRITE_KEY } from "../../../env";
+import googleTagManager from "@analytics/google-tag-manager";
+import { SEGMENT_WRITE_KEY, GTM_TAG_ID } from "../../../env";
 import { AnalyticsEvent } from "./events.types";
+import { useCurrentProject } from "../hooks/useCurrentProject";
+import { useCurrentOrganization } from "../hooks/useCurrentOrganization";
 
-const shouldTrack = !!SEGMENT_WRITE_KEY;
+const getAnalyticsPlugins = () => {
+  const plugins = [];
+
+  // Segment
+  if (SEGMENT_WRITE_KEY) {
+    plugins.push(
+      segment({
+        writeKey: SEGMENT_WRITE_KEY,
+      })
+    );
+  }
+
+  // GTM
+  if (GTM_TAG_ID) {
+    plugins.push(
+      googleTagManager({
+        containerId: GTM_TAG_ID,
+      })
+    );
+  }
+
+  return plugins;
+};
 
 const analytics = Analytics({
   app: "pezzo-console",
-  plugins: shouldTrack
-    ? [
-        segmentPlugin({
-          writeKey: SEGMENT_WRITE_KEY,
-        }),
-      ]
-    : [],
+  plugins: getAnalyticsPlugins(),
 });
 
 // Can be handled on backend
 export const useIdentify = (user: GetMeQuery["me"]) => {
+  const { projectId } = useCurrentProject();
+  const { organizationId } = useCurrentOrganization();
+
   React.useEffect(() => {
     if (!user) return;
     const segmentUserId = JSON.parse(localStorage.getItem("ajs_user_id"));
     if (segmentUserId === user.id) return;
-    const groupId = JSON.parse(localStorage.getItem("currentOrgId"));
 
     const identifyRequest = {
+      userId: user.id,
       name: user.name,
       email: user.email,
-      avatar: user.photoUrl,
-      groupId,
+      organizationId,
+      projectId,
     };
 
-    analytics.identify(user.id, identifyRequest);
     // unsafe support for segment group in analytics lib
-    (analytics.plugins as any).segment?.group(groupId, {});
-  }, [user]);
+    (analytics.plugins as any).segment?.group(organizationId, {});
+
+    const window = (global as any).window;
+
+    // GTM data layer
+    window.dataLayer.push({ ...identifyRequest });
+  }, [user, organizationId, projectId]);
 };
 
 export interface ContextProps {

apps/console/src/env.ts

@@ -6,8 +6,6 @@ export const BASE_API_URL = getEnvVariable("NX_BASE_API_URL");
 export const AUTH_GITHUB_ENABLED = getEnvVariable("NX_AUTH_GITHUB_ENABLED");
 export const AUTH_GOOGLE_ENABLED = getEnvVariable("NX_AUTH_GOOGLE_ENABLED");
 export const INTERCOM_APP_ID = getEnvVariable("NX_INTERCOM_APP_ID");
-export const HOTJAR_SITE_ID = getEnvVariable("NX_HOTJAR_SITE_ID");
-export const HOTJAR_VERSION = getEnvVariable("NX_HOTJAR_VERSION");
 export const SUPERTOKENS_API_DOMAIN = getEnvVariable(
   "NX_SUPERTOKENS_API_DOMAIN"
 );
@@ -16,3 +14,4 @@ export const SUPERTOKENS_WEBSITE_DOMAIN = getEnvVariable(
 );
 export const SENTRY_DSN_URL = getEnvVariable("NX_SENTRY_DSN_URL");
 export const SEGMENT_WRITE_KEY = getEnvVariable("NX_SEGMENT_WRITE_KEY");
+export const GTM_TAG_ID = getEnvVariable("NX_GTM_TAG_ID");

package.json

@@ -11,6 +11,7 @@
   },
   "nx": {},
   "dependencies": {
+    "@analytics/google-tag-manager": "^0.5.5",
     "@analytics/segment": "^1.1.4",
     "@ant-design/icons": "^5.0.1",
     "@ant-design/icons-svg": "^4.2.1",
@@ -25,7 +26,6 @@
     "@emotion/styled": "11.11.0",
     "@heroicons/react": "^2.0.17",
     "@hookform/resolvers": "^3.3.1",
-    "@hotjar/browser": "^1.0.7",
     "@monaco-editor/react": "^4.5.1",
     "@nestjs/apollo": "^11.0.6",
     "@nestjs/common": "^9.0.0",
@@ -87,7 +87,6 @@
     "react-countup": "^6.4.2",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.0",
-    "react-hotjar": "^6.1.0",
     "react-router-dom": "6.11.2",
     "react-use-intercom": "^5.1.4",
     "recharts": "^2.5.0",