search

mountainash / posthog-managed-component

A Managed Component for sending events to PostHog
Other
9 stars 2 forks source link

Add end user setup instructions to README #2

Closed mountainash closed 2 months ago

mountainash commented 3 months ago

Instructions

Zaraz / Cloudflare Worker

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.

  1. From this projects GitHub root, expand the green "Code" button
  2. Choose the "Codespaces" tab
  3. Click "Create codespace on develop"
  4. At the Terminal command line enter curl -fsSL https://bun.sh/install | bash and press enter to install Bun into the Codespace VM
  5. Enter source /home/codespace/.bashrc and press enter to allow bun commands
  6. Enter bun install to setup the dependencies
  7. Enter CLOUDFLARE_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?
  8. Follow the prompts to setup the Worker. For the "Does your component use any of these methods" question you can answer n (no)
  9. Once complete, you can stop your Github Codespace
  10. Login to the Cloudflare dash, and go to the Zaraz Dashboard
  11. From the new tools screen, choose "Custom Managed Component"
  12. 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)
  13. 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
  14. On the "Last step" screen change the tool name to "PostHog Managed Component"
    • Click the first "Add Field" button in the "Settings" section
    • Add a new custom field named "POSTHOG_API_KEY"
    • Click "Confirm"
    • In the value field enter your Project API Key (not your personal API key). You can find this in your PostHog project settings
    • (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)
  15. Click "Save" to enable your new Zaraz Posthog Managed Component

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.