在单页 React App 中使用 Driftbot

Question

我正在使用 Driftbot，See Here 并且我正在尝试根据当前的 route/url 使其达到 enable/disable。我正在使用 REACT-ROUTER。

我可以使用 drift.unload() 从运行停止它（在我的 componentWillMount() 函数中）但是我无法让它重新启动。

我们在 SO 上从这里提取了一些代码，这些代码一直有效，只是我们现在需要修改它，以便在特定页面上禁用它。

这是我们目前使用的代码：

let driftbot_function = function() {
      !function() {
        var t;
        if (t = window.driftt = window.drift = window.driftt || [], !t.init) return t.invoked ? void (window.console && console.error && console.error("Drift snippet included twice.")) : (t.invoked = !0,
        t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
        t.factory = function(e) {
          return function() {
            var n;
            return n = Array.prototype.slice.call(arguments), n.unshift(e), t.push(n), t;
          };
        }, t.methods.forEach(function(e) {
          t[e] = t.factory(e);
        }), t.load = function(t) {
          var e, n, o, i;
          e = 3e5, i = Math.ceil(new Date() / e) * e, o = document.createElement("script"),
          o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + i + "/" + t + ".js",
          n = document.getElementsByTagName("script")[0], n.parentNode.insertBefore(o, n);
        });
      }();

      drift.SNIPPET_VERSION = '0.3.1';
      drift.load('****__our-key__****');
      drift.page();
    }

    driftbot_function();

它目前在我们 app.js 的 componentDidMount() 中，因为它是我们的根 '/'。我也试过将它移到 index.html 中的脚本标记内，但结果相同。

当链接到应用程序的一部分时，我希望它被禁用，唯一可以禁用它的方法是 window.drift.unload()。 .hide 和 .off 将不起作用。

回到根目录时，我有命令 window.drift.load()，但现在它是一个空函数，而在运行之前，unload() 函数正在运行。

我也曾尝试在我的 root.js 和 app.js 文件中包含在上面链接的 Drift 文档中找到的函数，但无济于事

有没有人有什么想法？

Answer 1

我可以为您的情况想到两个选项。首先是仅为 starting/stopping driftbot 创建一个组件。您将在 componentDidMount 上初始化 driftbot，然后在 componentWillUnmount 上调用 window.drift.unload()。然后不用用它包装整个应用程序，只需将它放在主页中，这样当您导航到另一个部分时它就会被卸载。

由于您提到了 React Router，另一种选择是使用 history.listen - https://github.com/ReactTraining/history - or checking the props provided by React Router - https://reacttraining.com/react-router/web/api/location - 在 componentWillUpdate 上观看应用程序的 location，然后根据当前 url.

打开和关闭 driftbot

Answer 2

所以这是一次非常混乱的旅程，但我最终在漂移的一些工程师的帮助下弄明白了。

首先，当您 "blacklist" url 时，在他们的破折号设置中，您只需要包含关键字而不是完整的 URL（我的第一个错误）。

其次，将函数放在 index.html 文件中的脚本中

第三，找到您希望禁用小部件的所有顶级路由组件，并像他们的 React 文章中那样包含以下代码

componentWillMount() {
  drift.page(this.props.location.pathname)
}
componentWillReceiveProps(nextProps) {
  if (nextProps.location.pathname !== this.props.location.pathname) {
    drift.page(nextProps.location.pathname)
  }
}

这基本上会重新初始化小部件，并且运行根据您提供的 url (this.props.location.pathname) 根据设置黑名单中的关键字进行 .includes 检查。然后它将根据结果禁用它或启用它。

好了，祝大家好运...

Answer 3

drift.page() 对我不起作用

我正在使用 npm 包进行反应
https://github.com/chardmd/react-drift
漂移包含在我的顶级组件之一

   <Drift appId='123456789' />
    <Favicon url={this.favicon} />
    <Meta
      meta={this.state.data.metaTags}
    />

路线规则已设置，然后在漂移中设置为正常UI

   componentDidUpdate (prevProps, prevState, snapshot) {

const prevLoc = prevProps.location.pathname
const newLoc = this.props.location.pathname

if (prevLoc !== newLoc) {
 window.drift.reset()

在单页 React App 中使用 Driftbot

Using Driftbot in a single page React App

javascript

drift

reactjs

react-router