feat(google analytics): add custom ga events

.github/env.develop

@@ -5,5 +5,5 @@ API_URL=https://api.dev.app.astrodao.com
 NEAR_ENV=development
 STATS_API_URL=https://dev.api.astrostats.magicpowered.io
 APP_DOMAIN=dev.app.astrodao.com
-GOOGLE_ANALYTICS_KEY=G-2SWGMFRYJ8
+GOOGLE_ANALYTICS_KEY=G-0Q54E4Q8XL
 NEAR_CONTRACT_NAME=sputnikv2.testnet

astro_2.0/components/ProposalCardRenderer/components/ProposalCard/ProposalCard.tsx

@@ -31,6 +31,7 @@ import { AmountBalanceCard } from 'astro_2.0/features/pages/nestedDaoPagesConten
 
 import { Button } from 'components/button/Button';
 
+import { GA_EVENTS, sendGAEvent } from 'utils/ga';
 import { DAOFormValues } from 'astro_2.0/features/CreateDao/components/types';
 import { DEFAULT_VOTE_GAS } from 'services/sputnik/constants';
 import { gasValidation } from 'astro_2.0/features/CreateProposal/helpers';
@@ -186,6 +187,17 @@ export const ProposalCard: React.FC<ProposalCardProps> = ({
     async (vote: VoteAction, gas?: string | number) => {
       try {
         await nearService?.vote(daoId, proposalId, vote, gas);
+
+        sendGAEvent({
+          name: GA_EVENTS.ACT_PROPOSAL,
+          daoId,
+          accountId,
+          params: {
+            voteAction: vote,
+            proposalId,
+          },
+        });
+
         await router.reload();
       } catch (e) {
         // todo - handle errors

astro_2.0/features/AppMonitoring/AppMonitoring.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import Script from 'next/script';
+import { gtag, gtagScript } from 'constants/googleTagManager';
+import { configService } from 'services/ConfigService';
+import { CookieService } from 'services/CookieService';
+import { ACCOUNT_COOKIE } from 'constants/cookies';
+
+export const AppMonitoring: FC = () => {
+  const { appConfig } = configService.get();
+  const accountId = CookieService.get(ACCOUNT_COOKIE);
+
+  if (appConfig?.GOOGLE_ANALYTICS_KEY) {
+    return (
+      <>
+        <Script
+          strategy="lazyOnload"
+          id="gtag"
+          src={gtag(appConfig.GOOGLE_ANALYTICS_KEY)}
+        />
+
+        <Script strategy="lazyOnload" id="gtagScript">
+          {gtagScript(appConfig.GOOGLE_ANALYTICS_KEY, accountId)}
+        </Script>
+      </>
+    );
+  }
+
+  return null;
+};

astro_2.0/features/AppMonitoring/index.ts

@@ -0,0 +1 @@
+export * from './AppMonitoring';

astro_2.0/features/CreateDao/components/CustomEdit/CustomEdit.tsx

@@ -41,7 +41,7 @@ const CustomEdit: FC<CustomEditProps> = ({ className }) => {
       const mappedArgs = jsonToBase64Str(result);
 
       if (result?.config?.name) {
-        await createDao(result.config.name, null, {
+        await createDao(result.config.name, {
           args: mappedArgs,
           amountToTransfer: newDaoParams.amountToTransfer,
           gas: newDaoParams.gas,

astro_2.0/features/CreateDao/components/hooks.ts

@@ -30,6 +30,7 @@ import {
 } from 'astro_2.0/features/CreateDao/components/helpers';
 import { useStateMachine } from 'little-state-machine';
 import { useWalletContext } from 'context/WalletContext';
+import { GA_EVENTS, sendGAEvent } from 'utils/ga';
 
 type DaoFormStateReturn = {
   options: DaoSettingOption<
@@ -89,8 +90,7 @@ export function useCreateDao(): {
   uploadAssets: (defaultFlag: string) => Promise<string>;
   createDao: (
     daoName: string,
-    data: CreateDaoInput | null,
-    args?: CreateDaoCustomInput
+    data: CreateDaoInput | CreateDaoCustomInput
   ) => Promise<void>;
 } {
   const router = useRouter();
@@ -131,17 +131,18 @@ export function useCreateDao(): {
   );
 
   const createDao = useCallback(
-    async (
-      daoName: string,
-      data: CreateDaoInput | null,
-      args?: CreateDaoCustomInput
-    ) => {
+    async (daoName: string, data: CreateDaoInput | CreateDaoCustomInput) => {
       try {
-        if (data) {
-          await nearService?.createDao(data);
-        } else if (args) {
-          await nearService?.createDao(args);
-        }
+        await nearService?.createDao(data);
+
+        const { nearConfig } = configService.get();
+        const daoId = `${daoName}.${nearConfig?.contractName ?? ''}`;
+
+        sendGAEvent({
+          name: GA_EVENTS.CREATE_DAO,
+          daoId,
+          accountId,
+        });
 
         showNotification({
           type: NOTIFICATION_TYPES.INFO,
@@ -154,9 +155,7 @@ export function useCreateDao(): {
           getInitialValues(accountId, state.assets.defaultFlag)
         );
 
-        const { nearConfig } = configService.get();
-
-        await router.push(`/dao/${daoName}.${nearConfig?.contractName ?? ''}`);
+        await router.push(`/dao/${daoId}`);
       } catch (error) {
         console.warn(error);
 

astro_2.0/features/CreateProposal/CreateProposal.tsx

@@ -28,6 +28,8 @@ import { CustomTokensContext } from 'astro_2.0/features/CustomTokens/CustomToken
 import { getInitialProposalVariant } from 'astro_2.0/features/CreateProposal/createProposalHelpers';
 import { UserPermissions } from 'types/context';
 
+import { GA_EVENTS, sendGAEvent } from 'utils/ga';
+
 import { getFormInitialValues } from 'astro_2.0/features/CreateProposal/helpers/initialValues';
 import { getNewProposalObject } from 'astro_2.0/features/CreateProposal/helpers/newProposalObject';
 import {
@@ -218,6 +220,16 @@ export const CreateProposal: FC<CreateProposalProps> = ({
             return;
           }
 
+          sendGAEvent({
+            name: GA_EVENTS.CREATE_PROPOSAL,
+            daoId: dao.id,
+            accountId,
+            params: {
+              variant: selectedProposalVariant,
+              proposalId: newProposalId,
+            },
+          });
+
           if (onCreate) {
             onCreate(newProposalId);
           }

astro_2.0/features/DaoDashboardHeader/components/hooks.ts

@@ -23,7 +23,8 @@ export function useJoinDao(
     (async () => {
       if (
         !userPermissions.isCanCreateProposals ||
-        daoMembers.includes(accountId)
+        daoMembers.includes(accountId) ||
+        !accountId
       ) {
         return;
       }

constants/googleTagManager.ts

@@ -2,13 +2,19 @@ export const gtag = (key: string): string => {
   return `https://www.googletagmanager.com/gtag/js?id=${key}`;
 };
 
-export const gtagScript = (key: string): string => {
+export const gtagScript = (key: string, accountId: string): string => {
   return `
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
+
     gtag('config', '${key}', {
-    page_path: window.location.pathname,
-  });
+      page_path: window.location.pathname,
+      user_id: '${accountId}',
+    });
+
+    gtag('set', 'user_properties', {
+      account_id: '${accountId}',
+    });
 `;
 };

global.d.ts

@@ -26,6 +26,11 @@ declare global {
     };
     near: SenderWalletInstance;
     APP_CONFIG: Config;
+    gtag: (
+      type: 'event',
+      name: string,
+      params: Record<string, string | number | string[]>
+    ) => void;
   }
 }
 

pages/_app.tsx

@@ -1,15 +1,12 @@
 import React, { FunctionComponent, useEffect } from 'react';
 import Head from 'next/head';
-import Script from 'next/script';
 import { appWithTranslation } from 'next-i18next';
 import type { AppContext, AppProps } from 'next/app';
 import { withLDProvider } from 'launchdarkly-react-client-sdk';
 
 import nextI18NextConfig from 'next-i18next.config';
 import { appConfig as applicationConfig } from 'config';
 
-import { configService } from 'services/ConfigService';
-
 import { ModalProvider } from 'components/modal';
 import { PageLayout } from 'astro_2.0/components/PageLayout';
 import { MobileNav } from 'astro_2.0/components/navigation/MobileNav';
@@ -23,12 +20,11 @@ import 'styles/globals.scss';
 import { useRouter } from 'next/router';
 import { WrappedWalletContext } from 'context/WalletContext';
 import { CookieService } from 'services/CookieService';
-import { gtag, gtagScript } from 'constants/googleTagManager';
 import { DAO_COOKIE, DEFAULT_OPTIONS } from 'constants/cookies';
+import { AppMonitoring } from 'astro_2.0/features/AppMonitoring/AppMonitoring';
 
 function App({ Component, pageProps }: AppProps): JSX.Element | null {
   const router = useRouter();
-  const { appConfig } = configService.get();
 
   useEffect(() => {
     CookieService.set(DAO_COOKIE, router.query.dao, DEFAULT_OPTIONS);
@@ -38,19 +34,7 @@ function App({ Component, pageProps }: AppProps): JSX.Element | null {
 
   return (
     <>
-      {appConfig?.GOOGLE_ANALYTICS_KEY && (
-        <>
-          <Script
-            strategy="lazyOnload"
-            id="gtag"
-            src={gtag(appConfig.GOOGLE_ANALYTICS_KEY)}
-          />
-
-          <Script strategy="lazyOnload" id="gtagScript">
-            {gtagScript(appConfig.GOOGLE_ANALYTICS_KEY)}
-          </Script>
-        </>
-      )}
+      <AppMonitoring />
       <ModalProvider>
         <WrappedWalletContext>
           <SocketProvider>

utils/ga.ts

@@ -0,0 +1,29 @@
+export enum GA_EVENTS {
+  CREATE_PROPOSAL = 'create_proposal',
+  ACT_PROPOSAL = 'act_proposal',
+  CREATE_DAO = 'create_dao',
+}
+
+type CustomGaEvent = {
+  name: GA_EVENTS;
+  accountId?: string;
+  daoId?: string;
+  params?: Record<string, string | number | string[]>;
+};
+
+export function sendGAEvent({
+  name,
+  accountId,
+  daoId,
+  params = {},
+}: CustomGaEvent): void {
+  if (!window || !window.gtag) {
+    return;
+  }
+
+  window.gtag('event', name, {
+    ...params,
+    accountId: accountId ?? 'Not authorized',
+    daoId: daoId ?? 'n/a',
+  });
+}