Svelte · Instrument Product Analytics · PostHog/skills · Skills Docs

Svelte · Instrument Product Analytics · PostHog/skills · Skills Docs

If your site sets a Content-Security-Policy, it needs to allow PostHog. This applies to the snippet and to package installs alike: the SDK lazy-loads extra bundles (session replay, surveys) from PostHog’s CDN, and sends events to the ingestion host. PostHog serves from subdomains of posthog.com that change over time, so allow the wildcard:
script-src 'self' https://*.posthog.com;
connect-src 'self' https://*.posthog.com;
worker-src 'self' blob: data:;
script-src covers the snippet and the lazy-loaded bundles, connect-src covers event ingestion and feature flags, and worker-src covers session replay. The toolbar needs a few more (opens in a new tab), or use a reverse proxy (opens in a new tab) so everything is first-party. Failing to do so causes silent failures where capture and identify calls never send, so the integration looks complete while zero events arrive. Remember connect-src falls back to default-src, so default-src 'self' blocks event delivery even when the script itself is bundled.

import posthog from 'posthog-js'
import { browser } from '$app/environment';

export const load = async () => {
  if (browser) {
    posthog.init('<ph_project_token>', {
      api_host: 'https://us.i.posthog.com',
      defaults: '2026-05-30',
    })
  }

  return
};

import { PostHog } from 'posthog-node';

export async function load() {
  const posthog = new PostHog('<ph_project_token>', { host: 'https://us.i.posthog.com' });

  posthog.capture({
    distinctId: 'distinct_id_of_the_user',
    event: 'event_name',
  })

  await posthog.shutdown()
}

<script>
  import posthog from 'posthog-js'
  import { browser } from '$app/environment'
  import { onMount } from 'svelte'

  let coolFeature = $state(false)

  onMount(() => {
    if (browser) {
      coolFeature = posthog.isFeatureEnabled('cool-feature')
    }
  })
</script>

{#if coolFeature}
  <p>Welcome to the cool feature!</p>
{/if}

import { PostHog } from 'posthog-node';

const client = new PostHog(
  '<ph_project_token>',
  { host: 'https://us.i.posthog.com' }
);

export async function load() {
  const distinctId = 'distinct_id_of_the_user';

  const megaFeature = await client.isFeatureEnabled(
    'mega-feature',
    distinctId
  );

  return {
    megaFeature
  };
}