Не удается перенести данные на уровень данных на каждой странице в angular 9

#javascript #angular #typescript

Вопрос:

Я пытаюсь добавить фрагмент GTM в свой угловой проект. Но при жесткой перезагрузке страницы он выталкивает данные. При обычной навигации этого не происходит.

Я добавил фрагмент GTM, предоставленный Google, в index.html. что мне нужно сделать следующим шагом?

Что я хочу, это нажать dta на слой данных на каждой странице навигации или на Ngonit каждой страницы?

1. Добавление фрагмента в index.html этого достаточно, если вы просто хотите отслеживать изменения маршрутизатора, так как в GTM вы можете настроить триггер, который реагирует на изменения местоположения, которые также срабатывают при изменении маршрута.

2. @mikeOne Чего я хочу добиться, так это отправлять разные данные на разные маршруты или страницы

Ответ №1:

существует множество реализованных угловых модулей, которые обеспечивают взаимодействие с GTM и предоставляют некоторые инструменты, например этот https://www.npmjs.com/package/angular-google-tag-manager вот как вы можете нажать событие при каждом изменении маршрута

 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);
              }
         });
    }
}

кроме того, вы можете переместить эту логику в Guard (не забудьте в таком случае добавить ее для маршрутизации)

1. да, я тоже использовал его, но при жесткой перезагрузке страницы он работает.

2. Уже пробовал это, но при жестком обновлении запускается gtm. не в обычной навигации

3. @Pawan добавил пример в мой пост

4. Спасибо, @icekson использовал его таким же образом, и это решило мою проблему.