How to Integrate webengage in nextjs app

I used WebEngage for tracking users. In React, I pasted the code in index.html under the head tag and it worked fine. In Next.js, since there's no index.html, I pasted it in _app.js, but I'm getting an error.
v4.js:1 Uncaught SyntaxError: Unexpected string (at v4.js:1:90)
storage-frame-1.13.htm:1 Uncaught ReferenceError: webengage_fs_configurationMap is not defined
at t.onload (storage-frame-1.13.htm:1:2858)
v4.js:1 Uncaught SyntaxError: Unexpected string (at v4.js:1:90)
storage-frame-1.13.htm:1 Uncaught ReferenceError: webengage_fs_configurationMap is not defined
at t.onload (storage-frame-1.13.htm:1:2858)
My _app.jsx code:
_app.js
export default function App({ Component }) {
return (
<>
<Head><title>My Finance App </title><meta name="description" content="For Loan Journey" /></Head>
<Script id="_webengage_script_tag" Strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
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="webPersonalization feedback survey notification notificationInbox".split(z),c="options render clear abort".split(z),p="Prepare Render 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("in~~11680b78");
`,
}}
/>
<Component />
</>
);
}
_app.js
export default function App({ Component }) {
return (
<>
<Head><title>My Finance App </title><meta name="description" content="For Loan Journey" /></Head>
<Script id="_webengage_script_tag" Strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
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="webPersonalization feedback survey notification notificationInbox".split(z),c="options render clear abort".split(z),p="Prepare Render 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("in~~11680b78");
`,
}}
/>
<Component />
</>
);
}
can someone help me to solve this issue.
0 Replies
No replies yetBe the first to reply to this messageJoin