本文档旨在指导开发者如何正确地将 Smartlook 集成到使用 Partytown 的项目中。Partytown 旨在将耗时的第三方脚本转移到 Web Worker 中运行，从而提高主线程的性能。本文将提供必要的代码示例和步骤，帮助您成功集成 Smartlook 并避免常见问题。
集成步骤
以下步骤详细介绍了如何将 Smartlook 集成到您的 Partytown 项目中。
1. 安装 Partytown
首先，确保您的项目中已经安装了 Partytown。如果没有，请按照 Partytown 的官方文档进行安装。通常，这涉及到安装 @builder.io/partytown 包，并配置 Partytown 的相关设置。
npm install @builder.io/partytown
或者，如果您使用 yarn：
yarn add @builder.io/partytown
2. 配置 Partytown 库文件
使用 Partytown 提供的命令行工具将 Partytown 的库文件复制到您的公共目录。这通常是 public 或 static 目录。
在 package.json 文件的 scripts 部分添加以下命令：
"scripts": {
"partytown": "partytown copylib public/~partytown"
}然后运行该命令：
npm run partytown
或者
yarn partytown
3. 添加 Partytown Snippet
在您的 HTML 页面的
标签中，添加 Partytown 的 snippet。这会将 Partytown 初始化代码注入到页面中。4. 集成 Smartlook 脚本
将 Smartlook 的初始化脚本添加到您的 HTML 页面中。关键的一步是确保将 type 属性设置为 text/partytown。此外，请确保将 PROJECT_KEY 和 REGION 替换为您实际的 Smartlook 项目 ID 和区域。
注意： 将 YOUR_PROJECT_KEY 替换为您的实际 Smartlook 项目密钥，将 YOUR_REGION 替换为您的 Smartlook 区域设置。
5. 验证集成
完成上述步骤后，请访问您的网站，并在 Smartlook 控制台中检查是否开始记录会话。如果没有，请检查以下几点：
- 确保 Partytown 已经正确配置，并且库文件已经复制到公共目录。
- 确保 Smartlook 脚本的 type 属性设置为 text/partytown。
- 确保 Smartlook 项目密钥和区域设置正确。
- 检查浏览器的开发者工具，查看是否有任何 JavaScript 错误。
注意事项
- 确保您的 Smartlook 项目密钥正确，否则 Smartlook 将无法正常工作。
- 所有需要通过 Partytown 加载的脚本都必须具有 type='text/partytown' 属性。
- 如果遇到问题，请查阅 Partytown 和 Smartlook 的官方文档。
总结
通过遵循以上步骤，您可以成功地将 Smartlook 集成到您的 Partytown 项目中。这可以帮助您在不影响主线程性能的情况下，利用 Smartlook 提供的用户行为分析功能。记住，正确的配置和验证是确保集成成功的关键。
