时间戳

首页 > 解决方案 > 如何在 React Frontend 中集成 web 参与

reactjs - 如何在 React Frontend 中集成 web 参与

问题描述

我得到了它的源代码，但是如何导入它并在我的组件中使用它？

<script id='_webengage_script_tag' type='text/javascript'>
        var webengage;!function(w,e,b,n,g){function o(e,t){e[t[t.length-1]]=function(){r.__queue.push([t.join("."),
        arguments])}}var i,s,r=w[b],z=" ",l="init options track screen onReady".split(z),a="feedback survey notification".split(z),c="options render clear abort".split(z),p="Open Close Submit Complete View Click".split(z),u="identify login logout setAttribute".split(z);if(!r||!r.__v){for(w[b]=r={__queue:[],__v:"6.0",user:{}},i=0;i < l.length;i++)o(r,[l[i]]);for(i=0;i < a.length;i++){for(r[a[i]]={},s=0;s < c.length;s++)o(r[a[i]],[a[i],c[s]]);for(s=0;s < p.length;s++)o(r[a[i]],[a[i],"on"+p[s]])}for(i=0;i < u.length;i++)o(r.user,["user",u[i]]);setTimeout(function(){var f=e.createElement("script"),d=e.getElementById("_webengage_script_tag");f.type="text/javascript",f.async=!0,f.src=("https:"==e.location.protocol?"https://widgets.in.webengage.com":"http://widgets.in.webengage.com")+"/js/webengage-min-v-6.0.js",d.parentNode.insertBefore(f,d)})}}(window,document,"webengage");webengage.init("your INIT key"); 
</script>

标签： reactjswebengage

解决方案

  • 您应该首先创建一个帐户。您可以从 14 天免费试用开始。这将使您能够获得一个名为 licenseCode 的帐户 ID，该 ID 需要用于初始化问题中提到的 Web SDK 脚本。
  • 按照文档设置您的帐户。
  • 对于基于 ReactJS 的前端，您应该将 SDK 集成脚本添加到您的index.html文件中并添加到该head部分中。

<head>
  ..
  ..
  ..
  <script id="_webengage_script_tag" type="text/javascript">
    var webengage;
    ! function(w, e, b, n, g) {
      function o(e, t) {
        e[t[t.length - 1]] = function() {
          r.__queue.push([t.join("."), arguments])
        }
      }
      var i, s, r = w[b],
        z = " ",
        l = "init options track screen onReady".split(z),
        a = "feedback survey notification".split(z),
        c = "options render clear abort".split(z),
        p = "Open Close Submit Complete View Click".split(z),
        u = "identify login logout setAttribute".split(z);
      if (!r || !r.__v) {
        for (w[b] = r = {
            __queue: [],
            __v: "6.0",
            user: {}
          }, i = 0; i < l.length; i++) o(r, [l[i]]);
        for (i = 0; i < a.length; i++) {
          for (r[a[i]] = {}, s = 0; s < c.length; s++) o(r[a[i]], [a[i], c[s]]);
          for (s = 0; s < p.length; s++) o(r[a[i]], [a[i], "on" + p[s]])
        }
        for (i = 0; i < u.length; i++) o(r.user, ["user", u[i]]);
        setTimeout(function() {
          var f = e.createElement("script"),
            d = e.getElementById("_webengage_script_tag");
          f.type = "text/javascript",
            f.async = !0,
            f.src = ("https:" == e.location.protocol ? "https://widgets.in.webengage.com" : "http://widgets.in.webengage.com") + "/js/webengage-min-v-6.0.js",
            d.parentNode.insertBefore(f, d);
        })
      }
    }(window, document, "webengage");

    webengage.init('YOUR_WEBENGAGE_LICENSE_CODE');
  </script>
  ..
  ..
  ..
</head>

  • 现在，您可以访问webengage任何组件内的对象，并进一步利用文档中提到的各种 SDK 方法。

import React, {
  Component
} from "react";

class App extends Component {
  componentDidMount() {
    webengage.track('CustomEvent', {
      'firstName': 'Alex'
    }); // version 1
    
    window.webengage.track('CustomEvent', {
      'firstName': 'Alex'
    }); // version 2
  }

  render() {
    return (
    <div className = "App" >
      <header className = "App-header" >
        <img src={logo} className = "App-logo" alt = "logo" />
        <a className = "App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" >Learn React 
        </a> 
      </header> 
    </div>
    );
  }
}

ReactDOM.render( <App/> , document.getElementById("root"));

  • 如果您在项目中使用了一些语法 linter，例如 (eslint)，则使用第一个版本的代码会引发错误。有关引用未导入库的更多信息，请参阅此详细说明。

  • 因此，您可以尝试使用带有window关键字的第二个版本。

  • 此外，如果您正在构建单页应用程序，请检查 WebEngage 的 WebSDK 的SPA版本。

希望这些步骤可以帮助您轻松集成。

推荐阅读