{"id":17938790,"url":"https://github.com/mountainash/posthog-managed-component","last_synced_at":"2026-03-08T10:36:14.487Z","repository":{"id":231714933,"uuid":"782452676","full_name":"mountainash/posthog-managed-component","owner":"mountainash","description":"A Managed Component for sending events to PostHog","archived":false,"fork":false,"pushed_at":"2024-10-01T21:08:46.000Z","size":216,"stargazers_count":15,"open_issues_count":7,"forks_count":2,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-03-24T15:47:31.999Z","etag":null,"topics":["hacktoberfest","managedcomponent","posthog","zaraz"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mountainash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["mountainash"],"custom":["https://www.buymeabeer.com/mountainash"]}},"created_at":"2024-04-05T10:31:07.000Z","updated_at":"2024-12-06T11:34:53.000Z","dependencies_parsed_at":"2024-04-12T16:39:27.183Z","dependency_job_id":"212f957c-412a-470d-8214-5577937b5dc1","html_url":"https://github.com/mountainash/posthog-managed-component","commit_stats":null,"previous_names":["mountainash/posthog-managed-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mountainash%2Fposthog-managed-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mountainash%2Fposthog-managed-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mountainash%2Fposthog-managed-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mountainash%2Fposthog-managed-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mountainash","download_url":"https://codeload.github.com/mountainash/posthog-managed-component/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248266458,"owners_count":21075166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","managedcomponent","posthog","zaraz"],"created_at":"2024-10-29T00:06:22.741Z","updated_at":"2026-03-08T10:36:14.438Z","avatar_url":"https://github.com/mountainash.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mountainash","https://www.buymeabeer.com/mountainash"],"categories":["Managed Components"],"sub_categories":["Community Managed Components"],"readme":"# PostHog Managed Component\n\n\u003e A managed component for PostHog analytics\n\nCommon use is currently for [Cloudflare Zaraz](https://www.cloudflare.com/application-services/products/zaraz/) (it's OSS so hopefully more operators will come).\n\n![PostHog](assets/icon.svg)\n\n## How to use\n\n### Zaraz / Cloudflare Worker\n\nUntil this component is an \"official\" Managed Component we need to manually host the MC in a Cloudflare Worker. Fortunately this is easy with a pre-built script to package this \"[posthog-managed-component](https://github.com/mountainash/posthog-managed-component)\" and upload it as a Worker.\n\n1. From [this projects GitHub root](https://github.com/mountainash/posthog-managed-component), expand the green **Code** button\n2. Choose the **Codespaces** tab\n3. Click **Create codespace on develop**\n4. At the Terminal command line enter `curl -fsSL https://bun.sh/install | bash` and press enter to install Bun into the Codespace VM\n5. Enter `source /home/codespace/.bashrc` and press enter to allow `bun` commands\n6. Enter `bun install` to setup the dependencies\n7. Enter `CLOUDFLARE_ACCOUNT_ID=\u003cYOUR_ACCOUNT_ID_VALUE\u003e\nCLOUDFLARE_API_TOKEN=\u003cYOUR_API_TOKEN_VALUE\u003e\nCLOUDFLARE_EMAIL=\u003cYOUR_EMAIL\u003e bun run release` to run the pre-made script to build the code and add it to a new Cloudflare Worker. Replace obvious placeholders with details from your Cloudflare account. [Help?](https://developers.cloudflare.com/workers/wrangler/system-environment-variables/#supported-environment-variables)\n8. Follow the prompts to setup the Worker. For the \"Does your component use any of these methods\" question you can answer `n` (no)\n9. Once complete, you can stop your Github Codespace\n10. Login to the Cloudflare dash, and go to the [Zaraz Dashboard](https://dash.cloudflare.com/?to=/:account/:zone/zaraz/tools-config/tools/catalog)\n11. From the new tools screen, choose **Custom Managed Component**\n12. In the modal proceed to the **Select Custom MC** screen and choose `custom-mc-zaraz-posthog` from the list (this is your Worker that was just uploaded/created)\n13. On the **Grant permissions** screen all permissions can be unset except **Server network requests** - this is needed to send requests to PostHog. Enable **Access client key-value store** if you want analytics to collated to a user over multiple sessions, else every session (even by the same user) will be logged as a new unique user\n14. On the **Last step** screen change the tool name to **PostHog Managed Component**\n    - Click the first **Add Field** button in the **Settings** section\n    - Add a new custom field named `POSTHOG_API_KEY`\n    - Click **Confirm**\n    - In the value field enter your **Project API Key** (_not your personal API key_). You can find this in your PostHog project settings\n    - _(optional)_ add another custom settings field with a name of `POSTHOG_URL` if your PostHog instance is not in the US. If your PostHog Project Settings say **EU Cloud** set this to `https://eu.i.posthog.com` (no trailing-slash)\n15. Click **Save** to enable your new Zaraz Posthog Managed Component\n\nPageview's will now be tracked for all \"orange cloud\" enabled domains on your account (unless you have a Rule overriding this). You can also use use the [`zaraz.track()`](https://developers.cloudflare.com/zaraz/web-api/track/) in your website/webapp code to trigger for custom events.\n\nYou can use `zaraz.track('identify', { distinct_id: 'data' })` to associate a user identifier of your choice to previously anonymous (and future) logs from the same user.\n\n## TODO:\n\n### Basics\n- [x] pull users PostHog API key from environment\n- [x] send page views to PostHog\n  - [x] send URL\n  - [x] send referrer\n  - [x] send title\n- [x] send events to PostHog\n- [x] send user data to PostHog\n- [x] send custom data to PostHog\n- [ ] get Zaraz Settings variable values passing in to `settings` object ([known issue with Zaraz?](https://discord.com/channels/595317990191398933/1225979924628766823/1226893601590481066))\n\n### Extra Features\n- [ ] Session Replay\n- [ ] Feature Flags\n- [ ] A/B Testing\n- [ ] Surveys\n\n### Discovery\n- [x] [add MC to](https://github.com/managed-components/docs/pull/10) \u003chttps://managedcomponents.dev/components/\u003e\n- [ ] add MC to \u003chttps://github.com/PostHog/integrations-repository/blob/main/integrations.json\u003e\n- [ ] mention MC on [PostHog Docs](https://posthog.com/docs/advanced/proxy/cloudflare)\n  - [ ] \u0026 [here](https://github.com/PostHog/integrations-repository/blob/main/integrations.json)\n- [x] mention MC on [Discord](https://discord.com/channels/595317990191398933/917505178016579605/1227513906381983745)\n- [x] use bun bundler [#1](https://github.com/mountainash/posthog-managed-component/issues/1)\n\n# PostHog Managed Component\n\n## ⚙️ Tool Settings\n\n\u003e Settings are used to configure the tool in a [Component Manager config file](./docker/webcm.config.ts.docker-example)\n\n### PostHog API Key `string`\n\nThe PostHog project API Key is the unique write-only key of your PostHog project. [How to find your Project API Key](https://app.posthog.com/project/settings)\n\n### PostHog Project ID `string`\n\nThe PostHog Project ID is the unique reference of your PostHog project. [How to find your Project ID](https://app.posthog.com/project/settings)\n\n### PostHog URL `string`\n\nThe PostHog API URL could be \"eu.i.posthog.com\" for the EU region or your self-hosted URL. Defaults to `https://us.i.posthog.com`\n\n## 🧱 Fields Description\n\n\u003e Fields are properties that can/must be sent with certain events\n\n### Track event name `string`\n\n`event` is the event name that will be sent with a Track event. [Learn more](https://posthog.com/tutorials/api-capture-events)\n\n## Component Development\n\n[![Released under the Apache license](https://img.shields.io/badge/license-apache-blue.svg)](./LICENSE)\n[![PRs welcome!](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/mountainash/posthog-managed-component/pulls)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n1. Make sure you're running [Bun](https://bun.sh/)\n2. Install dependencies with `bun i`\n3. Run unit test watcher with `bun run test:dev`\n\n## Testing\n\nUsing [WebCM](https://webcm.dev/getting-started/install) you are able to run the Managed Component locally.\n\n```bash\nnpx webcm dist/index.js\n```\n\n**NOTE:** [WebCM](https://github.com/cloudflare/webcm) doesn't run on newer versions of NodeJS, so you may need to use `nvm` to switch to an older version or use the following Docker command\n\n```bash\ndocker run -v $PWD/docker/:/app/ -v $PWD/dist/:/app/components/posthog/ -w /app/ -p 8080:8080 -p 8787:8787 node:18 npx webcm ./components/posthog/index.js\n```\n\nOR\n\n```bash\ndocker compose up\n```\n\nThe proxied local site will be available at \u003chttp://localhost:8787/\u003e\n\n**NOTE:** If you are using Docker, you can access a running local site at \u003chttp://192.168.1.1:8080\u003e, but you need to set `target:` to an address the container can connect to (`localhost` in the container, is not the same as `localhost` when called on your host) and `hostname: 'webcm'` in your `webcm.config.ts` file (see `./docker/webcm.config.ts.docker-example` as a starting point and rename it to `webcm.config.ts`).\n\n## Deployment\n\n```bash\nbun run release\nOR\nbunx managed-component-to-cloudflare-worker ./dist/index.js zaraz-posthog\n```\n\nThen you can configure it as tool using the Cloudflare Zaraz Dashboard at \u003chttps://dash.cloudflare.com/?to=/:account/:zone/zaraz/tools-config/tools/catalog\u003e, look for \"Custom Managed Component\" and select the `custom-mc-zaraz-posthog` tool. Set the Tool Name to \"PostHog\" \u0026 enable \"E-commerce tracking\"\n\n## Resources\n\n- [Managed Components docs](https://managedcomponents.dev/)\n- [Cloudflare Zaraz](https://developers.cloudflare.com/zaraz/)\n- [WebCM](https://webcm.dev/getting-started/install)\n- [Cloudflare Workers](https://developers.cloudflare.com/workers/)\n- [Blog: Open source Managed Components for Cloudflare Zaraz](https://blog.cloudflare.com/zaraz-open-source-managed-components-and-webcm/)\n- Support:\n  - [Cloudflare Workers Discord](https://discord.gg/cloudflaredev)\n  - \u003czaraz@cloudflare.com\u003e\n\n## 📝 License\n\nLicensed under the [Apache License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmountainash%2Fposthog-managed-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmountainash%2Fposthog-managed-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmountainash%2Fposthog-managed-component/lists"}