diff --git a/src/components/video-embed/index.tsx b/src/components/video-embed/index.tsx index f2f52cff44..3d1522e225 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 { trackVideoStart } 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={() => { + trackVideoStart(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..c91badc91c 100644 --- a/src/hooks/use-posthog-analytics.ts +++ b/src/hooks/use-posthog-analytics.ts @@ -29,6 +29,14 @@ 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/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, } }