how can scripts get the current route location in SPA

Question

I am trying to add tracking script in.js file to my angular 12 application.

(function() {
    var ds = document.getElementsByTagName("script")[0];
    var dm = document.createElement("img");
    dm.width = 1;
    dm.height = 1;
    dm.alt = " ";
    dm.src = "https://example.com/url=" + window.location.href;
    ds.parentNode.insertBefore(dm, ds);
})();

Script fires properly on the first page, but doesn't fire on navigating to another page on my website. When i check in elements window.location.href is not changing for the new page. It is because of SPA. How can i get latest location on all pages and script to fire on all pages

Answer 1

You could do it the Angular way, although idk if that will work.

You can go into your root component (should be AppComponent), and simply throw this inside the constructor or ngOnInit()

@Component({
 ...
})
export class AppComponent {
  constructor(router: Router) {
    router.events.pipe(
      filter(route => route instanceof NavigationEnd),
      concatMap((route) => ajax('https://example.com/url=' + route.url)),
    ).subscribe();
  }
}

Unless you need your tracker to be an Img for some reason, or you get permission / CORS issues. This should work nicely