如何将 Hotjar 与您的 Shopify 商店集成

当优化您的 Shopify 商店以实现更高的转化率时，了解访问者如何与您的页面互动是关键。

Hotjar 帮助您通过热图、滚动跟踪和会话记录可视化用户行为，以便您做出明智的设计和内容决策。

关于 Hotjar

Hotjar 是一种流行的行为分析和反馈工具，可帮助 Shopify 商家了解访客如何与他们的商店互动。

它提供热图、滚动跟踪、会话记录和反馈小部件，让您识别痛点并改善客户旅程。

Hotjar 使您能够：

• 直观地了解用户在您的目标网页上点击最多或花费最多时间的位置。
• 检测可能影响转换的设计或布局问题。
• 根据真实用户数据优化 CTA、横幅和产品部分等元素。

在你开始之前

在开始之前，请确保您已：

• 一个 Hotjar 帐户（已准备好您的跟踪代码）。
• 访问您的 Shopify 管理员。
• 已发布的 Shopify 商店（不是开发版或沙盒版）。

如何将 Hotjar 跟踪代码添加到您的 Shopify？

请按照以下步骤将 Hotjar 连接到您的 Shopify 商店：

第三步： 登录到您的 Hotjar 帐户.

第三步： 从左侧边栏，转到 开始设置，然后点击 复制代码.

第三步： 在您的 Shopify 管理员， 导航 在线商店 > 主题，点击三点图标，然后选择 编辑代码 从下拉列表。

第三步： 打开你的 theme.liquid 文件中。

第三步： 粘贴 Hotjar 跟踪代码 就在收盘前 </head> 行李牌.

完成后，单击 已保存.

如何将 Hotjar 跟踪代码添加到 GemPages？

如果您已将 Hotjar 代码添加到 Shopify 主题，则跟踪也将自动应用于所有 GemPages 构建 在同一域名下发布的页面。

如果您想跟踪特定 GemPages 构建页面上的访问者行为，您可以使用 自定义代码元素.

这是怎么做的：

第三步： 从 GemPages 仪表板，前往 前往 并点击目标页面在编辑器中打开它。

第三步： 在 GemPages 编辑器，使用搜索栏找到自定义代码元素。然后，将该元素拖放到您的页面上。

第三步： 在左侧边栏中，单击 代码 在下面 自定义代码 部分打开代码面板。

第三步： 在下面 HTML / CSS 选项卡，粘贴您的 Hotjar 跟踪代码。

完成后，单击 已保存 并击中 发布 重新发布更新后的页面。

验证您与 Hotjar 的集成

要确认 Hotjar 是否正常工作：

第三步： 去你的 Hotjar 仪表板 检查站点状态。

第三步： 你应该看到一个 绿色“跟踪激活” 一旦你的商店收到流量，就会出现指示器。

如果状态显示“不跟踪”，请回顾以下几点：

• 该商店仍处于 Shopify 沙盒 环境：Hotjar 不跟踪预览或开发商店。
• 跟踪脚本放置不正确：请确保已添加 before 在您的主题中或 GemPages 中的自定义代码元素中。
• 您的页面尚未收到任何实际访问流量。
• 浏览器缓存：清除缓存或重新登录 隐身模式.

更多详细信息，请参阅Hotjar的文档： 如何在您的 Shopify 网站上安装 Hotjar.

关于 Hotjar 集成的常见问题解答

1. 我可以在 Shopify 的沙盒或预览模式下使用 Hotjar 吗？

不。Hotjar 有 不支持 Shopify 沙盒环境，包括预览版或开发版商店。您必须拥有 实时且可公开访问的商店 以便跟踪能够正常工作。

2. Hotjar 会自动跟踪 GemPages 页面吗？

如果将 Hotjar 跟踪代码添加到您的 Shopify 主题中 theme.liquid，它还将加载 GemPages 构建 在同一域名下发布的页面。

但是，如果您的页面使用 自定义域名, 子 或 独立出版 设置时，您应该使用手动添加代码 宝石页和 自定义代码元素 以确保准确跟踪。

3. 如果 Hotjar 无法检测到我的网站怎么办？

确保这件事：

• 您的商店是 生活 （不是沙盒）。
• 脚本被放置 收盘前 </head> 行李牌.
• 您已清除缓存或在隐身模式下进行测试。

如果问题仍然存在，请参阅 Hotjar 的 Shopify 设置指南.

4. Hotjar 和 Microsoft Clarity 有什么区别？

• Hotjar 提供更高级的反馈工具（调查、愤怒点击跟踪）和付费计划的详细见解。
• 微软清晰度 完全是 免费，具有无限的热图和会话记录。

请参阅 本文 有关 Microsoft Clarity 与 Shopify 集成的更多详细信息。