Svelte

Last updated:

|Edit this page

PostHog makes it easy to get data about traffic and usage of your Svelte app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more.

This guide walks you through integrating PostHog into your SvelteKit app using the JavaScript Web and Node.js SDKs.

Client-side setup

Install posthog-js using your package manager:

Terminal
yarn add posthog-js
# or
npm install --save posthog-js

Then, if you haven't created a root layout already, create a new file called +layout.js in your src/routes folder In this file, check the environment is the browser, and initialize PostHog if so. You can get both your API key and instance address in your project settings:

routes/+layout.js
import posthog from 'posthog-js'
import { browser } from '$app/environment';
export const load = async () => {
if (browser) {
posthog.init(
'<ph_project_api_key>',
{ api_host: https://us.i.posthog.com }
)
}
return
};

Tracking pageviews and pageleaves

PostHog only captures pageview events when a page load is fired. Since Svelte creates a single-page app, this only happens once, and the router handles subsequent page changes.

If we want to capture every route change, we must write code to capture pageviews that integrates with the router.

To do this, set up beforeNavigate and afterNavigate interceptors in a new file routes/+layout.svelte to capture $pageview and $pageleave events:

+layout.svelte
<script>
import posthog from 'posthog-js'
import { browser } from '$app/environment';
import { beforeNavigate, afterNavigate } from '$app/navigation';
if (browser) {
beforeNavigate(() => posthog.capture('$pageleave'));
afterNavigate(() => posthog.capture('$pageview'));
}
</script>
<slot></slot>

To make sure we don't double count pageviews and pageleaves, we also need to adjust our PostHog initialization in routes/+layout.js to set capture_pageview and capture_pageleave to false.

routes/+layout.js
import posthog from 'posthog-js'
import { browser } from '$app/environment';
export const load = async () => {
if (browser) {
posthog.init(
'<ph_project_api_key>',
{
api_host:https://us.i.posthog.com,
capture_pageview: false,
capture_pageleave: false
}
)
}
return
};

Server-side setup

Install posthog-node using your package manager:

Terminal
yarn add posthog-node
# or
npm install --save posthog-node

Then, initialize the PostHog Node client where you'd like to use it on the server side. For example, in a load function:

routes/+page.server.js
import { PostHog } from 'posthog-node';
export async function load() {
const posthog = new PostHog('<ph_project_api_key>',
{ host: https://us.i.posthog.com });
posthog.capture({
distinctId: 'distinct_id_of_the_user',
event: 'event_name',
})
await posthog.shutdown()
}

Note: Make sure to always call posthog.shutdown() after capturing events from the server-side. PostHog queues events into larger batches, and this call forces all batched events to be flushed immediately.

Next steps

For any technical questions for how to integrate specific PostHog features into Svelte (such as analytics, feature flags, A/B testing, surveys, etc.), have a look at our JavaScript Web and Node SDK docs.

Alternatively, the following tutorials can help you get started:

Questions?

Was this page useful?

Next article

Vue.js

PostHog makes it easy to get data about usage of your Vue.js app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more. This guide walks you through integrating PostHog into your app for both Vue.js major versions 2 and 3 . We'll use the JavaScript SDK. For integrating PostHog into a Nuxt.js app, see our Nuxt guide . Prerequisites To follow this guide along, you need: a PostHog account (either Cloud…

Read next article