PostHog

Installing

Install the package;

npm install posthog-js

Initalize site-wide in your site.ts

At the top under imports, add;

import posthog from 'posthog-js'

In the setup() method, use the posthog.init code given to you;

e.g.;

posthog.init('phc_YOUR_KEY', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' })

Note; you can choose to initialize only on production sites, e.g.;

// Init Posthog
// Only on non-staging pages 
if (!window.location.host.endsWith('.webflow.io')) {
  posthog.init('phc_YOUR_KEY', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' })
}

Usage Notes

In the exec() method, you'll perform your actual tests.

Feature Flags

Good for;

• Switching on or off specific features

• Doing a limited deployment of a feature to a smaller audience

if (posthog.isFeatureEnabled('flag-key') ) {
    // Do something differently for this user

    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}

Experiments (A/B tests)

• Good for handling variants

if (posthog.getFeatureFlag('flag-key')  == 'variant-key') { // replace 'variant-key' with the key of your variant
    // Do something differently for this user
    
    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}