Better I18NBetter I18N

Svelte

Content analytics for SvelteKit and standalone Svelte

The Svelte adapter is initialized once at app boot and exposes a track() function plus an auto-view tracker for routes.

Install

npm install @better-i18n/content
bun add @better-i18n/content
pnpm add @better-i18n/content
yarn add @better-i18n/content

Configure

Add your Project ID and API key to .env. Find both in the dashboard under Settings → General and Settings → API Keys.

.env
PUBLIC_BETTER_I18N_PROJECT_ID=your-org/your-project
PUBLIC_BETTER_I18N_KEY=bi_pub_xxxxx

Setup

src/routes/+layout.ts
import { initContent } from '@better-i18n/content/adapters/svelte'
import { PUBLIC_BETTER_I18N_PROJECT_ID, PUBLIC_BETTER_I18N_KEY } from '$env/static/public'

initContent({
  projectId: PUBLIC_BETTER_I18N_PROJECT_ID,
  apiKey: PUBLIC_BETTER_I18N_KEY,
})

Track a view

src/routes/blog/[slug]/+page.svelte
<script lang="ts">
  import { onMount } from 'svelte'
  import { track } from '@better-i18n/content/adapters/svelte'

  export let data

  onMount(() => {
    track('content.view', {
      entryId: data.post.id,
      contentModel: 'blog',
      entrySlug: data.post.slug,
      language: data.post.locale,
    })
  })
</script>

<article>{@html data.post.body}</article>

Next steps

On this page