У меня есть проблема, связанная с работой фреймворка Next.js. (но это похоже на любое реагирующее приложение с динамической загрузкой контента)
Когда загружается скрипт GTM, он связывает события с элементами DOM.
Предполагается, что сценарий GTM работает один раз и не подходит для динамической загрузки DOM, поскольку он не будет привязывать события к вновь добавленным элементам DOM.
Например, если вы переходите со страницы A на страницу B, вы сохраняете события для общих элементов (верхний и нижний колонтитулы и т. Д.), Но основной контент изменяется, и с ними не связано событие GTM.
Чтобы предотвратить это, я взломал GTM и убедил его, что он еще не был инициализирован. Таким образом, при каждой навигации на стороне клиента он снова связывает все события.
Router.onRouteChangeComplete = () => {
if (isBrowser() && typeof window.gtag !== undefined) {
ga_pageview();
// XXX Destroy all data of GTM, which will make it refresh all bindings (events) the next time GTM.initialize is called
// This is a hack to make GTM works with SPA, because otherwise events don't trigger because DOM events are removed when Next.js load dynamic parts of the DOM
delete window.google_tag_manager;
}
};
Из-за этого хака мои события запускаются.
Но теперь GTM связывает эти события с частью, которая не изменилась несколько раз , и в итоге запускает 3 одинаковых события для одного и того же клика.
Я пытался найти способы предотвратить это, но не вижу ни хорошего, ни простого решения.