Using Appcues with Angular 2, 4 & 5

Angular 2, 4 & 5 apps are what we consider single-page apps (SPAs). They only trigger a full page load when they are first loaded. Otherwise, navigating across pages in your app doesn't trigger a page load, which means that Appcues doesn't know when the page has changed. Obviously this causes problems for content targeted by URL.

Enter the Appcues.page() call.

You can call the Appcues.page() function to tell Appcues when you're on a new page/view. This causes Appcues to look at the current page and user properties and check if there's any content that should be shown. So ideally, you'll call  Appcues.page() any time there's a navigation event or new view.

What does this look like in Angular 2, 4 & 5? We suggest using the NavigationEnd event to trigger Appcues.page():

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      window.Appcues && window.Appcues.page();
    }
  });

Still need help? Contact Us Contact Us