Integrating June tracking tool

[hthillman]

This tool allows us to track users through their onboarding journey.

Testing instructions:

**note: I've disabled the identifyUser step for staging, so you'll need to run locally - you can also use the preview from 3860bc8 if you want but probably better to run locally **

We will need to check functionality of everywhere I've added June events.

• API key creation
• docs and feedback links in header
• all sidebar navlinks
• creation of multistream targets
• recording toggle
• render of stream health tab in stream detail page
• embed and copy links on stream detail page
• stream go live
• stream key copy
• landing page billing cta
• billing page usage cta
• registration / account creation
• login flows

I've also ripped out the Ripe integration points for now, can revert if needed

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
livepeer-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 5:48pm

[adamsoffer]

Need to remove additional instances of Ripe:

studio/packages/www/pages/dashboard/index.tsx

Line 13 in 6432cc9

import Ripe, { categories, pages } from "lib/ripe";

studio/packages/www/pages/dashboard/index.tsx

Line 15 in 6432cc9

Ripe.trackPage({

studio/packages/www/pages/dashboard/index.tsx

Line 43 in 6432cc9

useEffect(() => {

studio/packages/www/pages/index.tsx

Line 10 in 6432cc9

import Ripe, { categories, pages } from "lib/ripe";

Also need to remove ripe.js file:

[adamsoffer]

When I navigate to a stream detail view and then refresh the page I get an error that June isn't available on window. @suhailkakar can you help debug this issue?

[hthillman]

When I navigate to a stream detail view and then refresh the page I get an error that June isn't available on window. @suhailkakar can you help debug this issue?

@adamsoffer I wonder if the identify call is in the wrong place, and track is not available until after identification. I thought I put it somewhere that would get initialized upfront every time but maybe there's a race condition

[suhailkakar]

hey @hthillman

• i've replaced the script and window.analytics object with the June next.js sdk[1] and a hook
• all the implementational will be same, but instead of importing June from ../lib/June, we are using the June hook

import { useJune, events } from "hooks/use-june";
const June = useJune();

• i've tested and all the tracks events are being sent to June

cc: @adamsoffer

[1] https://www.june.so/docs/tracking/web/react

[suhailkakar]

Also, the big "file changes" are just types issue related to livepeer/design library which is also fixed

[suhailkakar]

Not sure, if this needs to be added to .env. Please feel free to move it from here if it needs to kept private.

[adamsoffer]

LGTM thanks @suhailkakar !