0

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

Rido
  • 717
  • 4
  • 10
  • 23
  • It looks like you've tried a good approach; what exactly is going wrong? Are there errors, does nothing happen, have you checked the script is correctly imported (for instance no errors about undefined Moengage etc)? – Chris Cousins Sep 04 '18 at 14:25
  • @ChrisCousins .. Nothing errors appear in the console of Chrome Dev Tools. But, my friend of mine said that on MoEngage's Dashboard, there is no log of event that has been fired from moengage tracker. – Rido Sep 04 '18 at 14:30

1 Answers1

1

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 support@moengage.com for any further queries.

sinapda
  • 81
  • 2
  • Oh, thanks for your reply. I will try it later and let you know if it have success – Rido Sep 05 '18 at 14:28
  • i try to use moengage with Nuxt. I follow the webSDK example here https://github.com/moengage/webSDK-sample/blob/master/nuxt-spa/plugins/moe.js#L54 But if i use `inject('moengage', Moengage)` in Nuxt, it wont work. It only work if we call via `window.Moengage`, why? – Bagaskara Aug 24 '22 at 10:15