Tutorial - Svelte analytics set up

[ivanagas]

Strapline

Explain the idea in a sentence or two

Like the other library analytics setups, do one for Svelte where we create a basic app

Why should we do it?

How it will it be useful or interesting for readers/viewers

We don’t have any content for Svelte and two users have asked for it recently, similar tutorials perform well

Headlines options

think of two of three possible headlines we could use

How to set up Svelte analytics, session recordings, feature flags, and more.

Outline

Bullet point outline of structure / questions / topics to be covered

• Build a Svelte app
  • Use SvelteKit
  • Build a simple blog
  • If authentication is simple (like Next-Auth), we can set that up too
• Add PostHog
  • Use script
  • Check browser
  • Get details from .env
  • Show autocapture, session recordings
• Custom event capture
• User identification
  • Reset
• Feature flags

[fev4]

The only thing I would recommend showcasing here, is how to encapsulate the .capture function and generalize it so that it can be reused across the whole SvelteKit app. I don't use autocapture, as I would like total control on what events to send. No problem with showcasing the autocapture though.

In addition, while testing, here are several things I found:

• Need to use the root +layout.svelte to implement the posthog.init
• Need to use browser from $app/environment in order to avoid problems with SSR.
• Need to use page from $app/stores in order to create an observer whenever the route changes in this way, Posthog is able to send pageview events with SPA route changes. Sort of like this:

  $: $page.url.pathname,
  browser &&
    posthog.capture('$pageview');

• Not sure how to use context in order pass down posthog, nor how to pass down Typescript types.

Regarding NextAuth, here are some useful links:

• https://vercel.com/blog/announcing-sveltekit-auth
• https://vercel.com/templates/svelte/sveltekit-authentication
• https://github.com/nextauthjs/sveltekit-auth-example

That's about it for now.