Angular + Google Analytics: tracking page views with the new analytics

I have multiple angular applications that have been tracking page views with logic similar to the one described in this blog.

I will also add the relevant code pieces here to avoid third party reference.

Adding gtag dependency in the head of every page (this is also described in Google analytics docs):

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

React to router events so that you tell GA to use the new page title, although Angular apps are SPAa:

export class AppRoutingModule {
  constructor(public router: Router) {
    this.router.events.subscribe(event => {

        if (event instanceof NavigationEnd) {
            gtag('config', 'GA_MEASUREMENT_ID',
                {'anonymize_ip': true},
                {
                    'page_path':
                    event.urlAfterRedirects
                }
            );
        }

    });
  }
}

Obviously, I replace GA_MEASUREMENT_ID with my real tracking id. So this has been working previously in all cases in which I had a 'UA-xxxxxxx' (universal analytics) tracking id. Now, for the first time I got Google Analytics 4 tracking id (G-xxxxx) and things just don't want to work. No page views are tracked.

What I have tried:

I am debugging using the real time tracking view, which is also changed for the new analytics. Still, I hoped that what I want will be tracked in the page view section. Still, only the hostname is visible there for me.
I noticed that these analytics have different configuration, e.g. there is data stream configuration, which I am not sure the purpose of, but I assumed I need to add my host there. I added it and still my page views are not visible.
This tracking id is created through google tag manager and I initially tried configuring the dependency using the Google Tag manager instructions, but as this did not work out, I switched back to the analytics tracking configuration described in my post.
Now I am writing a SO question with the hope that someone else already got this working and he/she will help me.

I am not sure this is the answer of your question, but since I have been struggling with the same thing over the last few days, I will share my experience.

I believe your setup is still relevant. If you are using solely google tag manager, you might get the gtag() not defined Reference error, and it is fixed if you add the following lines in the <head> of your index.html immediately after adding the Google tag manager (This is taken as approach from this SO thread)

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

If you are manually adding the GA tag in the index.html, you should be fine.

What was hard for me to realize, and it might be your case as well, is that GA4 by default shows page titles instead of page paths(or locations). In my case the page title was the same as the domain name, so I was left with the impression of GA tag not firing correctly when changing pages. However, as described here, in order to investigate page paths/locations one need to have a look at the Engagement menu. There are different options but one might go to Engagement/Events, then click on Page views, and switch from User engagement > Page title to User engagement > Page paths. In the video, other options are described and some brief overview of the custom analytics dashboards capabilities is given.

Regarding being able to see page paths in realtime, I am not sure this is still possible, or at least I have not been able to find a way to do that.

I will appreciate if anyone pops into the discussion and shares their knowledge, as GA4 is definitely a bit hard to navigate and the documentation is not very clear.

Recommended topics

Hot tags