本文档旨在指导开发者如何正确地将 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 的库文件到你的公共目录。
"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 的官方文档，或者在相关的开发者社区寻求帮助。
