如何在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>

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

<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版本。

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

相关内容

最新更新

热门标签：