From eb672ab19700ee3399cb84185102e671bc242e45 Mon Sep 17 00:00:00 2001 From: Tu Nguyen Date: Mon, 3 Mar 2025 11:19:08 -0800 Subject: [PATCH 1/3] Experiment with posthog tracking for video embeds starts --- src/components/video-embed/index.tsx | 4 ++++ src/hooks/use-posthog-analytics.ts | 10 ++++++++++ 2 files changed, 14 insertions(+) diff --git a/src/components/video-embed/index.tsx b/src/components/video-embed/index.tsx index f2f52cff44..6d2981a2a4 100644 --- a/src/components/video-embed/index.tsx +++ b/src/components/video-embed/index.tsx @@ -15,6 +15,7 @@ import { useMilestones, } from './helpers' import s from './video-embed.module.css' +import { onVideoStart } from 'hooks/use-posthog-analytics' /** * MAX_PLAYBACK_SPEED is based on max speeds for YouTube & Wistia. @@ -142,6 +143,9 @@ function VideoEmbed({ {...reactPlayerProps} config={config} url={url} + onStart={() => { + onVideoStart(url) + }} onDuration={setDuration} progressInterval={PROGRESS_INTERVAL} onProgress={({ playedSeconds }: { playedSeconds: number }) => { diff --git a/src/hooks/use-posthog-analytics.ts b/src/hooks/use-posthog-analytics.ts index 01c6acc2a7..6d8a670b76 100644 --- a/src/hooks/use-posthog-analytics.ts +++ b/src/hooks/use-posthog-analytics.ts @@ -29,6 +29,16 @@ function onRouteChangeComplete() { window.posthog.capture('$pageview') } +/** + * Enables PostHog video start tracking + */ +export function onVideoStart(video_id: string) { + console.log('onVideoStart', video_id) + if (!window?.posthog) return + console.log('onVideoStart - posthog', video_id) + window.posthog.capture('video_start', { video_id }) +} + /** * Enables PostHog page view tracking on route changes */ From a0642dc1cda4cbb3fee6ff1fb8a6ca8bbb50ab46 Mon Sep 17 00:00:00 2001 From: Tu Nguyen Date: Thu, 20 Mar 2025 08:31:28 -0700 Subject: [PATCH 2/3] add videoembeds to docs pages, use same posthog tracking --- src/components/video-embed/index.tsx | 4 ++-- src/hooks/use-posthog-analytics.ts | 4 +--- .../sidebar-sidecar/utils/_local_platform-docs-mdx/index.tsx | 2 ++ 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/video-embed/index.tsx b/src/components/video-embed/index.tsx index 6d2981a2a4..3d1522e225 100644 --- a/src/components/video-embed/index.tsx +++ b/src/components/video-embed/index.tsx @@ -15,7 +15,7 @@ import { useMilestones, } from './helpers' import s from './video-embed.module.css' -import { onVideoStart } from 'hooks/use-posthog-analytics' +import { trackVideoStart } from 'hooks/use-posthog-analytics' /** * MAX_PLAYBACK_SPEED is based on max speeds for YouTube & Wistia. @@ -144,7 +144,7 @@ function VideoEmbed({ config={config} url={url} onStart={() => { - onVideoStart(url) + trackVideoStart(url) }} onDuration={setDuration} progressInterval={PROGRESS_INTERVAL} diff --git a/src/hooks/use-posthog-analytics.ts b/src/hooks/use-posthog-analytics.ts index 6d8a670b76..c91badc91c 100644 --- a/src/hooks/use-posthog-analytics.ts +++ b/src/hooks/use-posthog-analytics.ts @@ -32,10 +32,8 @@ function onRouteChangeComplete() { /** * Enables PostHog video start tracking */ -export function onVideoStart(video_id: string) { - console.log('onVideoStart', video_id) +export function trackVideoStart(video_id: string) { if (!window?.posthog) return - console.log('onVideoStart - posthog', video_id) window.posthog.capture('video_start', { video_id }) } diff --git a/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/index.tsx b/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/index.tsx index 5cf9856c35..368d1a9f43 100644 --- a/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/index.tsx +++ b/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/index.tsx @@ -7,6 +7,7 @@ import React from 'react' import { DocsEnterpriseAlert } from './components/enterprise-alert' import Image from 'components/image' import { ImageProps } from 'components/image/types' +import VideoEmbed from 'components/video-embed' // This function returns a simple object containing the default components // The `additionalComponents` param is purely for convenience. @@ -37,5 +38,6 @@ function _defaultComponents() { return { EnterpriseAlert: DocsEnterpriseAlert, img: makeImageElement({ noBorder: true }), + VideoEmbed, } } From aae43f35db0c7a34a8623e2953d929b5553812da Mon Sep 17 00:00:00 2001 From: Tu Nguyen Date: Thu, 20 Mar 2025 19:52:30 -0700 Subject: [PATCH 3/3] move posthog tracking function into its own file --- src/components/video-embed/index.tsx | 2 +- src/hooks/use-posthog-analytics.ts | 8 -------- src/lib/posthog-events.ts | 12 ++++++++++++ 3 files changed, 13 insertions(+), 9 deletions(-) create mode 100644 src/lib/posthog-events.ts diff --git a/src/components/video-embed/index.tsx b/src/components/video-embed/index.tsx index 3d1522e225..941644b7d2 100644 --- a/src/components/video-embed/index.tsx +++ b/src/components/video-embed/index.tsx @@ -15,7 +15,7 @@ import { useMilestones, } from './helpers' import s from './video-embed.module.css' -import { trackVideoStart } from 'hooks/use-posthog-analytics' +import { trackVideoStart } from 'lib/posthog-events' /** * MAX_PLAYBACK_SPEED is based on max speeds for YouTube & Wistia. diff --git a/src/hooks/use-posthog-analytics.ts b/src/hooks/use-posthog-analytics.ts index c91badc91c..01c6acc2a7 100644 --- a/src/hooks/use-posthog-analytics.ts +++ b/src/hooks/use-posthog-analytics.ts @@ -29,14 +29,6 @@ function onRouteChangeComplete() { window.posthog.capture('$pageview') } -/** - * Enables PostHog video start tracking - */ -export function trackVideoStart(video_id: string) { - if (!window?.posthog) return - window.posthog.capture('video_start', { video_id }) -} - /** * Enables PostHog page view tracking on route changes */ diff --git a/src/lib/posthog-events.ts b/src/lib/posthog-events.ts new file mode 100644 index 0000000000..dfde3366ed --- /dev/null +++ b/src/lib/posthog-events.ts @@ -0,0 +1,12 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +/** + * Enables PostHog video start tracking + */ +export function trackVideoStart(video_id: string) { + if (!window?.posthog) return + window.posthog.capture('video_start', { video_id }) +}