Skip to content

feat: add PostHog analytics integration#1

Draft
posthog-eu[bot] wants to merge 1 commit into
mainfrom
posthog/instrumentation-a23510
Draft

feat: add PostHog analytics integration#1
posthog-eu[bot] wants to merge 1 commit into
mainfrom
posthog/instrumentation-a23510

Conversation

@posthog-eu

@posthog-eu posthog-eu Bot commented Jul 15, 2026

Copy link
Copy Markdown

Why

Open Knowledge Belgium wanted product analytics on the new marketing site to understand how visitors engage with activities, stories, and the core conversion flows (newsletter signup, "Get involved", hero CTAs). This PR ships the PostHog integration produced by PostHog's setup wizard.

Summary

Adds PostHog analytics using the posthog-js SDK. PostHog is initialised through a reusable inline snippet component included in the base layout, so every page captures $pageview events and session replays automatically. Eight custom events are captured at key interaction points across the site.

Files changed:

  • src/components/posthog.astro — new inline PostHog initialisation snippet (is:inline, reads PUBLIC_POSTHOG_PROJECT_TOKEN / PUBLIC_POSTHOG_HOST).
  • src/layouts/BaseLayout.astro — includes <PostHog /> in every page <head>.
  • src/components/react/NewsletterCTA.tsx — captures newsletter_subscribed.
  • src/components/react/Navbar.tsx — captures get_involved_clicked.
  • src/components/react/Hero.tsx — captures hero_cta_clicked.
  • src/pages/activities/[slug].astro — captures activity_viewed, activity_website_clicked, activity_revive_clicked.
  • src/pages/index.astro — captures start_activity_clicked.
  • src/pages/stories/[slug].astro — captures story_viewed.
  • package.json / pnpm-lock.yaml — adds posthog-js.
  • pnpm-workspace.yaml — build-deps allowlist entry.

Custom events captured:

Event Description File
newsletter_subscribed User submitted the newsletter signup form with their email address. src/components/react/NewsletterCTA.tsx
activity_website_clicked User clicked the "Visit website" button on an activity detail page. src/pages/activities/[slug].astro
activity_revive_clicked User clicked "I'd like to pick this up" on a dormant activity. src/pages/activities/[slug].astro
get_involved_clicked User clicked the "Get involved" CTA button in the navigation bar. src/components/react/Navbar.tsx
hero_cta_clicked User clicked the primary or secondary CTA button in the homepage hero. src/components/react/Hero.tsx
start_activity_clicked User clicked "Start an activity" on the homepage empty-activities band. src/pages/index.astro
activity_viewed User viewed an activity detail page — top of funnel for activity engagement. src/pages/activities/[slug].astro
story_viewed User viewed a story detail page — top of funnel for content engagement. src/pages/stories/[slug].astro

Insights and dashboards created

Type Name Link
Dashboard Analytics basics (wizard) https://eu.posthog.com/project/224662/dashboard/821904
Insight Newsletter subscriptions (wizard) https://eu.posthog.com/project/224662/insights/yQsdjJqo
Insight Activity engagement funnel (wizard) https://eu.posthog.com/project/224662/insights/EIa9yJi1
Insight Get involved CTA clicks (wizard) https://eu.posthog.com/project/224662/insights/VHANvFjc
Insight Hero CTA clicks by type (wizard) https://eu.posthog.com/project/224662/insights/kvWdvBgG
Insight Activity revival interest (wizard) https://eu.posthog.com/project/224662/insights/Lcj0Z9pr

How to verify

  1. Deploy this branch to production (or run locally with the two variables from the section below set in a .env file, then pnpm dev).
  2. Open the site and click around — visit an activity, a story, submit the newsletter form, click the hero and "Get involved" CTAs.
  3. In PostHog, open Activity → explore — you should see $pageview events plus the custom events above arriving within a minute.
  4. Check the Analytics basics (wizard) dashboard for the instrumented insights populating.

Environment variables (action needed before PostHog works)

This site is deployed to GitHub Pages, built by the GitHub Actions workflow at .github/workflows/deploy.yml (using withastro/action). Because it's a static site, the PostHog values are baked into the pages at build time — so they must be available to the pnpm build step that runs in GitHub Actions.

Environment variables are named settings passed to the app when it builds, so the code can read them (like the PostHog token below) without hardcoding them. This repository intentionally keeps .env files out of version control (they're in .gitignore), and the deploy workflow doesn't currently read any of them, so I could not set these up automatically. Until they're provided, posthog.init('') runs with an empty token and no data reaches PostHog.

The two values needed:

Name Value
PUBLIC_POSTHOG_PROJECT_TOKEN phc_vQaRxbWFt9SCf9kPRNxf7ePVRCTTt4EYweyNY78nykcx
PUBLIC_POSTHOG_HOST https://eu.i.posthog.com

These are public values — the token is a client-side PostHog project key that ends up visible in the site's JavaScript anyway, so it's safe to place in the build config.

To make them reach the production build, add an env: block to the "Build with Astro" step in .github/workflows/deploy.yml:

      - name: Build with Astro
        uses: withastro/action@v3
        env:
          PUBLIC_POSTHOG_PROJECT_TOKEN: phc_vQaRxbWFt9SCf9kPRNxf7ePVRCTTt4EYweyNY78nykcx
          PUBLIC_POSTHOG_HOST: https://eu.i.posthog.com

After that change is merged to main, the next deploy will build the site with PostHog enabled — no further action needed. (I've left the workflow untouched in this PR so a maintainer can review and apply that change deliberately.)

Created with PostHog Code

@posthog-eu
feat: add PostHog analytics integration
99d3713 
Integrate PostHog analytics via the setup wizard. Initialises PostHog through a
reusable src/components/posthog.astro inline snippet included in BaseLayout, capturing
pageviews and session replays on every page, plus custom events at key interaction
points (newsletter signup, activity/story views, CTA clicks).

Generated-By: PostHog Code
Task-Id: 369d2cea-ed2a-4d9c-bc40-ed1132a3b4e7
@posthog-eu

posthog-eu Bot commented Jul 15, 2026

Copy link
Copy Markdown
Author

CI note: No required checks run on this PR. The repository's only GitHub Actions workflow (.github/workflows/deploy.yml) triggers only on push to main (and workflow_dispatch), not on pull_request, so nothing runs against this branch. This is the existing CI configuration, unrelated to the PostHog integration — I've left .github/workflows/** untouched. The integration builds cleanly locally (pnpm build → 150 pages, exit 0).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants