Using Driftbot in a single page React App

I am using Driftbot, See Here and am trying to get it to enable/disable based on the current route/url. I AM USING REACT-ROUTER.

I am able to use drift.unload() to stop it from running (in my componentWillMount() function) but am unable to get it started back up again.

We have some code that was pulled from here on SO that has been working, except we now need to modify it such that it is disabled on specific pages.

Here is the code we are currently using:

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();

This is currently in the componentDidMount() of our app.js since it is our root '/'. I have also tried moving this over inside a script tag in index.html but had the same results.

When linking to a part of the app I want it disabled, the only method that will disable it is window.drift.unload(). .hide and .off will not work.

When going back to the root, I have the command, window.drift.load(), but now it is an empty function, where before running the unload() function it was working.

I have also tried including the functions found in the Drift Docs linked above in both my root.js and app.js files to no avail

Does anyone have any ideas?

Solution

So this was a very confusing ride but I finally figured it out with the help of some of the engineers over at drift.

First of all, in the settings of their dash when you "blacklist" urls you need to only include keywords not full URLs (my first mistake).

Secondly, put the fucntion in a script in the index.html file

Thirdly, find all of the top-level route components where you want the widget to be disabled and include the following code like in their react article

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

This will basically re-initialize the widget and run a .includes check from your provided url (this.props.location.pathname) against the keywords in your settings blacklist. It will then disable it or enable it depending on the results.

There you go, good luck to anyone else stuck on this...