Guide to Triggering a Page View Event in Google Tag Manager with Angular

Question

Guide to Triggering a Page View Event in Google Tag Manager with Angular

Previously, I manually fired the Page View Event using JavaScript from app.component.ts while directly accessing Google Analytics:

declare var gtag: Function;
...
constructor(private router: Router) {
  const navEndEvents = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
  navEndEvents.subscribe((event: NavigationEnd) => {
    gtag('config', 'xxx', {
    page_path: event.urlAfterRedirects,
    page_title: event.urlAfterRedirects
    });
  })
}

Now, I am looking to integrate Google Analytics with Google Tag Manager. How should I now send the Page View Event?

javascript angular typescript google-analytics google-tag-manager

Answer 1

Answer №1

Using the angular-google-tag-manager package, I successfully implemented sending events to GTM with ease. To set up a Page View Event in my app.component.ts, I utilized the following code snippet:

import { GoogleTagManagerService } from 'angular-google-tag-manager';

constructor(private router: Router, private gtmService: GoogleTagManagerService) {
  const navEndEvents = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
  navEndEvents.subscribe((event: NavigationEnd) => {
    this.gtmService.pushTag({ event: 'page', pageName: event.urlAfterRedirects });
  });
}

Answer 2

Using the angular-google-tag-manager package, I successfully implemented sending events to GTM with ease. To set up a Page View Event in my app.component.ts, I utilized the following code snippet:

import { GoogleTagManagerService } from 'angular-google-tag-manager';

constructor(private router: Router, private gtmService: GoogleTagManagerService) {
  const navEndEvents = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
  navEndEvents.subscribe((event: NavigationEnd) => {
    this.gtmService.pushTag({ event: 'page', pageName: event.urlAfterRedirects });
  });
}

Guide to Triggering a Page View Event in Google Tag Manager with Angular

Answer №1

Similar questions

Set the GridToolbarQuickFilter text box to have an outlined style in Material UI v5

Best practices for using useEffect to fetch data from an API_FETCH in a certain condition

Mastering the art of correctly utilizing splice and slice

Tips for managing Angular modules post-splitting and publishing on npm

An extensive array of consequences and impacts tailored for a particular entity

What is the best way to retrieve content from a different website using javascript in an asp.net environment?

NPM IP library susceptible to Server-Side Request Forgery (SSRF) vulnerabilities

Looking for a way to scroll images without relying on the marquee tag? Whether you prefer using JavaScript, jQuery,

Steps for inserting a script tag in an Angular component

Why does mapping only give me the last item when I try to map onto an object?

What is the best method for managing an event loop during nested or recursive calculations?

Troubleshooting issues with accessing the _id property using Typescript in an Angular application

Expand the grid with extra rows once it has been generated, especially when dealing with a large volume of database records, utilizing JQGrid or JSGrid

What are the steps to clipping a canvas using CSS clip-path?

Display a delete icon when hovering over a Chip component from Material-ui

What is the method for obtaining the input value of an input type number in HTML?

Dynamically include a new prop to the final element within an array of React components

Utilizing jQuery to Perform Calculations with Objects

Guide on setting up Tailwind CSS and material-tailwind concurrently within the tailwind.config.js configuration file

Antialiasing in Three.js is failing to work properly on Google Chrome