score:1
Accepted answer
- you should create an account to begin with. you can start with a 14 day free trial. this will enable you to get an account id called licensecode which needs to be used to initialise the web sdk script mentioned in the question.
- follow the documentation to setup your account.
- for a reactjs based frontend, you should add the sdk integration script inside your
index.html
file and into thehead
section.
<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>
- now you can access the
webengage
object inside any of your components and further make use of the various sdk methods mentioned in the documentation.
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"));
if you are using some syntax linter like (eslint) in your project, using the first version of code will throw errors. please refer to this detailed explanation for more on referencing unimported libraries.
thus, you can try using the second version with the
window
keyword.further, if you are building a single page application, do checkout the spa version of the webengage's websdk.
hope these steps help you integrate without hassle.
Source: stackoverflow.com
Related Query
- How to integrate web engage in React Frontend
- How to integrate Web MIDI API with React frontend and Django backend
- How to integrate azure ad into a react web app that consumes a REST API in azure too
- How do I integrate react js in play web app
- How to integrate react-native web to an existing react native project
- How to integrate a react frontend and a separate php REST API backend
- how to run react project with web pack which contains frontend and backend
- How to deploy a React App on Apache web server
- How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?
- How to show build datetime on my react web app using create-react-app?
- How import object from external JS file in React JS using web pack
- How to integrate react DnD with react fullcalendar?
- How to integrate a React webapp inside a spring boot Application with jar packaging
- How to integrate @2x @3x images to React Native Project (Both Android & IOS)?
- How to integrate azure b2c with react
- How do integrate amplitude analytics with a React app?
- How to stream webcam feed on web page using react js component?
- How to integrate Phaser into React
- How to integrate Reactjs frontend with php codeigniter application on apache server?
- How to use Django User Groups and Permissions on a React Frontend with Django Rest Framework
- How to integrate OpenCV.js in a React WebApp?
- How to override React native web pre defined css
- How to integrate React into React Native WebView?
- How to integrate twilio in react native for android?
- How do I integrate rxjs observables with a plain React Component?
- How do I properly use ASP.NET Core Web Application React project template
- How can I implement a Web barcode scanner in React to work in browser (desktop/mobile)?
- How integrate jQuery plugin in React
- How to send email from my react web application
- How do I access data returned from an axios get to display on a web page using react js?
More Query from same tag
- Check uniqueness with in nested object property values in array of objects
- Passing up function calls to handle nested state changes. What am I doing wrong here?
- TypeError: Cannot read property 'prepareStyles' of undefined
- How to reset radio button in react JS
- Remove child component on click of link
- Why is useState not working correctly or am I missing something so Obvious?
- setup localStorage for testing React app with jest
- How to render a Link in useState - nextjs
- React - refetch child component data when the props change
- Why is this JS error thrown?
- Why am I unable to import @rainbow-me/rainbowkit/styles.css?
- Underline specific words of a string in React
- How to get URL query string on Next.js static site generation?
- How to create reusable async thunk without unnecessary render
- GatsbyJS renders URLs incorrectly
- Jest tests failing only with coverage
- Responsive Page Header
- Limit table to 15 rows and click on "Load more" to load more 15 rows in React JS
- Graphcomment plugin - implementation with Gatsby
- Linking to a different page using react-day-picker and react router v4
- React Typescript - Error Objects are not valid as a React child
- Why I keep on getting property undefined when it is declared already?
- Can't import React component on server-side Next.js
- Error: ./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'
- State is not updating in react js
- Prefixing imported CSS file
- React: How can you access the class name of a parent component from a child without passing it down as props?
- Filter items with .filter .map .some .indexOf etc
- How to use :active or :focus styles in react?
- ReactJS componentDidMount + render