使用 Partytown 集成 Smartlook：配置指南

本文档旨在指导开发者如何正确地将 Smartlook 集成到使用 Partytown 的项目中。通过正确的配置，您可以在保持主线程性能的同时，利用 Smartlook 进行用户行为分析。本文将详细介绍集成步骤，并提供必要的代码示例和注意事项。

集成步骤

1. 添加 Partytown 初始化脚本

首先，确保你的项目中已经正确集成了 Partytown。这通常涉及到在

标签中添加 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 进行用户行为分析。记住，正确的配置和仔细的验证是成功集成的关键。