A managed component for PostHog analytics
Common use is currently for Cloudflare Zaraz (it's OSS so hopefully more operators will come).
Until 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" and upload it as a Worker.
curl -fsSL https://bun.sh/install | bash
and press enter to install Bun into the Codespace VMsource /home/codespace/.bashrc
and press enter to allow bun
commandsbun install
to setup the dependenciesCLOUDFLARE_ACCOUNT_ID=<YOUR_ACCOUNT_ID_VALUE> CLOUDFLARE_API_TOKEN=<YOUR_API_TOKEN_VALUE> CLOUDFLARE_EMAIL=<YOUR_EMAIL> 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?n
(no)custom-mc-zaraz-posthog
from the list (this is your Worker that was just uploaded/created)POSTHOG_API_KEY
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)Pageview'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()
in your website/webapp code to trigger for custom events.
You 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.
settings
object (known issue with Zaraz?)Settings are used to configure the tool in a Component Manager config file
string
The PostHog project API Key is the unique write-only key of your PostHog project. How to find your Project API Key
string
The PostHog Project ID is the unique reference of your PostHog project. How to find your Project ID
string
The 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
Fields are properties that can/must be sent with certain events
string
event
is the event name that will be sent with a Track event. Learn more
bun i
bun run test:dev
Using WebCM you are able to run the Managed Component locally.
npx webcm dist/index.js
NOTE: 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
docker 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
OR
docker compose up
The proxied local site will be available at http://localhost:8787/
NOTE: If you are using Docker, you can access a running local site at http://192.168.1.1:8080, 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
).
bun run release
OR
bunx managed-component-to-cloudflare-worker ./dist/index.js zaraz-posthog
Then you can configure it as tool using the Cloudflare Zaraz Dashboard at https://dash.cloudflare.com/?to=/:account/:zone/zaraz/tools-config/tools/catalog, look for "Custom Managed Component" and select the custom-mc-zaraz-posthog
tool. Set the Tool Name to "PostHog" & enable "E-commerce tracking"
Licensed under the Apache License.