diff --git a/.env.local.example b/.env.local.example
index 773dda74d9..c76da6b7fe 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -10,5 +10,4 @@ NEXT_PUBLIC_EMAIL_VERIFICATION_MODE=
 
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
 NEXT_PUBLIC_HUBSPOT_STRIPE_FORM_ID=
-NEXT_PUBLIC_HUBSPOT_LOGIN_FORM_ID=
-NEXT_PUBLIC_RIPE_API_KEY=
\ No newline at end of file
+NEXT_PUBLIC_HUBSPOT_LOGIN_FORM_ID=
\ No newline at end of file
diff --git a/packages/www/components/Admin/SuspendUserModal/index.tsx b/packages/www/components/Admin/SuspendUserModal/index.tsx
index 6efa419771..6b4785d28f 100644
--- a/packages/www/components/Admin/SuspendUserModal/index.tsx
+++ b/packages/www/components/Admin/SuspendUserModal/index.tsx
@@ -30,6 +30,7 @@ const SuspendUserModal = ({ user, isOpen, onClose, onSuspend }: Props) => {
 
       <Box sx={{ display: "flex", mt: 2, mb: 2 }}>
         <Checkbox
+          placeholder="isCopyrightInfringiment"
           id="isCopyrightInfringiment"
           checked={isCopyrightInfringiment}
           style={{ color: "black" }}
diff --git a/packages/www/components/Admin/Table-v2/index.tsx b/packages/www/components/Admin/Table-v2/index.tsx
index cb7cbc616f..95547d3298 100644
--- a/packages/www/components/Admin/Table-v2/index.tsx
+++ b/packages/www/components/Admin/Table-v2/index.tsx
@@ -199,7 +199,7 @@ const Table = <T extends Record<string, unknown>>({
                 }
                 return (
                   <Box
-                    key={`${f.type}-${f.props.columnId}`}
+                    key={`${f.type}-${String(f.props.columnId)}`}
                     sx={{ ":not(:last-of-type)": { mr: 3 } }}>
                     {filter}
                   </Box>
diff --git a/packages/www/components/ApiKeys/CreateDialog.tsx b/packages/www/components/ApiKeys/CreateDialog.tsx
index c27174910f..77a19d6e2a 100644
--- a/packages/www/components/ApiKeys/CreateDialog.tsx
+++ b/packages/www/components/ApiKeys/CreateDialog.tsx
@@ -164,6 +164,7 @@ const CreateDialog = ({
 
                 <Box css={{ display: "flex", mt: "$2", alignItems: "center" }}>
                   <Checkbox
+                    placeholder="allowCors"
                     id="allowCors"
                     checked={allowCors}
                     disabled={isAdmin}
@@ -286,6 +287,7 @@ const CreateDialog = ({
 
                     <Box css={{ display: "flex", mt: "$2" }}>
                       <Checkbox
+                        placeholder="corsFullAccess"
                         id="corsFullAccess"
                         checked={cors.fullAccess ?? false}
                         onCheckedChange={(checked: boolean) =>
diff --git a/packages/www/components/ApiKeys/index.tsx b/packages/www/components/ApiKeys/index.tsx
index d7d026314a..725137f6f5 100644
--- a/packages/www/components/ApiKeys/index.tsx
+++ b/packages/www/components/ApiKeys/index.tsx
@@ -16,6 +16,7 @@ import {
 } from "./helpers";
 import { makeCreateAction, makeSelectAction } from "../Table/helpers";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
+import { useJune, events } from "hooks/use-june";
 
 const ApiKeysTable = ({
   title = "API Keys",
@@ -32,6 +33,7 @@ const ApiKeysTable = ({
   const deleteDialogState = useToggleState();
   const createDialogState = useToggleState();
   const columns = useMemo(makeColumns, []);
+  const June = useJune();
 
   const fetcher: Fetcher<ApiKeysTableData> = useCallback(
     async () => rowsPageFromState(userId, getApiTokens),
@@ -50,10 +52,10 @@ const ApiKeysTable = ({
         initialSortBy={[DefaultSortBy]}
         emptyState={makeEmptyState(createDialogState)}
         selectAction={makeSelectAction("Delete", deleteDialogState.onOn)}
-        createAction={makeCreateAction(
-          "Create API Key",
-          createDialogState.onOn
-        )}
+        createAction={makeCreateAction("Create API Key", () => {
+          June.track(events.developer.apiKeyCreate);
+          return createDialogState.onOn();
+        })}
       />
 
       <TableStateDeleteDialog
diff --git a/packages/www/components/AssetDetails/AssetHeadingBox.tsx b/packages/www/components/AssetDetails/AssetHeadingBox.tsx
index 84e942d69b..a953dea50e 100644
--- a/packages/www/components/AssetDetails/AssetHeadingBox.tsx
+++ b/packages/www/components/AssetDetails/AssetHeadingBox.tsx
@@ -33,6 +33,7 @@ const AssetHeadingBox = ({ asset, totalViews }: AssetHeadingBoxProps) => {
         {totalViews != undefined ? (
           <Tooltip
             css={{ bc: "$neutral3", color: "$neutral3" }}
+            // @ts-ignore
             content={
               <Box css={{ color: "$hiContrast" }}>
                 Views are defined as at least 1 second of watch time.
diff --git a/packages/www/components/AssetDetails/AssetSharePopup.tsx b/packages/www/components/AssetDetails/AssetSharePopup.tsx
index 25f0e797b7..7429cde7dc 100644
--- a/packages/www/components/AssetDetails/AssetSharePopup.tsx
+++ b/packages/www/components/AssetDetails/AssetSharePopup.tsx
@@ -38,7 +38,10 @@ const AssetSharePopup = ({
     <Popover>
       <PopoverTrigger asChild>{triggerNode}</PopoverTrigger>
 
-      <PopoverContent hideArrow={false} css={{ padding: "$2" }}>
+      <PopoverContent
+        placeholder="Share"
+        hideArrow={false}
+        css={{ padding: "$2" }}>
         <Flex
           css={{
             gap: "$1",
diff --git a/packages/www/components/AssetDetails/EmbedVideoDialog.tsx b/packages/www/components/AssetDetails/EmbedVideoDialog.tsx
index 0bd64dc866..52ee26db4d 100644
--- a/packages/www/components/AssetDetails/EmbedVideoDialog.tsx
+++ b/packages/www/components/AssetDetails/EmbedVideoDialog.tsx
@@ -40,6 +40,7 @@ const EmbedVideoDialog = ({
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
+        placeholder="Embed Video"
         css={{
           maxWidth: 450,
           minWidth: 350,
diff --git a/packages/www/components/FileUpload/FileItem.tsx b/packages/www/components/FileUpload/FileItem.tsx
index 062e0d3b3e..1a26269e1d 100644
--- a/packages/www/components/FileUpload/FileItem.tsx
+++ b/packages/www/components/FileUpload/FileItem.tsx
@@ -22,7 +22,11 @@ const FileItem = ({ fileUpload }: { fileUpload: FileUpload }) => {
       {"100% uploaded"}
     </Text>
   ) : (
-    <ProgressBar variant="gray" value={(progress ?? 0) * 100} />
+    <ProgressBar
+      placeholder="Progress bar"
+      variant="gray"
+      value={(progress ?? 0) * 100}
+    />
   );
 
   const accessoryChildren = completed ? (
diff --git a/packages/www/components/GettingStarted/index.tsx b/packages/www/components/GettingStarted/index.tsx
index b80bf337bd..988ff84327 100644
--- a/packages/www/components/GettingStarted/index.tsx
+++ b/packages/www/components/GettingStarted/index.tsx
@@ -20,9 +20,14 @@ const GettingStarted = ({ firstName = "" }) => {
         Welcome to Livepeer Studio{firstName && `, ${firstName}`}
       </Heading>
       <Box css={{ bc: "$panel" }}>
-        <Accordion type="single" defaultValue="accordion-one">
+        <Accordion
+          placeholder="Getting Started"
+          type="single"
+          defaultValue="accordion-one">
           <AccordionItem value="accordion-one">
-            <AccordionTrigger css={{ color: "$primary12" }}>
+            <AccordionTrigger
+              placeholder="upload video accordion"
+              css={{ color: "$primary12" }}>
               <Text size="4" css={{ color: "inherit" }}>
                 Upload your first video
               </Text>
@@ -71,7 +76,9 @@ const GettingStarted = ({ firstName = "" }) => {
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="accordion-two">
-            <AccordionTrigger css={{ color: "$primary12" }}>
+            <AccordionTrigger
+              placeholder="Create your first livestream"
+              css={{ color: "$primary12" }}>
               <Text size="4" css={{ color: "inherit" }}>
                 Create your first livestream
               </Text>
@@ -121,7 +128,9 @@ const GettingStarted = ({ firstName = "" }) => {
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="accordion-three">
-            <AccordionTrigger css={{ color: "$primary12" }}>
+            <AccordionTrigger
+              placeholder="Integrate with your app"
+              css={{ color: "$primary12" }}>
               <Text size="4" css={{ color: "inherit" }}>
                 Integrate with your app
               </Text>
diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx
index a0789910fb..70c7ac7194 100644
--- a/packages/www/components/Header/index.tsx
+++ b/packages/www/components/Header/index.tsx
@@ -20,6 +20,7 @@ import PolygonIcon from "../../public/img/icons/polygonWithoutBorderBottom.svg";
 import CheckedIcon from "../../public/img/icons/checked.svg";
 import { useEffect, useState, useRef } from "react";
 import { useApi, useHubspotForm } from "hooks";
+import { useJune, events } from "hooks/use-june";
 
 const StyledHornIcon = styled(HornIcon, {
   color: "$hiContrast",
@@ -53,6 +54,7 @@ const Header = ({ breadcrumbs = [] }) => {
     portalId: process.env.NEXT_PUBLIC_HUBSPOT_PORTAL_ID,
     formId: process.env.NEXT_PUBLIC_HUBSPOT_FEEDBACK_FORM_ID,
   });
+  const June = useJune();
 
   useEffect(() => {
     if (data) {
@@ -111,6 +113,7 @@ const Header = ({ breadcrumbs = [] }) => {
                 as={A}
                 target="_blank"
                 size={2}
+                onClick={() => June.track(events.all.documentation)}
                 css={{
                   cursor: "default",
                   color: "$hiContrast",
@@ -131,6 +134,7 @@ const Header = ({ breadcrumbs = [] }) => {
             <Button
               ghost
               as={DropdownMenuTrigger}
+              onClick={() => June.track(events.all.feedback)}
               size={2}
               css={{
                 mr: "$2",
@@ -147,6 +151,7 @@ const Header = ({ breadcrumbs = [] }) => {
               <Box>Feedback</Box>
             </Button>
             <DropdownMenuContent
+              placeholder="Feedback"
               css={{
                 padding: "18px 0 12px",
                 position: "relative",
diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index fd7fff1ae6..b93c0be9e8 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -30,6 +30,7 @@ import { useApi } from "../../hooks";
 import Router from "next/router";
 import { RocketIcon, ChatBubbleIcon, LoopIcon } from "@radix-ui/react-icons";
 import Contact from "../Contact";
+import { useJune, events } from "hooks/use-june";
 
 export const NavLink = styled(A, {
   fontSize: 14,
@@ -72,6 +73,9 @@ export type SidebarId =
 
 const Sidebar = ({ id }: { id: SidebarId }) => {
   const { user, logout } = useApi();
+  const June = useJune();
+
+  June?.track(`sidebar ${id}`);
 
   return (
     <Box
@@ -97,6 +101,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               p: 0,
             }}>
             <Avatar
+              placeholder="user"
               size="3"
               alt={user?.firstName}
               fallback={
@@ -116,7 +121,9 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               css={{ width: 20, height: 20, color: "$hiContrast" }}
             />
           </Flex>
-          <DropdownMenuContent css={{ border: "1px solid $colors$neutral6" }}>
+          <DropdownMenuContent
+            placeholder="dropdown-menu-content"
+            css={{ border: "1px solid $colors$neutral6" }}>
             <DropdownMenuGroup>
               <DropdownMenuItem
                 key="billing-dropdown-item"
diff --git a/packages/www/components/Site/Footer/index.tsx b/packages/www/components/Site/Footer/index.tsx
index 97f55e2d61..84658b63d5 100644
--- a/packages/www/components/Site/Footer/index.tsx
+++ b/packages/www/components/Site/Footer/index.tsx
@@ -25,6 +25,7 @@ const queryClient = new QueryClient();
 
 function useSiteConfig() {
   return useQuery(["siteConfig"], async () => {
+    // @ts-ignore
     const { SiteConfig } = await request(
       "https://dp4k3mpw.api.sanity.io/v1/graphql/production/default",
       print(siteConfig)
diff --git a/packages/www/components/Site/Navigation/base.tsx b/packages/www/components/Site/Navigation/base.tsx
index 909b0154ac..ba7dfc1454 100644
--- a/packages/www/components/Site/Navigation/base.tsx
+++ b/packages/www/components/Site/Navigation/base.tsx
@@ -169,6 +169,7 @@ const NavigationBase = ({
                           </A>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent
+                          placeholder="dropdown-menu-content"
                           align="start"
                           css={{
                             p: 0,
diff --git a/packages/www/components/Site/OneAPI/index.tsx b/packages/www/components/Site/OneAPI/index.tsx
index a908f90417..b17dfc26ed 100644
--- a/packages/www/components/Site/OneAPI/index.tsx
+++ b/packages/www/components/Site/OneAPI/index.tsx
@@ -157,6 +157,7 @@ export const StartBuilding = ({ backgroundColor = "$loContrast" }) => (
           justifyContent: "center",
         }}>
         <TabsList
+          placeholder="Select a workflow"
           css={{
             alignSelf: "center",
             width: "auto",
diff --git a/packages/www/components/Site/RegionSelector/index.tsx b/packages/www/components/Site/RegionSelector/index.tsx
index db8b294bf1..7f9b92fd5a 100644
--- a/packages/www/components/Site/RegionSelector/index.tsx
+++ b/packages/www/components/Site/RegionSelector/index.tsx
@@ -12,6 +12,7 @@ import { useState } from "react";
 
 const Item = ({ active = false, language, locale, flag, ...props }) => (
   <DropdownMenuCheckboxItem
+    placeholder="Language"
     css={{
       borderRadius: 3,
       display: "flex",
@@ -97,6 +98,7 @@ const LanguageDropdown = ({ navBackgroundColor }) => {
         </Box>
       </DropdownMenuTrigger>
       <DropdownMenuContent
+        placeholder="dropdown-menu-content"
         css={{
           minWidth: 300,
           backgroundColor: "#ffffff",
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/SaveTargetDialog.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/SaveTargetDialog.tsx
index 1efadb9d5a..a1ad06cdcf 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/SaveTargetDialog.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/SaveTargetDialog.tsx
@@ -320,6 +320,7 @@ const SaveTargetDialog = ({
                   {profileOpts.map((p) => (
                     <Box key={p.name} css={{ display: "flex", mb: "$2" }}>
                       <Radio
+                        placeholder="Profile"
                         value={p.name}
                         id={`profile-${p.name}`}
                         checked={state.profile === p.name}
@@ -339,6 +340,7 @@ const SaveTargetDialog = ({
 
             <Box css={{ display: "flex" }}>
               <Checkbox
+                placeholder="videoOnly"
                 id="videoOnly"
                 checked={state.videoOnly}
                 onCheckedChange={(checked: boolean) =>
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
index e3f9c716bd..eba905dbd4 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
@@ -209,6 +209,7 @@ const Toolbox = ({
   return (
     <Flex align="center" gap="2" justify="end">
       <Switch
+        placeholder="Multistream target toggle"
         name="multistream-target-toggle"
         disabled={!target}
         checked={!target?.disabled}
@@ -234,7 +235,7 @@ const Toolbox = ({
             <Overflow />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
+        <DropdownMenuContent placeholder="dropdown-menu-content" align="end">
           <DropdownMenuGroup>
             <DropdownMenuItem
               disabled={!target}
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx
index 359889c22a..adf2b6a2ee 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx
@@ -14,6 +14,7 @@ import SaveTargetDialog, { Action } from "./SaveTargetDialog";
 import { makeColumns, makeTableData, TargetsTableData } from "./helpers";
 import { makeCreateAction } from "components/Table/helpers";
 import { getMultistreamTarget } from "hooks/use-api/endpoints/multistream";
+import { useJune, events } from "hooks/use-june";
 
 const MultistreamTargetsTable = ({
   title = "Multistream Targets",
@@ -41,6 +42,7 @@ const MultistreamTargetsTable = ({
   const saveDialogState = useToggleState();
 
   const columns = useMemo(makeColumns, []);
+  const June = useJune();
 
   const targetQueryKey = (id: string) => ["multistreamTarget", id];
   const invalidateTargetId = useCallback(
@@ -75,7 +77,10 @@ const MultistreamTargetsTable = ({
     [state.tableId, stream, streamHealth, invalidateTargetId, targetRefs]
   );
 
-  const onCreateClick = saveDialogState.onOn;
+  const onCreateClick = () => {
+    June.track(events.stream.multistreamTarget);
+    return saveDialogState.onOn();
+  };
 
   return (
     <Box {...props}>
diff --git a/packages/www/components/StreamDetails/Record.tsx b/packages/www/components/StreamDetails/Record.tsx
index a77b3aa6b7..6066872a4b 100644
--- a/packages/www/components/StreamDetails/Record.tsx
+++ b/packages/www/components/StreamDetails/Record.tsx
@@ -7,13 +7,16 @@ import {
 import { useToggleState } from "hooks/use-toggle-state";
 import { useApi } from "../../hooks";
 import ErrorDialog from "../ErrorDialog";
+import { useJune, events } from "hooks/use-june";
 
 const Record = ({ stream, invalidate, isSwitch = true }) => {
   const { patchStream } = useApi();
   const [openSnackbar] = useSnackbar();
   const errorRecordDialogState = useToggleState();
+  const June = useJune();
 
   const onCheckedChange = async () => {
+    June.track(events.stream.recordingToggle);
     if (stream.isActive) {
       errorRecordDialogState.onOn();
     } else if (!stream.record) {
@@ -31,6 +34,7 @@ const Record = ({ stream, invalidate, isSwitch = true }) => {
     <Box>
       {isSwitch ? (
         <Switch
+          placeholder="Record mode"
           checked={!!stream.record}
           name="record-mode"
           value={`${!!stream.record}`}
diff --git a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
index 3a1e882a61..621552c7b1 100644
--- a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
+++ b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
@@ -84,7 +84,7 @@ const StreamChildrenHeadingBox = ({
               <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
+          <DropdownMenuContent placeholder="dropdown-menu-content" align="end">
             <DropdownMenuGroup>
               <Record
                 stream={stream}
diff --git a/packages/www/components/StreamDetails/StreamHealthTab.tsx b/packages/www/components/StreamDetails/StreamHealthTab.tsx
index b579b88552..b0e46ac16a 100644
--- a/packages/www/components/StreamDetails/StreamHealthTab.tsx
+++ b/packages/www/components/StreamDetails/StreamHealthTab.tsx
@@ -6,6 +6,7 @@ import Logger from "components/Logger";
 import Chart from "components/Chart";
 import HealthChecksTable from "components/StreamDetails/HealthChecksTable";
 import { Text, Box, Heading } from "@livepeer/design-system";
+import { useJune, events } from "hooks/use-june";
 
 const ingestInterval = 10 * 1000;
 const maxItems = 6;
@@ -25,6 +26,7 @@ const StreamHealthTab = ({ stream, streamHealth, invalidateStream }) => {
     { name: 0, "Session bitrate": 0 },
   ]);
 
+  const June = useJune();
   const [multiDataChart, setMultiDataChart] = useState<MultistreamChartType[]>(
     []
   );
@@ -33,6 +35,8 @@ const StreamHealthTab = ({ stream, streamHealth, invalidateStream }) => {
 
   const [info, setInfo] = useState<StreamInfo | null>(null);
 
+  June?.track(events.stream.health);
+
   const { getStreamInfo } = useApi();
 
   const { query } = router;
diff --git a/packages/www/components/StreamDetails/StreamOverviewBox.tsx b/packages/www/components/StreamDetails/StreamOverviewBox.tsx
index 94c23f3246..02c7a7858a 100644
--- a/packages/www/components/StreamDetails/StreamOverviewBox.tsx
+++ b/packages/www/components/StreamDetails/StreamOverviewBox.tsx
@@ -101,6 +101,7 @@ const StreamOverviewBox = ({
               </Box>
               <Tooltip
                 multiline
+                // @ts-ignore
                 content={
                   <Box>
                     When enabled, transcoded streaming sessions will be recorded
diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
index f2dc013927..59b462546f 100644
--- a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
+++ b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
@@ -16,6 +16,7 @@ import { FaKey, FaVideo } from "react-icons/fa";
 import { FiVideo } from "react-icons/fi";
 import StreamSetupBox from "../StreamSetupBox";
 import ActiveStream from "./ActiveStream";
+import { useJune, events } from "hooks/use-june";
 
 export type StreamPlayerBoxProps = {
   stream: Stream;
@@ -42,6 +43,7 @@ const StreamPlayerBox = ({
   const [activeTab, setSwitchTab] = useState<"Browser" | "Streaming Software">(
     "Browser"
   );
+  const June = useJune();
 
   const isStreamActiveFromExternal = useMemo(
     () => !isBroadcastLive && stream.isActive,
@@ -122,7 +124,10 @@ const StreamPlayerBox = ({
                 Share
               </Button>
             }
-            onEmbedVideoClick={onEmbedVideoClick}
+            onEmbedVideoClick={() => {
+              June.track(events.stream.embed);
+              return onEmbedVideoClick();
+            }}
           />
           <Tooltip
             content={
@@ -136,7 +141,12 @@ const StreamPlayerBox = ({
                 flex: 2,
               }}
               disabled={isStreamActiveFromExternal}
-              onClick={() => setIsBroadcastLive((prev) => !prev)}>
+              onClick={() =>
+                setIsBroadcastLive((prev) => {
+                  prev && June.track(events.stream.goLive);
+                  return !prev;
+                })
+              }>
               <Box
                 as={FiVideo}
                 css={{
diff --git a/packages/www/components/StreamDetails/StreamSetupBox.tsx b/packages/www/components/StreamDetails/StreamSetupBox.tsx
index 9d8f0b0947..dc908abc41 100644
--- a/packages/www/components/StreamDetails/StreamSetupBox.tsx
+++ b/packages/www/components/StreamDetails/StreamSetupBox.tsx
@@ -3,6 +3,7 @@ import { Stream } from "@livepeer.studio/api";
 import ClipButton from "../Clipping/ClipButton";
 import ShowURL from "../ShowURL";
 import { isStaging } from "lib/utils";
+import { useJune, events } from "hooks/use-june";
 
 export type StreamSetupBoxProps = {
   activeTab: "Browser" | "Streaming Software";
@@ -24,6 +25,8 @@ const StreamSetupBox = ({
     ? `https://monster.lvpr.tv/broadcast/${stream.streamKey}`
     : `https://lvpr.tv/broadcast/${stream.streamKey}`;
 
+  const June = useJune();
+
   return (
     <>
       <Flex
@@ -78,7 +81,10 @@ const StreamSetupBox = ({
               ? "Stream key"
               : "Embeddable broadcast"}
           </Box>
-          <Text variant="neutral" css={{ fontSize: "$2", mt: "$2" }}>
+          <Text
+            variant="neutral"
+            css={{ fontSize: "$2", mt: "$2" }}
+            onClick={() => June.track(events.stream.keyCopy)}>
             <ClipButton
               value={
                 activeTab === "Streaming Software"
diff --git a/packages/www/components/Table/cells/createdAt.tsx b/packages/www/components/Table/cells/createdAt.tsx
index 6408cdb59d..dc49b2bed7 100644
--- a/packages/www/components/Table/cells/createdAt.tsx
+++ b/packages/www/components/Table/cells/createdAt.tsx
@@ -56,6 +56,7 @@ const ProcessingProgress = ({ progress, playbackUrl }) => (
     {playbackUrl && (
       <Tooltip
         multiline
+        // @ts-ignore
         content={
           <Box>
             Your video can now be played. In the background, it is converted
diff --git a/packages/www/components/Table/filters/fields/index.tsx b/packages/www/components/Table/filters/fields/index.tsx
index a04728b076..14d181d6da 100644
--- a/packages/www/components/Table/filters/fields/index.tsx
+++ b/packages/www/components/Table/filters/fields/index.tsx
@@ -417,6 +417,7 @@ const ConditionValue = ({
             <Box css={{ display: "flex", flexDirection: "column" }}>
               <Box css={{ display: "flex", mb: "$2" }}>
                 <Radio
+                  placeholder="radio"
                   value="on"
                   id={`${filter.label}-on`}
                   checked={condition.value === true}
@@ -430,6 +431,7 @@ const ConditionValue = ({
               </Box>
               <Box css={{ display: "flex" }}>
                 <Radio
+                  placeholder="radio"
                   value="off"
                   id={`${filter.label}-off`}
                   checked={condition.value === false}
diff --git a/packages/www/components/Table/filters/index.tsx b/packages/www/components/Table/filters/index.tsx
index 9f86a0bbd8..98b9729008 100644
--- a/packages/www/components/Table/filters/index.tsx
+++ b/packages/www/components/Table/filters/index.tsx
@@ -228,6 +228,7 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
                 <StyledItem value={filter.label} key={i}>
                   <StyledHeader onClick={onToggleOpen}>
                     <Checkbox
+                      placeholder="isOpen"
                       checked={filter.isOpen}
                       onCheckedChange={onToggleOpen}
                       onClick={onToggleOpen}
diff --git a/packages/www/components/Table/helpers.tsx b/packages/www/components/Table/helpers.tsx
index ce44e89050..f048fc55d1 100644
--- a/packages/www/components/Table/helpers.tsx
+++ b/packages/www/components/Table/helpers.tsx
@@ -1,6 +1,5 @@
 import { Box } from "@livepeer/design-system";
 import { Cross1Icon, PlusIcon } from "@radix-ui/react-icons";
-import Ripe from "lib/ripe";
 
 export const makeSelectAction = (title: string, onClick: () => void) => ({
   onClick,
@@ -14,12 +13,7 @@ export const makeSelectAction = (title: string, onClick: () => void) => ({
 });
 
 export const makeCreateAction = (title: string, onClick: () => void) => ({
-  onClick: () => {
-    Ripe.track({
-      event: `clicked ${title} button`,
-    });
-    onClick();
-  },
+  onClick,
   css: { display: "flex", alignItems: "center", ml: "$2" },
   children: (
     <>
diff --git a/packages/www/components/Table/index.tsx b/packages/www/components/Table/index.tsx
index a43cf51066..a4a9329073 100644
--- a/packages/www/components/Table/index.tsx
+++ b/packages/www/components/Table/index.tsx
@@ -199,6 +199,7 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
               const props = getToggleAllRowsSelectedProps();
               return (
                 <Checkbox
+                  placeholder="Select all rows"
                   css={{ display: "flex" }}
                   onClick={props.onChange}
                   value="toggle-all"
@@ -211,6 +212,7 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
             Cell: ({ row }) => {
               return (
                 <Checkbox
+                  placeholder="Select row"
                   css={{ display: "flex" }}
                   // @ts-ignore
                   value={row.isSelected}
diff --git a/packages/www/components/UsageSummary/index.tsx b/packages/www/components/UsageSummary/index.tsx
index 12b3d5715a..a961103026 100644
--- a/packages/www/components/UsageSummary/index.tsx
+++ b/packages/www/components/UsageSummary/index.tsx
@@ -17,6 +17,7 @@ import { useEffect, useState } from "react";
 import { useApi } from "hooks";
 import { products } from "@livepeer.studio/api/src/config";
 import { QuestionMarkCircledIcon as Help } from "@radix-ui/react-icons";
+import { useJune, events } from "hooks/use-june";
 
 const StyledUpcomingIcon = styled(UpcomingIcon, {
   mr: "$2",
@@ -206,6 +207,8 @@ const UsageSummary = () => {
     }
   }, [user]);
 
+  const June = useJune();
+
   return (
     <>
       <Flex
@@ -231,6 +234,7 @@ const UsageSummary = () => {
             <Flex align="center" css={{ mr: "$3" }}>
               <Tooltip
                 multiline
+                // @ts-ignore
                 content={
                   <Box>
                     Usage minutes may take up to an hour to be reflected.
@@ -297,7 +301,10 @@ const UsageSummary = () => {
         align="center"
         css={{ fontSize: "$3", color: "$hiContrast" }}>
         <Link href="/dashboard/billing" passHref legacyBehavior>
-          <A variant="primary" css={{ display: "flex", alignItems: "center" }}>
+          <A
+            variant="primary"
+            css={{ display: "flex", alignItems: "center" }}
+            onClick={() => June.track(events.landing.billingCta)}>
             View billing <ArrowRightIcon />
           </A>
         </Link>
diff --git a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
index bb54a36d1f..4017c9f40a 100644
--- a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
+++ b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
@@ -178,7 +178,9 @@ const CreateEditDialog = ({
                   </Select>
                 </Box>
               </DropdownMenuTrigger>
-              <DropdownMenuContent css={{ mt: "$1" }}>
+              <DropdownMenuContent
+                placeholder="dropdown-menu-content"
+                css={{ mt: "$1" }}>
                 <Box
                   css={{
                     position: "relative",
@@ -198,6 +200,7 @@ const CreateEditDialog = ({
                   <DropdownMenuGroup>
                     {eventOptions.map((event, i) => (
                       <DropdownMenuCheckboxItem
+                        placeholder="dropdown-menu-checkbox-item"
                         key={i}
                         checked={events.includes(event)}
                         onSelect={(e) => {
diff --git a/packages/www/components/WebhooksTable/helpers.tsx b/packages/www/components/WebhooksTable/helpers.tsx
index 049e145106..a7167e5afd 100644
--- a/packages/www/components/WebhooksTable/helpers.tsx
+++ b/packages/www/components/WebhooksTable/helpers.tsx
@@ -95,6 +95,7 @@ export const rowsPageFromState = async (
           children: (
             <Tooltip
               multiline
+              //@ts-ignore
               content={webhook.events.map((event) => (
                 <Box key={event}>{event}</Box>
               ))}>
diff --git a/packages/www/hooks/use-api/endpoints/user.ts b/packages/www/hooks/use-api/endpoints/user.ts
index e327838fac..e86c04102e 100644
--- a/packages/www/hooks/use-api/endpoints/user.ts
+++ b/packages/www/hooks/use-api/endpoints/user.ts
@@ -48,7 +48,6 @@ export const login = async (email, password) => {
 
   if (process.env.NODE_ENV === "production") {
     const data = jwt.decode(token, { json: true });
-    window.analytics.identify(data.sub, { email });
   }
 
   setState((state) => ({ ...state, token, refreshToken }));
diff --git a/packages/www/hooks/use-june.tsx b/packages/www/hooks/use-june.tsx
new file mode 100644
index 0000000000..ac57177877
--- /dev/null
+++ b/packages/www/hooks/use-june.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { AnalyticsBrowser } from "@june-so/analytics-next";
+
+export const events: EventObject = {
+  all: {
+    documentation: "documentation",
+    feedback: "feedback",
+  },
+  onboarding: {
+    register: "register",
+  },
+  stream: {
+    preview: "stream preview",
+    embed: "stream embed",
+    health: "stream health check",
+    goLive: "stream golive",
+    keyCopy: "stream key copy",
+    multistreamTarget: "stream multistream target add",
+    recordingToggle: "stream recording toggle",
+  },
+  vod: {
+    // NOT TRACKING VOD USAGE YET, WILL ADD IN FUTURE RELEASE
+  },
+  developer: {
+    webhookDetail: "developer webhook detail",
+    apiKeyCreate: "developer api key create",
+  },
+  landing: {
+    billingCta: "landing billing cta",
+  },
+  billing: {
+    usageDetails: "billing usage details cta",
+  },
+} as const;
+
+interface EventObject {
+  [path: string]: EventDetail;
+}
+
+interface EventDetail {
+  [path: string]: string;
+}
+
+export function useJune() {
+  const [analytics, setAnalytics] = useState(undefined);
+
+  useEffect(() => {
+    const loadAnalytics = async () => {
+      let response = AnalyticsBrowser.load({
+        writeKey: "3VINzqYVjfOxFyIr",
+      });
+      console.log("response", response);
+      setAnalytics(response);
+    };
+    loadAnalytics();
+  }, []);
+
+  return analytics;
+}
diff --git a/packages/www/hooks/use-logged-in.tsx b/packages/www/hooks/use-logged-in.tsx
index 1abc709c90..fab90c8552 100644
--- a/packages/www/hooks/use-logged-in.tsx
+++ b/packages/www/hooks/use-logged-in.tsx
@@ -1,6 +1,7 @@
 import useApi from "./use-api";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import { useJune, events } from "hooks/use-june";
 
 /**
  * Verifies that the user is logged in. Redirects to / if not. Pass
@@ -10,6 +11,7 @@ export default function useLoggedIn(shouldBeLoggedIn = true) {
   const { user, token } = useApi();
   const router = useRouter();
   const [isLoggedIn, setIsLoggedIn] = useState(null);
+  const June = useJune();
   const { next } = router.query;
   const emailVerificationMode =
     process.env.NEXT_PUBLIC_EMAIL_VERIFICATION_MODE === "true";
@@ -25,6 +27,8 @@ export default function useLoggedIn(shouldBeLoggedIn = true) {
     // console.log(shouldBeLoggedIn, user);
     // Check for user rather than token so redirects to /dashboard.
     if (shouldBeLoggedIn === false && user) {
+      process.env.NODE_ENV === "production" &&
+        June.identifyUser(user.id, user.email);
       if (emailVerificationMode && user.emailValid === false) {
         router.replace("/verify");
       } else {
diff --git a/packages/www/lib/ripe.ts b/packages/www/lib/ripe.ts
deleted file mode 100644
index cde1b56877..0000000000
--- a/packages/www/lib/ripe.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-export const categories = {
-  AUTH: "Authentication",
-  HOME: "Home",
-  PRICING: "Pricing",
-  DASHBOARD: "Dashboard",
-} as const;
-
-export const pages = {
-  LANDING: "Landing Page",
-  PRICING: "Pricing Page",
-  CREATE_ACCOUNT: "Create Account Page",
-  DASHBOARD_HOME: "Dashboard Home Page",
-  STREAMS: "Streams Page",
-  ASSETS: "Assets Page",
-  STREAM: "Stream Page",
-  ASSET: "Asset Page",
-  API_KEY: "API Key Page",
-} as const;
-
-type Category = (typeof categories)[keyof typeof categories];
-type PageName = (typeof pages)[keyof typeof pages];
-
-interface EventObject {
-  event: string;
-  properties?: Record<string, unknown>;
-}
-
-interface UserTraits {
-  firstName?: string;
-  lastName?: string;
-  email?: string;
-  [key: string]: any;
-}
-
-interface PageObject {
-  category?: Category;
-  name: PageName;
-  properties?: Record<string, unknown>;
-}
-
-type Ripe = {
-  identify: (payload: { userId: string; traits: UserTraits }) => void;
-  page: (pageObject: PageObject) => void;
-  track: (eventObject: EventObject) => void;
-};
-
-declare global {
-  interface Window {
-    Ripe: Ripe;
-  }
-}
-
-const Ripe = {
-  identifyUser: (userId?: string, traits?: UserTraits): void => {
-    if (typeof window === "undefined") return;
-
-    if (window.Ripe) {
-      window.Ripe.identify({
-        userId,
-        traits,
-      });
-    } else {
-      console.error("Ripe is not available on window.");
-    }
-  },
-
-  trackPage: (pageObject: PageObject): void => {
-    if (typeof window === "undefined") return;
-
-    if (window.Ripe) {
-      window.Ripe.page(pageObject);
-    } else {
-      console.error("Ripe is not available on window.");
-    }
-  },
-
-  track: (eventObject: EventObject): void => {
-    if (typeof window === "undefined") return;
-
-    if (window.Ripe) {
-      window.Ripe.track(eventObject);
-    } else {
-      console.error("Ripe is not available on window.");
-    }
-  },
-};
-
-export default Ripe;
diff --git a/packages/www/package.json b/packages/www/package.json
index 8ebbf6beae..6a9f09f27b 100644
--- a/packages/www/package.json
+++ b/packages/www/package.json
@@ -20,6 +20,7 @@
     "@emotion/core": "^10.0.17",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^10.0.23",
+    "@june-so/analytics-next": "^2.0.0",
     "@livepeer.studio/api": "^0.16.2",
     "@livepeer/design-system": "^1.1.0",
     "@livepeer/react": "^3.1.9",
diff --git a/packages/www/pages/_app.tsx b/packages/www/pages/_app.tsx
index 2dc38535a2..4647b77dc8 100644
--- a/packages/www/pages/_app.tsx
+++ b/packages/www/pages/_app.tsx
@@ -94,8 +94,6 @@ const livepeerClient = createReactClient({
   }),
 });
 
-const RIPE_API_KEY = process.env.NEXT_PUBLIC_RIPE_API_KEY;
-
 const livepeerTheme: ThemeConfig = {
   colors: {
     accent: "$colors$green10",
@@ -145,9 +143,6 @@ const App = ({ Component, pageProps }) => {
                       client={livepeerClient}>
                       <DefaultSeo {...SEO} />
                       <Component {...pageProps} />
-                      <Script id="ripe-integration">
-                        {`(function(a,b){var c=function(a){return fetch("".concat("https://storage.getripe.com","/sdk%2Fversion.txt?alt=media"),{cache:"no-store"}).then(function(a){return a.text()}).then(function(b){a(b)})};a.Ripe=a.Ripe||[],["init","identify","group","track","page"].forEach(function(b){a.Ripe[b]=function(){for(var c=arguments.length,d=Array(c),e=0;e<c;e++)d[e]=arguments[e];var f=Array.prototype.slice.call(d);return f.unshift(b),a.Ripe.push(f),a.Ripe}}),a.Ripe.load=function(){var a=b.createElement("script"),d=b.getElementsByTagName("script")[0];a.async=!0,c(function(b){var c;a.src="".concat("https://storage.getripe.com","/sdk%2F").concat(b,"%2Fsdk.umd.js?alt=media"),null===d||void 0===d||null===(c=d.parentNode)||void 0===c?void 0:c.insertBefore(a,d)})},a.Ripe.load()})(window,document);Ripe.init('${RIPE_API_KEY}')`}
-                      </Script>
                     </LivepeerConfig>
                   </AnalyzerProvider>
                 </ApiProvider>
diff --git a/packages/www/pages/dashboard/assets/[id]/index.tsx b/packages/www/pages/dashboard/assets/[id]/index.tsx
index aee13bfc2f..e71dfe8b71 100644
--- a/packages/www/pages/dashboard/assets/[id]/index.tsx
+++ b/packages/www/pages/dashboard/assets/[id]/index.tsx
@@ -6,12 +6,6 @@ import AssetDetail from "layouts/assetDetail";
 import AssetOverviewTab from "components/AssetDetails/AssetOverviewTab";
 import AssetEventLogTab from "components/AssetDetails/AssetEventLogTab";
 import { Asset } from "@livepeer.studio/api";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.DASHBOARD,
-  name: pages.ASSET,
-});
 
 const refetchInterval = 5 * 1000;
 
diff --git a/packages/www/pages/dashboard/assets/index.tsx b/packages/www/pages/dashboard/assets/index.tsx
index b8dfd6474d..f3bf75cd69 100644
--- a/packages/www/pages/dashboard/assets/index.tsx
+++ b/packages/www/pages/dashboard/assets/index.tsx
@@ -3,12 +3,6 @@ import { Box } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import AssetsTable from "components/AssetsTable";
 import { DashboardAssets as Content } from "content";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.DASHBOARD,
-  name: pages.ASSETS,
-});
 
 const Assets = () => {
   useLoggedIn();
diff --git a/packages/www/pages/dashboard/billing/index.tsx b/packages/www/pages/dashboard/billing/index.tsx
index 58a5eac207..36d9d571e2 100644
--- a/packages/www/pages/dashboard/billing/index.tsx
+++ b/packages/www/pages/dashboard/billing/index.tsx
@@ -19,6 +19,7 @@ import PastInvoicesTable from "components/PastInvoicesTable";
 import { useQuery, useQueryClient } from "react-query";
 import { DashboardBilling as Content } from "content";
 import React, { PureComponent } from "react";
+import { useJune, events } from "hooks/use-june";
 
 export interface OverUsageBill {
   transcodingBill: OverUsageItem;
@@ -50,6 +51,7 @@ const Billing = () => {
   const [overUsageBill, setOverUsageBill] = useState<OverUsageBill | null>(
     null
   );
+  const June = useJune();
 
   const standardProducts = ["Hacker", "Growth", "Scale"];
 
@@ -351,7 +353,8 @@ const Billing = () => {
           <Link href="/dashboard/usage" passHref legacyBehavior>
             <A
               variant="primary"
-              css={{ display: "flex", alignItems: "center" }}>
+              css={{ display: "flex", alignItems: "center" }}
+              onClick={() => June.track(events.billing.usageDetails)}>
               View Usage Details <ArrowRightIcon />
             </A>
           </Link>
diff --git a/packages/www/pages/dashboard/developers/api-keys.tsx b/packages/www/pages/dashboard/developers/api-keys.tsx
index 51783deb81..579d931312 100644
--- a/packages/www/pages/dashboard/developers/api-keys.tsx
+++ b/packages/www/pages/dashboard/developers/api-keys.tsx
@@ -3,12 +3,6 @@ import { Box } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import ApiKeysTable from "components/ApiKeys";
 import { DashboardAPIKeys as Content } from "content";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.DASHBOARD,
-  name: pages.API_KEY,
-});
 
 const ApiKeys = () => {
   useLoggedIn();
diff --git a/packages/www/pages/dashboard/index.tsx b/packages/www/pages/dashboard/index.tsx
index e191a57522..016868fc1f 100644
--- a/packages/www/pages/dashboard/index.tsx
+++ b/packages/www/pages/dashboard/index.tsx
@@ -10,12 +10,6 @@ import Banner from "components/Banner";
 
 import { useLoggedIn, useApi } from "hooks";
 import { Dashboard as Content } from "content";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.DASHBOARD,
-  name: pages.DASHBOARD_HOME,
-});
 
 const Dashboard = () => {
   const { user, verifyEmail, getUserProduct } = useApi();
@@ -40,14 +34,6 @@ const Dashboard = () => {
     }
   };
 
-  useEffect(() => {
-    Ripe.identifyUser(user.id, {
-      firstName: user.firstName,
-      lastName: user.lastName,
-      email: user.email,
-    });
-  }, []);
-
   return (
     <Box css={{ p: "$6" }}>
       {!emailValid && (
diff --git a/packages/www/pages/dashboard/streams/[id]/index.tsx b/packages/www/pages/dashboard/streams/[id]/index.tsx
index 36c9f0a227..29d018596b 100644
--- a/packages/www/pages/dashboard/streams/[id]/index.tsx
+++ b/packages/www/pages/dashboard/streams/[id]/index.tsx
@@ -6,12 +6,6 @@ import { useApi, useAnalyzer } from "hooks";
 import StreamDetail from "layouts/streamDetail";
 import StreamHealthTab from "components/StreamDetails/StreamHealthTab";
 import StreamOverviewTab from "components/StreamDetails/StreamOverviewTab";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.DASHBOARD,
-  name: pages.STREAM,
-});
 
 const refetchInterval = 5 * 1000;
 
diff --git a/packages/www/pages/dashboard/streams/index.tsx b/packages/www/pages/dashboard/streams/index.tsx
index c37bc6f264..088e49eb5f 100644
--- a/packages/www/pages/dashboard/streams/index.tsx
+++ b/packages/www/pages/dashboard/streams/index.tsx
@@ -3,12 +3,6 @@ import { Box } from "@livepeer/design-system";
 import { useApi, useLoggedIn } from "hooks";
 import StreamsTable from "components/StreamsTable";
 import { DashboardStreams as Content } from "content";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.DASHBOARD,
-  name: pages.STREAMS,
-});
 
 const Streams = () => {
   useLoggedIn();
diff --git a/packages/www/pages/dashboard/usage/index.tsx b/packages/www/pages/dashboard/usage/index.tsx
index 639f55de0a..6efbcb1b05 100644
--- a/packages/www/pages/dashboard/usage/index.tsx
+++ b/packages/www/pages/dashboard/usage/index.tsx
@@ -230,6 +230,7 @@ const Usage = () => {
                 <Flex align="center">
                   <LPTooltip
                     multiline
+                    //@ts-ignore
                     content={
                       <Box>
                         Usage minutes may take up to an hour to be reflected.
diff --git a/packages/www/pages/index.tsx b/packages/www/pages/index.tsx
index d72feee56a..2fcdb6b422 100644
--- a/packages/www/pages/index.tsx
+++ b/packages/www/pages/index.tsx
@@ -7,7 +7,6 @@ import { Home as Content } from "content";
 import Link from "next/link";
 import { Button, Box, Link as A } from "@livepeer/design-system";
 import { FiArrowUpRight } from "react-icons/fi";
-import Ripe, { categories, pages } from "lib/ripe";
 
 const networkFeatures = [
   {
@@ -139,11 +138,6 @@ const benefits = [
   },
 ];
 
-Ripe.trackPage({
-  category: categories.HOME,
-  name: pages.LANDING,
-});
-
 const HomePage = () => {
   return (
     <Layout {...Content.metaData}>
diff --git a/packages/www/pages/pricing.tsx b/packages/www/pages/pricing.tsx
index 7863fe0eb4..41234afe9d 100644
--- a/packages/www/pages/pricing.tsx
+++ b/packages/www/pages/pricing.tsx
@@ -7,12 +7,6 @@ import path from "path";
 import { Pricing as Content } from "content";
 import { Callout } from "@radix-ui/themes";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.PRICING,
-  name: pages.PRICING,
-});
 
 const PricingPage = ({ markdownContent }) => {
   return (
diff --git a/packages/www/pages/register.tsx b/packages/www/pages/register.tsx
index 2ac7f896c3..4ec222f270 100644
--- a/packages/www/pages/register.tsx
+++ b/packages/www/pages/register.tsx
@@ -16,12 +16,7 @@ import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
 import { Register as Content } from "content";
 import Link from "next/link";
 import { useApi, useLoggedIn } from "../hooks";
-import Ripe, { categories, pages } from "lib/ripe";
-
-Ripe.trackPage({
-  category: categories.AUTH,
-  name: pages.CREATE_ACCOUNT,
-});
+import { useJune, events } from "hooks/use-june";
 
 const emailVerificationMode =
   process.env.NEXT_PUBLIC_EMAIL_VERIFICATION_MODE === "true";
@@ -33,7 +28,7 @@ const RegisterPage = () => {
   const [errors, setErrors] = useState([]);
   const [loading, setLoading] = useState(false);
   const { executeRecaptcha } = useGoogleReCaptcha();
-
+  const June = useJune();
   const router = useRouter();
   const { register, verify, user } = useApi();
 
@@ -91,6 +86,9 @@ const RegisterPage = () => {
       ...(phone && { phone }),
       recaptchaToken,
     });
+
+    June.track(events.onboarding.register);
+
     // Don't need to worry about the success case, we'll redirect
     if (res.errors) {
       setErrors(res.errors);
diff --git a/yarn.lock b/yarn.lock
index d84a2ea15c..314c80db0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26698,4 +26698,4 @@ zustand@^4.3.9:
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz"
-  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
\ No newline at end of file