本文档旨在指导开发者如何正确地将 Smartlook 集成到使用 Partytown 的项目中。通过正确的配置，您可以在保持主线程性能的同时，利用 Smartlook 进行用户行为分析。本文将详细介绍集成步骤，并提供必要的代码示例和注意事项。
集成步骤
1. 添加 Partytown 初始化脚本
首先，确保你的项目中已经正确集成了 Partytown。这通常涉及到在 <head> 标签中添加 Partytown 的初始化脚本。
<script type="module">
import { partytownSnippet } from "@builder.io/partytown/integration";
const snippetText = partytownSnippet();
const el = document.createElement("script");
el.innerText = snippetText;
document.head.appendChild(el);
</script>这个脚本负责加载 Partytown 库，并设置 Partytown 的运行环境。
2. 复制 Partytown 库文件
使用 partytown copylib 命令将 Partytown 库文件复制到你的公共目录。在 package.json 中添加或更新 scripts 部分：
"scripts": {
"partytown": "partytown copylib public/~partytown"
}然后运行：
npm run partytown
这将把 Partytown 的相关文件复制到 public/~partytown 目录。请确保你的服务器能够正确提供这些文件。
3. 集成 Smartlook 脚本
关键步骤是将 Smartlook 的初始化脚本添加到页面，并确保其 type 属性设置为 text/partytown。
<script type='text/javascript'>
window.smartlook||(function(d) {
var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/partytown';
c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);
})(document);
smartlook('init', 'YOUR_PROJECT_KEY', { region: 'YOUR_REGION' });
</script>重要：
- 将 YOUR_PROJECT_KEY 替换为你的实际 Smartlook 项目 ID。
- 将 YOUR_REGION 替换为你的实际 Smartlook 区域设置。
- 必须设置 type='text/partytown'，这样 Partytown 才能正确处理该脚本。
4. 验证集成
完成以上步骤后，打开你的网站，并检查 Smartlook 是否正常工作。在 Smartlook 控制台中，你应该能够看到用户的会话记录。
注意事项
- 确保 Partytown 库文件能够被正确访问。检查你的服务器配置，确保 public/~partytown 目录下的文件可以通过浏览器访问。
- 检查 Smartlook 初始化脚本中的项目 ID 是否正确。错误的 ID 会导致 Smartlook 无法正常工作。
- 使用浏览器的开发者工具检查是否有任何 JavaScript 错误。错误信息可能会提供关于集成问题的线索。
- 确保你的网站没有阻止 Smartlook 的请求。一些广告拦截器或安全软件可能会阻止 Smartlook 的脚本加载。
总结
通过以上步骤，你应该能够成功地将 Smartlook 集成到使用 Partytown 的项目中。通过将 Smartlook 脚本放在 Partytown 中运行，你可以有效地减轻主线程的负担，提高网站的性能，同时仍然能够使用 Smartlook 进行用户行为分析。记住，正确的配置和仔细的验证是成功集成的关键。
