Not able to push data to data layer on each page in angular 9

Issue

I am trying to add GTM snippet to my angular project. But on hard reload of page it's pushing data. On normal navigation it doesn't.

I have added GTM snippet provided by Google to index.html. what is the next step I need to do?

What I want is push dta to dataLayer on each page navigation or on Ngonit of each page?

Solution

there are a lot of implemented angular modules which are wrapping interaction with GTM and provide some tools, for instance this one https://www.npmjs.com/package/angular-google-tag-manager here is how you can push event on each route change

class AppComponent implements OnInit {

    constructor(
       private router: Router,
       private gtmService: GoogleTagManagerService,
    ) { }

    ngOnInit() {
    
         this.router.events.subscribe(event=> {
             if (event instanceof NavigationEnd) {
                const gtmTag = {
                        event: 'page',
                        pageName: event.url
                      };
        
                this.gtmService.pushTag(gtmTag);
              }
         });
    }
}

also, you can move this logic to Guard (do not forget in such case to add it for routing)

Answered By - icekson