Posthog tracking for video embeds starts

[im2nguyen]

🔗 Relevant links

This PR updates the VideoEmbed to send a custom PostHog event video_start whenever someone starts a video play. This works on both wistia and youtube videos.

In addition, it adds VideoEmbed as an available MDX component for docs. This lets us use VideoEmbed instead of iframe for videos in documentation, so the behavior is consistent throughout the platform.

• Preview link 🔎
• Asana task 🎟️

🗒️ What

🤷 Why

🛠️ How

📸 Design Screenshots

🧪 Testing

Related PR: hashicorp/terraform-docs-common#866

1. Go to dev-portal and check out the video-embed-posthog-tracking branch
2. Build the image locally (docker build . -t dev-portal-video-tracking)
3. Update DOCKER_IMAGE_LOCAL="dev-portal-local" in this repo's website/Makefile file to dev-portal-video-tracking.
4. Start local preview (make website/local). You may need to add .env.local to website.
5. Navigate to /terraform/cloud-docs/recommended-practices
6. Verify the videoembed works as expected, check posthog to see if video_play event is triggered

💭 Anything else?

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
dev-portal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2025 2:59am

[github-actions]

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

Forty-one Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/[productSlug]/docs	184.81 KB (🟡 +10.38 KB)	379.69 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]	170.92 KB (🟢 -440 B)	365.8 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion]	170.92 KB (🟢 -439 B)	365.8 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion]/components/[componentType]/[componentSlug]	176.84 KB (🟢 -439 B)	371.72 KB
/[productSlug]/tutorials/[collectionSlug]	193.52 KB (🟡 +333 B)	388.4 KB
/boundary/docs/[...page]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/consul/api-docs/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/consul/commands/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/consul/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB
/hcp/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB
/nomad/api-docs/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/nomad/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB
/nomad/intro/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/nomad/plugins/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/nomad/tools/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/packer/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB
/packer/guides/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/sentinel/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB
/terraform/cdktf/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/terraform/cli/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/terraform/cloud-docs/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/terraform/cloud-docs/agents/[[...page]]	182.83 KB (🟡 +10.38 KB)	377.71 KB
/terraform/docs/[...page]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/terraform/enterprise/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.71 KB
/terraform/internals/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.71 KB
/terraform/intro/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/terraform/language/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.71 KB
/terraform/plugin/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/terraform/plugin/framework/[[...page]]	182.83 KB (🟡 +10.38 KB)	377.71 KB
/terraform/plugin/log/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.71 KB
/terraform/plugin/mux/[[...page]]	182.83 KB (🟡 +10.38 KB)	377.71 KB
/terraform/plugin/sdkv2/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.71 KB
/terraform/plugin/testing/[[...page]]	182.83 KB (🟡 +10.38 KB)	377.71 KB
/terraform/registry/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.71 KB
/vagrant/docs/[...page]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/vagrant/intro/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/vagrant/vagrant-cloud/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/validated-designs/[...slug]	180.33 KB (🟡 +10.79 KB)	375.22 KB
/vault/api-docs/[[...page]]	182.82 KB (🟡 +10.38 KB)	377.7 KB
/vault/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB
/waypoint/docs/[...page]	182.81 KB (🟡 +10.38 KB)	377.7 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[prestonbourne]

nit picky but since this is defined in hooks/use-posthog-analytics

i'd only expect hooks and specifically the usePosthogAnalytics hook to be here

imo putting this in the lib directory lib/posthog-events or something similar sets dev-portal up quite nicely to begin scaling with posthog custom events 😄

[im2nguyen]

just updated, thanks for the feedback 😄

[heatlikeheatwave]

Is there an asana task for this?

[prestonbourne]

looks good from my pov but deferring final approval to a dev portal engineer 👍🏽

[im2nguyen]

@heatlikeheatwave this is the Asana ticket for it: https://app.asana.com/0/1202801212949828/1209530615984378/f