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 either:
    On your website
    OR
    Use the Google Tag Manager(GTM)
  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>

Google Tag Manager (GTM)

You can use the Google Tag Manager(GTM) to integrate with the web SDK.

Insert the javascript code as a Custom HTML Tag inside GTM. Use the Tag for every page that requires tracking.

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>
 

WHEN GOING LIVE

While pushing the code to live website please ensure debug_logs: 0 is initialized to send website data to LIVE MoEngage Dashboard (top toggle switch on Dashboard to right). Moengage = moe( { app_id: "YOUR_APP_ID", debug_logs: 0 });

You might get the error Uncaught Reference Error: userID is not defined if the user id is not passed properly when you are using GTM for MoEngage SDK.

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

  Moengage = moe({
    app_id:"APP ID",
    debug_logs: 0,
    cluster: "DC_2"// DC_3
  });
</script>

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