Использование Driftbot в приложении React на одной странице

Я использую Driftbot, см. Здесь и пытаюсь включить / отключить его в зависимости от текущего маршрута / URL. Я ИСПОЛЬЗУЮ РЕАКТИВНЫЙ МАРШРУТИЗАТОР.

Я могу использовать 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();

Это в настоящее время в componentDidMount() из нашего app.js так как это наш корень '/', Я также попытался переместить это внутри тега сценария в index.html но имели те же результаты.

При связывании с частью приложения я хочу, чтобы оно было отключено, единственный способ, который отключит это window.drift.unload(), .hide а также .off не будет работать.

Возвращаясь к корню, у меня есть команда, window.drift.load(), но теперь это пустая функция, где перед запуском unload() Функция это работало.

Я также попытался включить функции, описанные в Документах по дрифту, которые указаны выше, как в root.js а также app.js файлы безрезультатно

У кого-нибудь есть какие-либо идеи?

Источник

2 ответа

Решение

Так что это была очень запутанная поездка, но я наконец понял это с помощью некоторых инженеров на дрифте.

Прежде всего, в настройках их тире, когда вы "черным списком" URL-адресов, нужно включать только ключевые слова, а не полные URL-адреса (моя первая ошибка).

Во-вторых, поместите функцию в сценарий в index.html файл

В-третьих, найдите все компоненты маршрута верхнего уровня, где вы хотите, чтобы виджет был отключен, и включите следующий код, как в их статье про реакцию

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

Это будет в основном повторно инициализировать виджет и запустить .includes проверьте с вашего предоставленного URL (this.props.location.pathname) против ключевых слов в вашем черном списке настроек. Затем он отключит его или включит в зависимости от результатов.

Ну вот, удачи всем, кто застрял на этом...

Источник

Drift .page() у меня не работал

я использую пакет npm для реагирования
https://github.com/chardmd/react-drift
дрейф включен в один из моих компонентов верхнего уровня

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

правила маршрутов устанавливаются, а затем устанавливаются как обычно в пользовательском интерфейсе дрейфа

   componentDidUpdate (prevProps, prevState, snapshot) {

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

if (prevLoc !== newLoc) {
 window.drift.reset()
Источник

Я могу придумать два варианта для вашего случая. Сначала было бы создать компонент только для запуска / остановки дрифбота. Вы бы инициализировали Driftbot на componentDidMount затем позвоните window.drift.unload() на componentWillUnmount, Затем вместо того, чтобы обернуть все приложение целиком, вы перетаскиваете его только на домашнюю страницу, таким образом, оно будет отключено при переходе в другой раздел.

Другой вариант, так как вы упомянули React Router, будет смотреть location приложения, либо используя history.listen - https://github.com/ReactTraining/history - или проверка реквизитов, предоставляемых React Router - https://reacttraining.com/react-router/web/api/location - в componentWillUpdate, затем включение и выключение дрифбота в зависимости от текущего URL.

Источник
Другие вопросы по тегам