我在 Next.js 中实现 MoEngage 时遇到问题。
但问题是,我在NextJS中找不到index.html。我已经尝试将 _documents.tsx 放入 Head 组件下。
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 上实现这个脚本标签吗?我尝试这个方法就像我添加Google Analytics一样,它适用于Google Analytics,但不适用于MoEngage。
谢谢你。
如果您没有找到 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>