如何在 ReactJs 应用程序中集成 moengage？答案

【问题标题】：How to integrate moengage in ReactJs app?如何在 ReactJs 应用程序中集成 moengage？
【发布时间】：2018-09-04 14:20:32
【问题描述】：

你们中有人成功地将Moengage 集成到 ReactJs 中吗？我已经尝试通过将它放在 HTMLWebpackPlugin 模板的 index.html 上的 <head> 标记中。

<script type="text/javascript">
    (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'];
        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'); 
</script>

我将 moengage 的配置放在一个名为“moengage.js”的文件中。所以我可以很容易地在其他文件中导入和使用它。

export const Moengage = moe({
    app_id:"APP ID",
    debug_logs: 0
});

然后，我在另一个文件中使用它

import { Moengage } from '../config/moengage.js'

...
Moengage.track_event('Loan_Data', {
      'loan_name': 'Example name',
      'loan_type_id': 123,
})

不幸的是，我的不起作用。你有没有在 ReactJs 上尝试过 moengage ？任何帮助都会很棒。谢谢

【问题讨论】：

看来你尝试了一个好方法；到底出了什么问题？是否有错误，没有任何反应，您是否检查过脚本是否正确导入（例如未定义的 Moengage 等没有错误）？
@ChrisCousins .. Chrome 开发工具的控制台中没有出现任何错误。但是，我的朋友说，在 MoEngage 的仪表板上，没有从 moengage 跟踪器触发的事件日志。

标签： reactjs moengage

【解决方案1】：

变量moe 在窗口中可用，因此将其放入配置文件将不起作用。初始化脚本必须放在<head> 标签中。

您可以在需要时通过window 访问moe 变量。在你的配置文件中，你可以尝试这样的事情： export const Moengage = window.moe({ app_id:"APP ID", debug_logs: 0 });

PS。我在 MoEngage 开发 Web SDK。如有任何进一步的疑问，请随时通过 support@moengage.com 与我们联系。

【讨论】：

哦，谢谢您的回复。稍后我会尝试并告诉你是否成功