Question

我想在Rails 4 + Turbolinks应用程序中集成hubspot聊天界面。我已将Google跟踪代码管理器配置为在每个页面加载事件中都显示支持聊天界面，这一切正常。

GTM标签（自定义html）

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->

问题

当我手动刷新页面（全页面刷新）时，会显示hubspot客户端界面（聊天气泡窗口）。
当我访问带有Turbolinks的页面时，它不会显示。

对于调试，我遵循了

how-do-i-know-if-my-hubspot-tracking-code-is-working

通过检查元素或将其签入浏览器的查看页面源中，我可以看到将此标签添加到文档主体（DOM）中。 “网络”标签还显示了对js.hs-script.com进行的网络通话。

期望

hubspot聊天界面，可用于Turbolink页面访问：

Answer 1

中心代码将两个js文件插入<head>并将一些内联样式表注入<body>-其中一个js文件（conversations-embed.js）创建了一个ID为{{ 1}}。顾名思义，它包含一个带有聊天窗口的iframe。它还会给身体增加一堆CSS。

这里的主要问题是Turbolinks替换了#hubspot-messages-iframe-container每页更改中的所有内容，使hubspot脚本不知道页面已更改的事实。由于所有内容都已替换，因此脚本和css注入的div消失了。

我的第一个尝试是将聊天容器div克隆到窗口变量中，并在<body>事件内的appendChild(clonedNode)元素中使用event.data.newBody。虽然有点用，但不是很优雅。每次更改页面时，它都会消失并重新出现。另外，状态没有保留下来，因此，如果我关闭窗口，它将在下一页打开，依此类推。

有效的方法是将turbolinks:before-render移出正文，移入html标签本身，使其免受涡轮链接的危害。它的状态保持不变（打开，关闭等），并且不闪烁或没有任何副作用。请记住，您必须手动将其从可能不需要的页面上删除。

我知道它有点hacky，但是它可以工作，直到他们拥有某种可以重新初始化聊天窗口的api为止，这是一种解决方法：

#hubspot-messages-iframe-container

您还需要复制注入到主体中的样式，因为Turbolinks还将替换该样式。这就是我最终的结果（转换为Sass）：

document.addEventListener("turbolinks:load", function() {
  let targetNode = document.body
  let config = { childList: true }
  let callback = function() {
    if (document.body.querySelector('#hubspot-messages-iframe-container')) {
      document.documentElement.appendChild(
        document.getElementById('hubspot-messages-iframe-container')
      )
      observer.disconnect()
    }
  }

  let observer = new MutationObserver(callback)
  if (!document.querySelector("html > #hubspot-messages-iframe-container")) {
    observer.observe(targetNode, config)
  }
})

Turbolinks访问的页面中缺少hubspot聊天界面，但可以刷新整个页面

1 个答案: