页面转换后刷新 SPA 上的 Hubspots 聊天小部件

Question

我在 Vue-SPA 上实现了 Hubspot。

它按预期工作。 但是聊天小部件没有跟踪 SPA 页面转换。

docs 建议使用

window.HubSpotConversations.widget.refresh();

来处理 SPA 上未跟踪的页面转换。

如果设置的显示欢迎文字的延迟还没有结束。

refresh()

会触发错误的聊天流程。

但是如果它已经结束了，这就有效。
有点。
因为如果新的欢迎文本比旧的长，它就会被裁剪。

另一个问题： 已经通过聊天开始的对话不会由

refresh()

结束，但如果聊天打开，它将在之后关闭。而且我不知道如何告诉小部件按照您的预期重新打开。

Answer 1

如此处所述：https://developers.hubspot.com/docs/api/events/tracking-code，您需要在 SPA 中处理路由更改事件，然后像这样调用

trackPageView

：

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['trackPageView']);

您可能还想在文档中描述的某些情况下调用

setPath

Answer 2

我是 Webz.io 的前端开发人员，我们一直在尝试在我们的 Next.js 市场网站中实施 Hubspot Chatflow。然而，Next.js 中的路由系统不是由页面刷新引起的，因此 Chatflow 并不总是知道它是否应该在相关页面上呈现。我们的营销运营专家为网站创建了 Chatflow 并确定了机器人应该出现的 URL，但有时它会出现故障到其他页面，有时它不会出现在相关页面上，因为 Next.js 的路由不是强制 Hubspot 的机器人重新检查当前 URL。经过一些研究，我找到了解决这个问题的方法，我想与社区分享。

解决方案：刷新

为了解决这个问题，我将一个简单的代码行附加到 Next.js 路由器，该路由器调用对 Hubspot 的 HTTP 请求以重新验证 URL 并刷新聊天机器人的状态。这是代码片段：

useEffect(() => {
  if (window.HubSpotConversations && window.HubSpotConversations.widget) {
    window.HubSpotConversations.widget.refresh();
  }
}, [router]);

或者如果你想让它更短：

useEffect(() => {
  window.HubSpotConversations?.widget?.refresh();
}, [router]);

这个 useEffect 挂钩被添加到

_app.js

文件中，并在每次路由更改时触发 Hubspot Chatflow 的刷新，确保聊天机器人出现在正确的页面上。

虽然这个解决方案对我们有用，但如果 Hubspot 可以将这个片段添加到他们的文档中，或者创建一个 NPM 包，在一个名为 refreshChatFlow 或类似的函数中包含这个 useEffect 挂钩，那将会很有帮助。这将使其他开发人员更容易在 Next.js 网站上实施 Hubspot Chatflow 而不会遇到此问题。