使用 Partytown 集成 Smartlook：完整指南

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

集成步骤

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

1. 引入 Partytown Snippet： 确保在页面的

   标签中引入 Partytown 的初始化代码片段。这通常通过一个内联的 <script> 标签完成。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script type=&quot;module&quot;&gt; import { partytownSnippet } from &quot;@builder.io/partytown/integration&quot;; const snippetText = partytownSnippet(); const el = document.createElement(&quot;script&quot;); el.innerText = snippetText; document.head.appendChild(el); &lt;/script&gt;</pre><div class="contentsignin"></div></div><p>这个代码片段负责加载 Partytown 库并初始化它。</script>

2. 配置 Partytown 复制库： 在 package.json 文件中，添加一个脚本命令来复制 Partytown 的库文件到你的公共目录。

   "scripts": {   "partytown": "partytown copylib public/~partytown" }

   然后，运行 npm run partytown (或 yarn partytown) 来执行这个脚本。这将把 Partytown 的文件复制到 public/~partytown 目录。请确保 public 目录是你的静态资源目录。

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

关键注意事项

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

总结

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