add tracking of events

- creation of a quest chain - failed creation of a quest chain - error page
quest-chains · Dec 9, 2022 · 5885f7a · 5885f7a
1 parent 6839b47
commit 5885f7a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,10 +1,14 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
+import { TrackEvent } from '@/utils/plausibleHelpers';
+
 export const NotFoundPage: React.FC = () => {
   const { push } = useRouter();
   useEffect(() => {
     push('/');
+    // @ts-ignore
+    window.plausible(TrackEvent.Error);
   }, [push]);
   return null;
 };

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -9,6 +9,26 @@ import Document, {
 } from 'next/document';
 
 import { theme } from '../utils/theme';
+
+export enum TrackEvent {
+  Signup = 'Signup',
+  Error = '404',
+  ChainCreated = 'Chain created',
+}
+
+type PlausibleArgs = [TrackEvent, () => void] | [TrackEvent];
+
+declare global {
+  const plausible: {
+    (...args: PlausibleArgs): void;
+    q?: PlausibleArgs[];
+  };
+
+  interface Window {
+    plausible?: typeof plausible;
+  }
+}
+
 class TSDocument extends Document {
   static async getInitialProps(
     ctx: DocumentContext,
@@ -33,6 +53,12 @@ class TSDocument extends Document {
             href="/logo.svg"
           />
           <link rel="manifest" href="/manifest.json" />
+          <script
+            dangerouslySetInnerHTML={{
+              __html:
+                'window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }',
+            }}
+          />
         </Head>
         <body
           style={{

diff --git a/pages/create.tsx b/pages/create.tsx
@@ -35,6 +35,7 @@ import { QUESTCHAINS_URL, SUPPORTED_NETWORKS } from '@/utils/constants';
 import { awaitQuestChainAddress, waitUntilBlock } from '@/utils/graphHelpers';
 import { handleError, handleTxLoading } from '@/utils/helpers';
 import { Metadata, uploadMetadata } from '@/utils/metadata';
+import { TrackEvent } from '@/utils/plausibleHelpers';
 import { ipfsUriToHttp } from '@/utils/uriHelpers';
 import { isSupportedNetwork, useWallet } from '@/web3';
 
@@ -219,9 +220,13 @@ const Create: React.FC = () => {
         onOpen();
 
         const chainAddress = await awaitQuestChainAddress(receipt);
+        // @ts-ignore
+        window.plausible(TrackEvent.ChainCreated);
         setChainAddress(chainAddress);
         toast.dismiss(tid);
       } catch (error) {
+        // @ts-ignore
+        window.plausible(TrackEvent.ChainCreateFailed);
         toast.dismiss(tid);
         handleError(error);
       }

diff --git a/utils/plausibleHelpers.ts b/utils/plausibleHelpers.ts
@@ -0,0 +1,6 @@
+export enum TrackEvent {
+  Signup = 'Signup',
+  Error = '404',
+  ChainCreated = 'Chain created',
+  ChainCreateFailed = 'Chain create failed',
+}