NextJS上的MoEngage
NextJS上的MoEngage
提问于 2021-02-23 16:00:35
我在Next.js中实现MoEngage有一个问题。
下面是Reactjs的MoEngage文档，MoEngage ReactJS
但问题是，我在NextJS中找不到index.html。我已经尝试在Head component下面放入_documents.tsx。
import {Html, Head} from 'next/document'
<Html>
<Head>
<script
dangerouslySetInnerHTML={{
__html: `
(function(i, s, o, g, r, a, m, n) {
i.moengage_object = r;
t = {};
q = function(f) {
return function() {
(i.moengage_q = i.moengage_q || []).push({ f: f, a: arguments });
};
};
(f = [
'track_event',
'add_user_attribute',
'add_first_name',
'add_last_name',
'add_email',
'add_mobile',
'add_user_name',
'add_gender',
'add_birthday',
'destroy_session',
'add_unique_user_id',
'moe_events',
'call_web_push',
'track',
'location_type_attribute',
]),
(h = { onsite: ['getData'] });
for (k in f) {
t[f[k]] = q(f[k]);
}
a = s.createElement(o);
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
i.moe =
i.moe ||
function() {
n = arguments[0];
return t;
};
a.onload = function() {
if (n) {
i[r] = moe(n);
}
};
})(
window,
document,
'script',
'https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js',
'Moengage'
);
Moengage = moe({
app_id: ${moeID},
debug_logs: ${moeDebug},
swPath: '/service-worker.js',
});
`,
}}
/>
</Head>
</Html>它不工作，有人知道如何在NextJS上实现这个脚本标记吗？我尝试这种方法就像我添加谷歌分析一样，它适用于谷歌分析，但不适用于MoEngage。
谢谢。
回答 1
Stack Overflow用户
发布于 2021-11-24 17:15:51
如果您找不到index.js，那么我假设您的代码库中一定有_app.js文件。_app.js允许我们编写对所有页面都有影响的代码-因此它是我们创建脚本组件的完美位置
首先要做的是！
如果你使用的是next.js 11/12，来自'next/script‘的<Script>标签应该放在你的_app.js中的return块内，也在<Head>标签的上面。就像这样，
import Script from 'next/script';
import Head from 'next/head';
// ...
// Script tag belongs ABOVE the <Head> tag inside your _app.js file's return block.
<Script
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `(function(i, s, o, g, r, a, m, n) {
i.moengage_object = r;
t = {};
q = function(f) {
return function() {
(i.moengage_q = i.moengage_q || []).push({ f: f, a: arguments });
};
};
(f = [
"track_event",
"Web_Start_your_application",
"Web_Signup",
"Web_Want_BRE1_limitincrease_click",
"Web_Happy_with_BRE1limit_click",
"Web_Complete_Profile",
"Web_On_bank_statement",
"Web_Bank statement click_perfios",
"Web_Bank statement click_manual",
"Web_Suspend_bank_statement_perfios",
"Web_Suspend_bank_statement_manual",
"Web_Suspend_salaryslip",
"Web_Smart_Repay_Click",
"Web_downloadapp",
"destroy_session",
"add_unique_user_id",
"moe_events",
"call_web_push",
"track",
"location_type_attribute"
]),
(h = { onsite: ["getData"] });
for (k in f) {
t[f[k]] = q(f[k]);
}
a = s.createElement(o);
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
i.moe =
i.moe ||
function() {
n = arguments[0];
return t;
};
a.onload = function() {
if (n) {
i[r] = moe(n);
}
};
})(
window,
document,
"script",
"https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js",
"Moengage"
);
Moengage = moe({
app_id: {YOUR_APP_ID},
debug_logs: 0
});`
}}
></Script>
// If you have other scripts...
<Head>
//.....
</Head>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66329194
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号