Update analytics (#432)

src/components/create-poll.tsx

@@ -2,7 +2,7 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
+import posthog from "posthog-js";
 import React from "react";
 import { useSessionStorage } from "react-use";
 
@@ -92,16 +92,12 @@ const Page: NextPage<CreatePollPageProps> = ({
 
   const [isRedirecting, setIsRedirecting] = React.useState(false);
 
-  const plausible = usePlausible();
-
   const createPoll = trpc.useMutation(["polls.create"], {
     onSuccess: (res) => {
       setIsRedirecting(true);
-      plausible("Created poll", {
-        props: {
-          numberOfOptions: formData.options?.options?.length,
-          optionsView: formData?.options?.view,
-        },
+      posthog.capture("created poll", {
+        numberOfOptions: formData.options?.options?.length,
+        optionsView: formData?.options?.view,
       });
       setPersistedFormData(initialNewEventData);
       router.replace(`/admin/${res.urlId}?sharing=true`);

src/components/discussion/discussion.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
+import posthog from "posthog-js";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -39,18 +39,16 @@ const Discussion: React.VoidFunctionComponent = () => {
     },
   );
 
-  const plausible = usePlausible();
-
   const addComment = trpc.useMutation("polls.comments.add", {
     onSuccess: (newComment) => {
-      session.refresh();
+      posthog.capture("created comment");
+
       queryClient.setQueryData(
         ["polls.comments.list", { pollId }],
         (existingComments = []) => {
           return [...existingComments, newComment];
         },
       );
-      plausible("Created comment");
     },
   });
 
@@ -64,7 +62,7 @@ const Discussion: React.VoidFunctionComponent = () => {
       );
     },
     onSuccess: () => {
-      plausible("Deleted comment");
+      posthog.capture("deleted comment");
     },
   });
 

src/components/dropdown.tsx

@@ -83,13 +83,20 @@ const Dropdown: React.VoidFunctionComponent<DropdownProps> = ({
   );
 };
 
-const AnchorLink: React.VoidFunctionComponent<{
-  href?: string;
-  children?: React.ReactNode;
-  className?: string;
-}> = ({ href = "", className, children, ...forwardProps }) => {
+const AnchorLink = React.forwardRef<
+  HTMLAnchorElement,
+  {
+    href?: string;
+    children?: React.ReactNode;
+    className?: string;
+  }
+>(function AnchorLink(
+  { href = "", className, children, ...forwardProps },
+  ref,
+) {
   return (
     <Link
+      ref={ref}
       href={href}
       passHref
       className={clsx(
@@ -101,7 +108,7 @@ const AnchorLink: React.VoidFunctionComponent<{
       {children}
     </Link>
   );
-};
+});
 
 export const DropdownItem: React.VoidFunctionComponent<{
   icon?: React.ComponentType<{ className?: string }>;

src/components/forms/poll-options-form/month-calendar/month-calendar.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
 import * as React from "react";
 
 import {
@@ -40,8 +39,6 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
   const { t } = useTranslation("app");
   const isTimedEvent = options.some((option) => option.type === "timeSlot");
 
-  const plausible = usePlausible();
-
   const optionsByDay = React.useMemo(() => {
     const res: Record<
       string,
@@ -355,7 +352,6 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                               disabled={datepicker.selection.length < 2}
                               label={t("applyToAllDates")}
                               onClick={() => {
-                                plausible("Applied options to all dates");
                                 const times = optionsForDay.map(
                                   ({ option }) => {
                                     if (option.type === "date") {

src/components/login-form.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
+import posthog from "posthog-js";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 
@@ -18,7 +18,6 @@ const LoginForm: React.VoidFunctionComponent = () => {
 
   const login = trpc.useMutation(["login"]);
 
-  const plausible = usePlausible();
   const router = useRouter();
   return (
     <div className="flex">
@@ -32,7 +31,7 @@ const LoginForm: React.VoidFunctionComponent = () => {
         {!formState.isSubmitSuccessful ? (
           <form
             onSubmit={handleSubmit(async ({ email }) => {
-              plausible("Login requested");
+              posthog.capture("login requested", { email });
               await login.mutateAsync({ email, path: router.asPath });
             })}
           >

src/components/poll.tsx

@@ -3,7 +3,7 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
+import posthog from "posthog-js";
 import React from "react";
 import toast from "react-hot-toast";
 import { useMount } from "react-use";
@@ -43,7 +43,6 @@ const PollPage: NextPage = () => {
   const session = useUser();
 
   const queryClient = trpc.useContext();
-  const plausible = usePlausible();
 
   const { mutate: updatePollMutation } = useUpdatePollMutation();
 
@@ -55,7 +54,7 @@ const PollPage: NextPage = () => {
         verified: true,
       });
       session.refresh();
-      plausible("Verified email");
+      posthog.capture("verified email");
     },
     onError: () => {
       toast.error(t("linkHasExpired"));
@@ -81,7 +80,7 @@ const PollPage: NextPage = () => {
         {
           onSuccess: () => {
             toast.success(t("notificationsDisabled"));
-            plausible("Unsubscribed from notifications");
+            posthog.capture("unsubscribed from notifications");
           },
         },
       );
@@ -89,7 +88,7 @@ const PollPage: NextPage = () => {
         shallow: true,
       });
     }
-  }, [plausible, urlId, router, updatePollMutation, t]);
+  }, [urlId, router, updatePollMutation, t]);
 
   const checkIfWideScreen = () => window.innerWidth > 640;
 

src/components/poll/manage-poll/delete-poll-form.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { Trans, useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
+import posthog from "posthog-js";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 
@@ -19,13 +19,11 @@ export const DeletePollForm: React.VoidFunctionComponent<{
   const { register, handleSubmit, formState, watch } =
     useForm<{ confirmation: string }>();
 
-  const plausible = usePlausible();
-
   const confirmationText = watch("confirmation");
   const canDelete = confirmationText === confirmText;
   const deletePoll = trpc.useMutation("polls.delete", {
     onSuccess: () => {
-      plausible("Deleted poll");
+      posthog.capture("deleted poll");
     },
   });
 

src/components/poll/mutations.ts

@@ -1,8 +1,7 @@
-import { usePlausible } from "next-plausible";
+import posthog from "posthog-js";
 
 import { trpc } from "../../utils/trpc";
 import { usePoll } from "../poll-context";
-import { useUser } from "../user-provider";
 import { ParticipantForm } from "./types";
 
 export const normalizeVotes = (
@@ -17,12 +16,12 @@ export const normalizeVotes = (
 
 export const useAddParticipantMutation = () => {
   const queryClient = trpc.useContext();
-  const session = useUser();
-  const plausible = usePlausible();
 
   return trpc.useMutation(["polls.participants.add"], {
     onSuccess: (participant) => {
-      plausible("Add participant");
+      posthog.capture("add participant", {
+        name: participant.name,
+      });
       queryClient.setQueryData(
         ["polls.participants.list", { pollId: participant.pollId }],
         (existingParticipants = []) => {
@@ -33,17 +32,17 @@ export const useAddParticipantMutation = () => {
         "polls.participants.list",
         { pollId: participant.pollId },
       ]);
-      session.refresh();
     },
   });
 };
 
 export const useUpdateParticipantMutation = () => {
   const queryClient = trpc.useContext();
-  const plausible = usePlausible();
   return trpc.useMutation("polls.participants.update", {
     onSuccess: (participant) => {
-      plausible("Update participant");
+      posthog.capture("update participant", {
+        name: participant.name,
+      });
       queryClient.setQueryData(
         ["polls.participants.list", { pollId: participant.pollId }],
         (existingParticipants = []) => {
@@ -66,7 +65,6 @@ export const useUpdateParticipantMutation = () => {
 
 export const useDeleteParticipantMutation = () => {
   const queryClient = trpc.useContext();
-  const plausible = usePlausible();
   return trpc.useMutation("polls.participants.delete", {
     onMutate: ({ participantId, pollId }) => {
       queryClient.setQueryData(
@@ -76,20 +74,23 @@ export const useDeleteParticipantMutation = () => {
         },
       );
     },
-    onSuccess: () => {
-      plausible("Remove participant");
+    onSuccess: (_, { participantId }) => {
+      posthog.capture("remove participant", {
+        participantId,
+      });
     },
   });
 };
 
 export const useUpdatePollMutation = () => {
   const { urlId, admin } = usePoll();
-  const plausible = usePlausible();
   const queryClient = trpc.useContext();
   return trpc.useMutation(["polls.update"], {
     onSuccess: (data) => {
       queryClient.setQueryData(["polls.get", { urlId, admin }], data);
-      plausible("Updated poll");
+      posthog.capture("updated poll", {
+        id: data.id,
+      });
     },
   });
 };

src/components/poll/notifications-toggle.tsx

@@ -1,5 +1,4 @@
 import { Trans, useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
 import * as React from "react";
 
 import { Button } from "@/components/button";
@@ -18,7 +17,6 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
 
   const { mutate: updatePollMutation } = useUpdatePollMutation();
 
-  const plausible = usePlausible();
   return (
     <Tooltip
       content={
@@ -63,12 +61,7 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
               notifications: !poll.notifications,
             },
             {
-              onSuccess: ({ notifications }) => {
-                plausible(
-                  notifications
-                    ? "Turned notifications on"
-                    : "Turned notifications off",
-                );
+              onSuccess: () => {
                 setIsUpdatingNotifications(false);
               },
             },

src/components/preferences.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import { usePlausible } from "next-plausible";
 import React from "react";
 
 import { useDayjs } from "../utils/dayjs";
@@ -14,7 +13,6 @@ const Preferences: React.VoidFunctionComponent = () => {
     useDayjs();
   const router = useRouter();
 
-  const plausible = usePlausible();
   return (
     <div>
       <div className="mb-4 space-y-2">
@@ -36,11 +34,6 @@ const Preferences: React.VoidFunctionComponent = () => {
                 })}
                 onClick={() => {
                   setWeekStartsOn("monday");
-                  plausible("Change week start", {
-                    props: {
-                      timeFormat: "monday",
-                    },
-                  });
                 }}
                 type="button"
               >
@@ -52,11 +45,6 @@ const Preferences: React.VoidFunctionComponent = () => {
                 })}
                 onClick={() => {
                   setWeekStartsOn("sunday");
-                  plausible("Change week start", {
-                    props: {
-                      timeFormat: "sunday",
-                    },
-                  });
                 }}
                 type="button"
               >
@@ -76,11 +64,6 @@ const Preferences: React.VoidFunctionComponent = () => {
               })}
               onClick={() => {
                 setTimeFormat("12h");
-                plausible("Change time format", {
-                  props: {
-                    timeFormat: "12h",
-                  },
-                });
               }}
               type="button"
             >
@@ -92,11 +75,6 @@ const Preferences: React.VoidFunctionComponent = () => {
               })}
               onClick={() => {
                 setTimeFormat("24h");
-                plausible("Change time format", {
-                  props: {
-                    timeFormat: "24h",
-                  },
-                });
               }}
               type="button"
             >

src/components/profile/user-details.tsx

@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 import { useTranslation } from "next-i18next";
+import posthog from "posthog-js";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 
@@ -33,7 +34,8 @@ export const UserDetails: React.VoidFunctionComponent<UserDetailsProps> = ({
   const { refresh } = useUser();
 
   const changeName = trpc.useMutation("user.changeName", {
-    onSuccess: () => {
+    onSuccess: (_, { name }) => {
+      posthog.people.set({ name });
       refresh();
     },
   });

src/components/user-provider.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from "next-i18next";
+import posthog from "posthog-js";
 import React from "react";
+import { useMount } from "react-use";
 
 import { UserSession } from "@/utils/auth";
 
@@ -49,12 +51,44 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
   const { t } = useTranslation("app");
 
   const { data: user, refetch } = trpcNext.whoami.get.useQuery();
-  const logout = trpcNext.whoami.destroy.useMutation();
+
+  const logout = trpcNext.whoami.destroy.useMutation({
+    onSuccess: () => {
+      posthog.reset();
+    },
+  });
+
+  useMount(() => {
+    if (!process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+      return;
+    }
+
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_API_HOST,
+      opt_out_capturing_by_default: false,
+      capture_pageview: false,
+      capture_pageleave: false,
+      autocapture: false,
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === "development") {
+          posthog.opt_out_capturing();
+        }
+        if (user && posthog.get_distinct_id() !== user.id) {
+          posthog.identify(
+            user.id,
+            !user.isGuest
+              ? { email: user.email, name: user.name }
+              : { name: user.id },
+          );
+        }
+      },
+    });
+  });
 
   const shortName = user
     ? user.isGuest === false
       ? user.name
-      : `${t("guest")}-${user.id.substring(user.id.length - 4)}`
+      : user.id.substring(0, 10)
     : t("guest");
 
   if (!user) {