How to integrate moengage in ReactJs app?

Has any one of you successfully integrate Moengage in ReactJs ? I have try it by put this inside <head> tag on index.html of HTMLWebpackPlugin's template.

<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>

I put the moengage's config in a file called 'moengage.js'. So i can easily import & use it in another files.

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

Then, i use it in another file

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

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

Unfortunately, mine doesn't work. Did you ever try moengage on ReactJs ? Any help would be great. Thank you

Solution

The variable moe is available in the window and thus putting it in a config file will not work. The initialization script has to be placed in the <head> tag.

You can access the moe variable through the window wherever required. In your config file you can try something like this: export const Moengage = window.moe({ app_id:"APP ID", debug_logs: 0 });

PS. I develop the Web SDK at MoEngage. Please feel free to reach out to us at [email protected] for any further queries.