Skip to content
This repository was archived by the owner on Jul 16, 2025. It is now read-only.

feat(analytics): add Plausible tracking #194

Open
prodalex wants to merge 2 commits into
base: console-web3
Choose a base branch
from
Open

feat(analytics): add Plausible tracking #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4aae827
Added Plausible Tracking
May 16, 2025
e9256c8
Changed from local tracking to console.web3.storage tracking
May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"linkdex": "^3.0.0",
"multiformats": "^12.1.3",
"next": "^13.5.4",
"next-plausible": "^3.12.4",
"nft.storage": "^7.1.1",
"p-retry": "^6.2.0",
"react": "latest",
Expand Down
32 changes: 24 additions & 8 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 16 additions & 6 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { Metadata } from 'next'
import Provider from '@/components/W3UIProvider'
import Toaster from '@/components/Toaster'
import { Provider as MigrationsProvider } from '@/components/MigrationsProvider'
import PlausibleProvider from 'next-plausible'

export const metadata: Metadata = {
title: 'w3up console',
Expand All @@ -17,12 +18,21 @@ export default function RootLayout ({
return (
<html lang="en">
<body className='bg-grad min-h-screen'>
<Provider>
<MigrationsProvider>
{children}
</MigrationsProvider>
</Provider>
<Toaster />
<PlausibleProvider
domain='console.web3.storage'
trackFileDownloads={true}
trackOutboundLinks={true}
taggedEvents={true}
trackLocalhost={false}
enabled={true}
>
<Provider>
<MigrationsProvider>
{children}
</MigrationsProvider>
</Provider>
<Toaster />
</PlausibleProvider>
</body>
</html>
)
Expand Down
3 changes: 3 additions & 0 deletions src/app/logout/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
import { useW3 } from "@w3ui/react"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { usePlausible } from 'next-plausible'

export default function LogoutPage () {
const [, { logout }] = useW3()
const plausible = usePlausible()

const router = useRouter()
useEffect(function () {
if (logout) {
async function logOutAndRedirect () {
await logout()
plausible('Logout')
router.push('/')
}
logOutAndRedirect()
Expand Down
7 changes: 7 additions & 0 deletions src/app/migration/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import * as NFTStorageMigrator from '@/lib/migrations/nft-storage'
import * as Web3StorageMigrator from '@/lib/migrations/web3-storage'
import { DidIcon } from '@/components/DidIcon'
import { MigrationConfiguration, MigrationSource } from '@/lib/migrations/api'
import { usePlausible } from 'next-plausible'

interface WizardProps {
config: Partial<MigrationConfiguration>
Expand Down Expand Up @@ -168,12 +169,18 @@ function ChooseTargetSpace ({ config, onNext, onPrev }: WizardProps) {
}

function Confirmation ({ config, onNext, onPrev }: WizardProps) {
const plausible = usePlausible()
const [{ spaces }] = useW3()
const space = spaces.find(s => s.did() === config.space)
if (!space) return

const handleNextClick: MouseEventHandler = async e => {
e.preventDefault()
plausible('Migration Started', {
props: {
source: config.source
}
})
onNext(config)
}
return (
Expand Down
29 changes: 25 additions & 4 deletions src/components/Authenticator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client'

import { usePlausible } from 'next-plausible';
import { useEffect, useRef } from 'react'
import {
Authenticator as AuthCore,
useAuthenticator
Expand All @@ -8,6 +9,7 @@ import { Logo } from '../brand'
import { TopLevelLoader } from './Loader'

export function AuthenticationForm (): JSX.Element {
const plausible = usePlausible();
const [{ submitted }] = useAuthenticator()
return (
<div className='authenticator'>
Expand All @@ -24,6 +26,7 @@ export function AuthenticationForm (): JSX.Element {
className='inline-block bg-zinc-950 hover:outline text-white font-bold text-sm px-6 py-2 rounded-full whitespace-nowrap'
type='submit'
disabled={submitted}
onClick={() => plausible('Login Authorization Requested')}
>
Authorize
</button>
Expand All @@ -37,6 +40,7 @@ export function AuthenticationForm (): JSX.Element {
}

export function AuthenticationSubmitted (): JSX.Element {
const plausible = usePlausible();
const [{ email }] = useAuthenticator()

return (
Expand All @@ -49,9 +53,11 @@ export function AuthenticationSubmitted (): JSX.Element {
<p className='pt-2 pb-4'>
Click the link in the email we sent to <span className='font-semibold tracking-wide'>{email}</span> to authorize this agent.
</p>
<AuthCore.CancelButton className='inline-block bg-zinc-950 hover:outline text-white font-bold text-sm px-6 py-2 rounded-full whitespace-nowrap' >
Cancel
</AuthCore.CancelButton>
<span onClick={() => plausible('Login Authorization Cancelled')}>
<AuthCore.CancelButton className='inline-block bg-zinc-950 hover:outline text-white font-bold text-sm px-6 py-2 rounded-full whitespace-nowrap'>
Cancel
</AuthCore.CancelButton>
</span>
</div>
</div>
)
Expand All @@ -63,7 +69,22 @@ export function AuthenticationEnsurer ({
children: JSX.Element | JSX.Element[]
}): JSX.Element {
const [{ submitted, accounts, client }] = useAuthenticator()
const plausible = usePlausible()
const authenticated = !!accounts.length
const previousAuth = useRef<boolean>(authenticated)

useEffect(() => {
console.debug('auth changed:', {
was: previousAuth.current,
now: authenticated
})
// Only track if the transition is from unauthenticated ➝ authenticated
if (!previousAuth.current && authenticated) {
plausible('Login Successful')
Copy link
Member

@alanshaw alanshaw May 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might track a login event when the user is logged in but they freshly visit the site or just refresh the page...

Copy link
Author

@prodalex prodalex May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes it does fire on fresh start and page refresh. however i could not pass events from Authenticator.tsx in the ui-react components as it uses Fragments, would need some workaround. happy for someone to take this over.

}
previousAuth.current = authenticated
}, [authenticated, plausible])

if (authenticated) {
return <>{children}</>
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/SpaceCreator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Loader from '../components/Loader'
import { DID, DIDKey } from '@ucanto/interface'
import { DidIcon } from './DidIcon'
import Link from 'next/link'
import { usePlausible } from 'next-plausible'

export function SpaceCreatorCreating (): JSX.Element {
return (
Expand All @@ -28,6 +29,7 @@ export function SpaceCreatorForm ({
const [created, setCreated] = useState(false)
const [name, setName] = useState('')
const [space, setSpace] = useState<Space>()
const plausible = usePlausible()

function resetForm (): void {
setName('')
Expand Down Expand Up @@ -73,10 +75,12 @@ export function SpaceCreatorForm ({

setSpace(client.spaces().find(s => s.did() === space.did()))
setCreated(true)
plausible('Space Created')
resetForm()
} catch (error) {
/* eslint-disable-next-line no-console */
console.error(error)
plausible('Failed Space Creation')
throw new Error('failed to create space', { cause: error })
}
}
Expand Down
Loading