使用 Partytown 集成 Smartlook 的教程

本文档旨在指导开发者如何正确地将 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 初始化代码注入到页面中。

<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>

4. 集成 Smartlook 脚本

将 Smartlook 的初始化脚本添加到您的 HTML 页面中。关键的一步是确保将 type 属性设置为 text/partytown。此外，请确保将 PROJECT_KEY 和 REGION 替换为您实际的 Smartlook 项目 ID 和区域。

<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 项目密钥，将 YOUR_REGION 替换为您的 Smartlook 区域设置。

5. 验证集成

完成上述步骤后，请访问您的网站，并在 Smartlook 控制台中检查是否开始记录会话。如果没有，请检查以下几点：

• 确保 Partytown 已经正确配置，并且库文件已经复制到公共目录。
• 确保 Smartlook 脚本的 type 属性设置为 text/partytown。
• 确保 Smartlook 项目密钥和区域设置正确。
• 检查浏览器的开发者工具，查看是否有任何 JavaScript 错误。

注意事项

• 确保您的 Smartlook 项目密钥正确，否则 Smartlook 将无法正常工作。
• 所有需要通过 Partytown 加载的脚本都必须具有 type=’text/partytown’ 属性。
• 如果遇到问题，请查阅 Partytown 和 Smartlook 的官方文档。

总结

通过遵循以上步骤，您可以成功地将 Smartlook 集成到您的 Partytown 项目中。这可以帮助您在不影响主线程性能的情况下，利用 Smartlook 提供的用户行为分析功能。记住，正确的配置和验证是确保集成成功的关键。