Web SDK Integration

Follow these steps to integrate MoEngage Web SDK either in the test or in the production environment:

  1. Perform the web SDK integration using one of the following:
    1. On your website
    2. Use the Google Tag Manager(GTM)
    3. Use Single Page App (SPA) Support
    4. Use Configure and Integrate AMP Web Push.
  2. Specify the MoEngage DataCenter for web SDK data collection
  3. Enable Whitelisting
 

REQUIRED

Required step for all web modules

MoEngage recommends that you perform the integration in the test environment first and then integrate it into the production or live environment.

TEST Integration

To integrate into the test environment:

  1. Insert the following code in the <head> tag of every page that requires tracking.
  2. Replace "APP ID" available in the settings page of MoEngage Dashboard.
    Navigate to `Dashboard --> Settings --> App --> General` and copy the APP ID.

debug_logs: 1

JavaScript
<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'],h={onsite:["getData","registerCallback"]};for(k
  in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}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:"APP ID",
  debug_logs: 1
  });
  </script>

PRODUCTION or LIVE Integration

To integrate into the production or live environment:

  1. Insert the following code in the <head> tag of every page that requires tracking.
  2. Replace "APP ID" available in the settings page of MoEngage Dashboard.
    Navigate to `Dashboard --> Settings --> App --> General` and copy the APP ID.

debug_logs: 0

JavaScript
<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'],h={onsite:["getData","registerCallback"]};for(k
  in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}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:"APP ID",
  debug_logs: 0
  });
  </script>

Whitelisting URLs

 

OPTIONAL

Optional step for all web modules

If your website is configured to block the external endpoints, then all the network calls to MoEngage fails.
Ensure that you whitelist the following endpoints for smooth integration.

script-src:

image-src:

connect-src-src:

You will get the error Refused to connect to `https://***.moengage.com/****` because it violates the following Content Security Policy directive. if you do not whitelist the URLs.

For more information, refer to Content Security Policy.

Data Redirection

Any tracked data is stored in our default data center. If you need to redirect data to a specific data center based on data regulation policy, use the following code (`cluster: "DC_X"`) to initializing the SDK to direct the data to the required data center.

Contact your account manager or email us at support@moengage.com for information on the appropriate data center for you.

JavaScript
<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'],h={onsite:["getData","registerCallback"]};for(k
  in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}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:"APP ID",
    debug_logs: 0,
    cluster: "DC_2"// DC_3
  });
</script>

 

Lifecycle Callbacks

SDK emits events on its various life cycles which can be listened to use it. 

JavaScript
    window.addEventListener("MOE_LIFECYCLE",function(e){
      if(e.detail.name === "SDK_INITIALIZED"){
        console.log(e.detail.data)
       // write you code here
      }
    })

 

Troubleshooting

Not able to debug SDK in the Test environment.

Check that the debug_logs are set to 1 while initializing the MoEngage SDK. For more information, refer to the sample code.

Logs are showing in the console of the browser in live applications.

Check that the debug_logs are set to 0 while initializing the MoEngage SDK.

What is difference between TEST & LIVE environment?

MoEngage Account provides you an option to test your integration in a staging/debug environment which we refer to as TEST environment. LIVE environment is meant to contain the data about your actual users/customers from your live website.
MoEngage Web SDK uses a parameter debug_logs: 1 to detect that you are integrating in TEST environment. When you decide to take your website LIVE, just pass the parameter debug_logs: 0 and all data about your actual users would start appearing in LIVE environment

Reach out to us directly from your MoEngage Dashbaord -> Need Help? -> Contact Support or send an email to support@moengage.com.

Was this article helpful?
0 out of 0 found this helpful