MoEngage 上 NextJS答案

【问题标题】：MoEngage on NextJSMoEngage 上 NextJS
【发布时间】：2021-05-25 11:48:17
【问题描述】：

我在 Next.js 中实现 MoEngage 时遇到问题。

这是 Reactjs 的 MoEngage 文档，MoEngage ReactJS

但问题是，我在 NextJS 中找不到 index.html。我已经尝试在 Head 组件下放入 _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 上实现这个脚本标签？我尝试这种方法，就像我添加 Google Analytics 一样，它适用于 Google Analytics，但不适用于 MoEngage。

谢谢。

【问题讨论】：

您能否更具体地说明什么不起作用？因为您的方法 (nextjs.org/docs/advanced-features/custom-document) 是正确的，它应该可以按预期工作。 Moengage 有一个示例 repo，您可以参考：github.com/moengage/webSDK-sample/tree/master/nextjs

标签： next.js analytics script-tag moengage

【解决方案1】：

如果您没有找到 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>

【讨论】：