Single Page App (SPA) Support

Single Page App (SPA) Support

If your website is a Single Page Application (SPA), then by default, MoEngage SDK does not track MOE_PAGE_VIEWED event on route change since the whole page does not reload.

In order to get the MOE_PAGE_VIEWED event tracked on every route change, pass enableSPA: true while initializing

JavaScript
<script type="text/javascript">
var moeDataCenter = "{DC}"; // Replace "DC" with the actual Data center value from the above table
var moeAppID = "{AppID}"; // Replace "AppID" available in the settings page of MoEngage Dashboard.
      
!function(e,n,i,t,a,r,o,d){if(!moeDataCenter||!moeDataCenter.match(/^dc_[0-9]+$/gm))return console.error("Data center has not been passed correctly. Please follow the SDK installation instruction carefully.");var s=e[a]=e[a]||[];if(s.invoked=0,s.initialised>0||s.invoked>0)return console.error("MoEngage Web SDK initialised multiple times. Please integrate the Web SDK only once!"),!1;e.moengage_object=a;var l={},g=function n(i){return function(){for(var n=arguments.length,t=Array(n),a=0;a<n;a++)t[a]=arguments[a];(e.moengage_q=e.moengage_q||[]).push({f:i,a:t})}},u=["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","update_unique_user_id","moe_events","call_web_push","track","location_type_attribute"],m={onsite:["getData","registerCallback"]};for(var c in u)l[u[c]]=g(u[c]);for(var v in m)for(var f in m[v])null==l[v]&&(l[v]={}),l[v][m[v][f]]=g(v+"."+m[v][f]);r=n.createElement(i),o=n.getElementsByTagName("head")[0],r.async=1,r.src=t,o.appendChild(r),e.moe=e.moe||function(){return(s.invoked=s.invoked+1,s.invoked>1)?(console.error("MoEngage Web SDK initialised multiple times. Please integrate the Web SDK only once!"),!1):(d=arguments.length<=0?void 0:arguments[0],l)},r.addEventListener("load",function(){if(d)return e[a]=e.moe(d),e[a].initialised=e[a].initialised+1||1,!0}),r.addEventListener("error",function(){return console.error("Moengage Web SDK loading failed."),!1})}(window,document,"script","https://cdn.moengage.com/release/"+moeDataCenter+"/moe_webSdk.min.latest.js","Moengage");

Moengage = moe({
  app_id: moeAppID,
  debug_logs: 0,
  enableSPA: true
});
</script>

Custom Approach

If you want to track MOE_PAGE_VIEWED on your own (it may be that the routes are changing even for some functionality and not only on page change, like opening login popup and so on), then please use Moengage.track_page_view() whenever you want to track MOE_PAGE_VIEWED event.

Progressive Web Apps (PWA)

Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.

Browser Support

As of today, Jan 2023, it is supported in Chrome and Edge Web browsers and all mobile browsers except Opera Mini and Partial support in Safari iOS.
Ref:

Moengage WebSDK support

All the functionalities will work as they are. As for Web Push, the browser via which the PWA is installed needs to remain open or should be running in the background in order to receive the web push notifications.

Sample Code has been added here.

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

Previous

Next

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

How can we improve this article?