Как интегрировать код Drift bot JS в приложение stati c React Next Js (целевая страница)? - PullRequest
Новая
       13

Как интегрировать код Drift bot JS в приложение stati c React Next Js (целевая страница)?

0 голосов
/ 22 апреля 2020

Я новичок в ReactJS. Я разработал целевую страницу / сайт c, используя ReactJS & Next Js. Сейчас я пытаюсь интегрировать чат-бота «Дрифт». В процессе установки говорят, что для установки мне нужно вставить код JavaScript в файлы <head> из HTML. Я нашел автоматически созданные html файлы моего приложения реагирования и вставил этот код, но ничего не произошло. 

<script>
"use strict";

!function() {
  var t = window.driftt = window.drift = window.driftt || [];
  if (!t.init) {
    if (t.invoked) return 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 = Array.prototype.slice.call(arguments);
        return n.unshift(e), t.push(n), t;
      };
    }, t.methods.forEach(function(e) {
      t[e] = t.factory(e);
    }), t.load = function(t) {
      var e = 3e5, n = 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/" + n + "/" + t + ".js";
      var i = document.getElementsByTagName("script")[0];
      i.parentNode.insertBefore(o, i);
    };
  }
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('xxxxxxxx');
</script>
<!-- End of Async Drift Code -->

Когда я проверял целевую страницу в localhost, я не смог найти этот скрипт в <header>

1 Ответ

0 голосов
/ 22 апреля 2020

Я решил проблему с помощью npm i react-drifts, а затем импортировал Drift в мое приложение реакции. Тогда я использовал <Drift appId='xxxx'/>. AppId встроен в скрипт javascript [drift.load('xxxxxxxx')], который дрейфует вам для добавления в <head/>

...