使用 Partytown 集成 Smartlook：完整指南-js教程-PHP中文网

使用 Partytown 集成 Smartlook：完整指南

聖光之護

发布： 2025-08-16 19:44:01

原创

177人浏览过

使用 partytown 集成 smartlook：完整指南

本文档旨在指导开发者如何正确地将 Smartlook 集成到使用 Partytown 的项目中。我们将提供详细的步骤和代码示例，帮助你解决集成过程中可能遇到的问题，确保 Smartlook 能够正常工作，从而有效进行用户行为分析。

集成步骤

要成功地将 Smartlook 集成到 Partytown 项目中，你需要遵循以下步骤：

引入 Partytown Snippet： 确保在页面的 <head> 标签中引入 Partytown 的初始化代码片段。这通常通过一个内联的 <script> 标签完成。

<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 复制库： 在 package.json 文件中，添加一个脚本命令来复制 Partytown 的库文件到你的公共目录。

集简云
软件集成平台，快速建立企业自动化与智能化

22

查看详情
```
"scripts": {
  "partytown": "partytown copylib public/~partytown"
}
```
登录后复制
然后，运行 npm run partytown (或 yarn partytown) 来执行这个脚本。这将把 Partytown 的文件复制到 public/~partytown 目录。请确保 public 目录是你的静态资源目录。

集成 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 替换为你的区域设置。

关键注意事项

type='text/partytown' 属性： 这是让 Partytown 正确处理脚本的关键。任何你想通过 Partytown 加载的脚本都必须设置这个属性。
Smartlook 项目 ID： 确保你已经将你的 Smartlook 项目 ID 插入到初始化代码中。这是 Smartlook 识别你的网站并开始记录数据的必要步骤。
区域设置： 根据你的 Smartlook 账户设置，选择正确的区域。
调试： 如果你在集成后没有看到 Smartlook 记录任何数据，请检查浏览器的开发者工具中的控制台是否有任何错误信息。确保 Partytown 已经正确初始化，并且 Smartlook 脚本已成功加载。

总结

通过遵循上述步骤，你应该能够成功地将 Smartlook 集成到你的 Partytown 项目中。记住，关键在于正确设置 type='text/partytown' 属性，并确保你的 Smartlook 项目 ID 和区域设置是正确的。如果你仍然遇到问题，请参考 Partytown 和 Smartlook 的官方文档，或者在相关的开发者社区寻求帮助。

以上就是使用 Partytown 集成 Smartlook：完整指南的详细内容，更多请关注php中文网其它相关文章！