# 安装 (https://talivia.com/zh-CN/docs/install) 安装分为两个实用步骤：先把追踪器加入网站，再连接实际产生收入的付款系统。 ## 第 1 步：安装追踪器 [#第-1-步安装追踪器] 只要能够添加脚本标签，就可以使用 Talivia 追踪器。请先采用通用代码片段；只有在需要确认特定技术栈的准确放置位置时，才需要查看框架指南。 ### 通用代码片段 [#通用代码片段] 在应用中打开网站，前往**设置 → 数据追踪**，复制为该网站生成的代码片段。 ```html ``` 请始终从网站设置中复制代码片段。请用 Talivia 的“设置 → 数据追踪”中显示的真实编号替换 YOUR\_WEBSITE\_ID，不要重复使用示例值。 将代码片段放在 `` 结束标签之前，或通过框架共用的文档或布局组件加载。 Talivia 云服务生成的代码片段通常包含 `data-domain`。只有一个主机名的网站不设置它也能工作，但保留生成值可以让根网站及其子域名共享同一访客和活动后延长 30 分钟的会话。常规安装无需手动添加或删除此属性。 如果访问流程会跳转到另一个根域名，请在**设置 → 归因**中添加自有域名，然后复制更新后的代码片段。 追踪概览 了解脚本会自动记录什么，以及它提供哪些运行时函数。 追踪器配置 了解可选脚本属性、存储、筛选和数据采集设置。 子域名追踪 让根网站、应用、文档和结账页面共享同一访客身份。 ### 框架与建站工具指南 [#框架与建站工具指南] 如果网站使用框架、内容管理系统、电商平台或无代码建站工具，请在下方打开相应指南，查看同一段代码的准确粘贴位置。框架示例主要说明放置位置，可能省略可选属性；实际安装时请使用**设置 → 数据追踪**中生成的完整代码。 Next.js 应用路由器与共用布局。 React Vite、Create React App 与静态 HTML 外壳。 Vue Vue 应用与共用 HTML 入口。 Nuxt 应用头部与插件配置。 Angular 工作区 index.html 或运行时注入。 SvelteKit 全局应用模板。 Astro 基础布局与内容网站。 Remix 根文档与 Scripts 组件。 SolidStart 根文档配置。 Qwik 根布局与头部放置位置。 Gatsby 服务端渲染文档钩子。 Expo Expo 网页版与静态 HTML。 Laravel Blade 布局与共用应用视图。 Django 基础模板与继承页面。 Ruby on Rails 应用布局与 ERB 模板。 Express EJS、Pug 或静态 HTML 外壳。 NestJS 服务端渲染模板或静态客户端。 Flask Jinja 基础模板。 Phoenix 根布局与 LiveView 页面。 WordPress 主题页脚、子主题或代码片段插件。 Shopify 主题布局与店面页面。 Wix 控制台中的自定义代码设置。 Webflow 网站自定义代码与项目设置。 Squarespace 为所有页面注入代码。 Framer 在 body 结束标签之前添加自定义代码。 Tilda 在全站 body 结束标签之前添加 HTML。 ## 第 2 步：连接付款 [#第-2-步连接付款] 只有 Talivia 能够看到付款事件后，流量数据才会成为有用的收入分析。请选择与结账方式匹配的付款路径。 Stripe 连接受限接口密钥，由 Talivia 配置网络回调。 Yolfi 连接账户并配置结账会话返回网址。 LemonSqueezy 通过 LemonSqueezy 结账时使用服务商事件。 Polar 产品通过 Polar 销售时使用 Polar 付款事件。 Dodo Payments 连接一个接口密钥；Talivia 会创建付款与退款网络回调。 手动付款接口 从后端或自定义付款处理系统发送付款。 对于能够在返回网址中提供唯一结账编号的托管服务商，请配置该服务商要求的返回占位符。自定义付款流程应把 `window.talivia.getSessionId()` 作为服务商支持的元数据传递，或作为 `sessionId` 发送给手动付款接口。各收入指南会说明服务商最推荐的信号。 ## 验证安装 [#验证安装] 1. 在普通浏览器标签页中打开网站。 2. 访问一个包含追踪器的页面。 3. 返回 Talivia 并打开该网站的数据看板。 4. 确认出现了新的会话、页面浏览、引荐来源、浏览器和国家或地区。 5. 完成付款配置后进行一笔测试付款，并确认收入出现在同一个网站中。