How to setup tag manager in Single Page Application

Tag Manager
1

According to the official guide I tried these steps:

  1. Added the tracking code to the index.html of my SPA (Angular 11)
  2. Setup a “PageView” trigger in Matomo and deployed it
  3. On route change of my SPA I fire a “pageview” event like window._mtm.push({ event: 'mtm.PageView' });
  4. I also created a “HistoryChange” trigger

Unfortunately I just get records though for the initial pageload = one single entry. If the user is navigating around, I’m not able to record events. What am I doing wrong here?

For those who are familiar with Angular, here is my exact setup:

index.html:

<head>
   <script type="text/javascript">
      var _mtm = (window._mtm = window._mtm || []);
      _mtm.push({ "mtm.startTime": new Date().getTime(), event: "mtm.Start" });
      var d = document,
        g = d.createElement("script"),
        s = d.getElementsByTagName("script")[0];
      g.type = "text/javascript";
      g.async = true;
      g.src =
        "https://statistics.xyz.com/js/container_xyz.js";
      s.parentNode.insertBefore(g, s);
    </script>
</head>

app.component.ts:

constructor() {
    this.subscribeToRouterEvents();
}

subscribeToRouterEvents() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.statistics(event.url);
      }
    });
  }

statistics(url: string) {
    window._mtm.push({ event: 'mtm.PageView' });
}
1 Like
2

@matomoAngular Managed to fix this? I have the exact same problem with react.