integration-sveltekit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PostHog integration for SvelteKit

SvelteKit应用的PostHog集成

This skill helps you add PostHog analytics to SvelteKit applications.

本技能可帮助你为SvelteKit应用添加PostHog分析功能。

Workflow

操作流程

Follow these steps in order to complete the integration:

```
basic-integration-1.0-begin.md
```
- PostHog Setup - Begin ← Start here
```
basic-integration-1.1-edit.md
```
- PostHog Setup - Edit
```
basic-integration-1.2-revise.md
```
- PostHog Setup - Revise
```
basic-integration-1.3-conclude.md
```
- PostHog Setup - Conclusion

请按照以下步骤完成集成：

```
basic-integration-1.0-begin.md
```
- PostHog设置 - 开始 ← 从此处开始
```
basic-integration-1.1-edit.md
```
- PostHog设置 - 编辑
```
basic-integration-1.2-revise.md
```
- PostHog设置 - 修订
```
basic-integration-1.3-conclude.md
```
- PostHog设置 - 完成

Reference files

参考文件

```
references/EXAMPLE.md
```
- SvelteKit example project code
```
references/svelte.md
```
- Svelte - docs
```
references/identify-users.md
```
- Identify users - docs

references/basic-integration-1.0-begin.md

- PostHog setup - begin

references/basic-integration-1.1-edit.md

- PostHog setup - edit

references/basic-integration-1.2-revise.md

- PostHog setup - revise

references/basic-integration-1.3-conclude.md

- PostHog setup - conclusion

The example project shows the target implementation pattern. Consult the documentation for API details.

```
references/EXAMPLE.md
```
- SvelteKit示例项目代码
```
references/svelte.md
```
- Svelte - 文档
```
references/identify-users.md
```
- 用户识别 - 文档

references/basic-integration-1.0-begin.md

- PostHog设置 - 开始

references/basic-integration-1.1-edit.md

- PostHog设置 - 编辑

references/basic-integration-1.2-revise.md

- PostHog设置 - 修订

references/basic-integration-1.3-conclude.md

- PostHog设置 - 完成

示例项目展示了目标实现模式。如需了解API细节，请查阅相关文档。

Key principles

核心原则

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
Match the example: Your implementation should follow the example project's patterns as closely as possible.

环境变量: 始终使用环境变量存储PostHog密钥，切勿硬编码。
最小改动: 在现有代码旁添加PostHog相关代码，不要替换或重构现有代码。
匹配示例: 你的实现应尽可能贴近示例项目的模式。

Framework guidelines

框架指南

Set paths.relative to false in svelte.config.js — this is required for PostHog session replay to work correctly with SSR and is easy to miss
Use the Svelte MCP server tools to check Svelte documentation (list-sections, get-documentation) and validate components (svelte-autofixer) — always run svelte-autofixer on new or modified .svelte files before finishing

在svelte.config.js中设置paths.relative为false —— 这是确保PostHog会话重放在SSR环境下正常工作的必要配置，很容易被遗漏
使用Svelte MCP服务器工具查看Svelte文档（list-sections、get-documentation）并验证组件（svelte-autofixer）—— 在完成前，务必对新建或修改的.svelte文件运行svelte-autofixer

Identifying users

用户识别

Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using

X-POSTHOG-DISTINCT-ID

and

X-POSTHOG-SESSION-ID

headers to maintain correlation.

在登录和注册事件中识别用户。请参考示例代码和文档，了解适用于该框架的正确用户识别模式。如果同时存在前端和后端代码，请使用

X-POSTHOG-DISTINCT-ID

和

X-POSTHOG-SESSION-ID

头传递客户端会话和唯一ID，以保持关联。

Error tracking

错误追踪

Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

为相关文件添加PostHog错误追踪，尤其是关键用户流程和API边界相关的文件。