Merge pull request #26 from janbaykara/analytics-identification

Identify users to analytics dashboard

Author: LMacPhail

.env

@@ -1,2 +1,4 @@
 REACT_APP_API_ENDPOINT=https://api.futurelabourmps.com/
 REACT_APP_API_COLS=A3:AZ70
+REACT_APP_SUPABASE_URL=
+REACT_APP_SUPABASE_ANON_KEY=

src/App.tsx

@@ -6,7 +6,7 @@ import { useDispatch } from "react-redux";
 import { fetchMPs } from "./data/utils/utils";
 import { DataStatus, MP } from "./data/types";
 import { SET_DATA_ACTION } from "./state/actions";
-import { useAnalytics } from "./analytics";
+import { identifyUser, useAnalytics } from "./analytics";
 import { supabase } from "./supabaseClient";
 import { Session } from "@supabase/supabase-js";
 import { SignUpModal } from "./components/auth/SignUpModal";
@@ -50,6 +50,10 @@ function App() {
     }
   });
 
+  useEffect(() => {
+    identifyUser(session?.user)
+  }, [session, session?.user.id, session?.user.email])
+
   const modalDismissed = localStorage.getItem(MODAL_DISMISSED_KEY) !== "true";
 
   return (

src/analytics.ts

@@ -2,13 +2,20 @@ import posthog from 'posthog-js'
 import "vanilla-cookieconsent/dist/cookieconsent.css";
 import * as CookieConsent from "vanilla-cookieconsent";
 import { useEffect } from 'react';
+import { Session, User } from "@supabase/supabase-js";
+
+// Anonymous ID that posthog sets by default
+let distinct_id: string | null = null;
 
 export async function enablePosthog() {
   if (!process.env.REACT_APP_POSTHOG_API_KEY || !process.env.REACT_APP_POSTHOG_API_URL) {
     return
   }
   posthog.init(process.env.REACT_APP_POSTHOG_API_KEY!, {
-    api_host: process.env.REACT_APP_POSTHOG_API_URL
+    api_host: process.env.REACT_APP_POSTHOG_API_URL,
+    loaded: function(posthog) {
+      distinct_id = posthog.get_distinct_id();
+    }
   })
   posthog.opt_in_capturing()
 }
@@ -29,6 +36,21 @@ export function captureAnalyticsPageView (page: string) {
   posthog.capture('change tab', { page })
 }
 
+export function captureEmail (email: string) {
+  posthog.capture('newsletter signup', { $set: { email } })
+}
+
+export function identifyUser (user?: User | null) {
+  if (!user?.email) return
+  if (distinct_id) {
+    posthog.alias(
+      distinct_id,
+      user.id,
+    )
+  }
+  posthog.setPersonProperties({ email: user.email, phone: user.phone })
+}
+
 export function useAnalytics () {
   useEffect(() => {
     CookieConsent.run({

src/components/auth/Auth.tsx

@@ -2,13 +2,15 @@ import { useState } from "react";
 import { supabase } from "../../supabaseClient";
 import { MODAL_DISMISSED_KEY } from "../../state/store";
 import Link from "../atoms/Link";
+import { captureEmail } from '../../analytics'
 
 export default function Auth() {
   const [loading, setLoading] = useState(false);
   const [email, setEmail] = useState("");
 
   const handleLogin = async (event: { preventDefault: () => void }) => {
     event.preventDefault();
+    captureEmail(email)
 
     localStorage.setItem(MODAL_DISMISSED_KEY, "false");
 
@@ -44,7 +46,9 @@ export default function Auth() {
             id="sign_up_input"
             value={email}
             required={true}
-            onChange={(e) => setEmail(e.target.value)}
+            onChange={(e) => {
+              setEmail(e.target.value)
+            }}
           />
           <button
             className={"btn btn-accent btn-sm block w-24"}