Сложность установки Диспетчера тегов Google в React для Google Analytics
Я пытаюсь установить Диспетчер тегов Google на свой сайт React, но когда я читаю документацию по Диспетчеру тегов Google, он указывает, что мне следует вставить длинный тег скрипта в заголовок и тело каждой страницы:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
Однако сайты React традиционно не используют тег скрипта. Как я могу эффективно настроить свой сайт на React с помощью Диспетчера тегов Google? Существуют ли специальные теги React или JavaScript для SPA?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добавить этот скрипт в /public/index.html, поскольку это одностраничное приложение, но оно будет загружаться только один раз, если вы не добавите события, в зависимости от того, что делают ваши теги Google.
Чтобы реализовать Диспетчер тегов Google, используйте пакет NPM для дополнительных настраиваемых параметров: https://www.npmjs.com/package/react-google-tag-manager
Если вы используете Google Analytics в своем менеджере тегов, читайте ниже.
Лучший подход - использовать пакет Google Analytics React NPM: https://github.com/react-ga/react-ga
Добавьте: ReactGA.pageview(window.location.pathname + window.location.search); в вашем маршрутизаторе, чтобы убедиться, что вы получаете обращения к своей странице.
Если вы используете Диспетчер тегов Google только для Google Analytics, я бы выбрал пакет GA NPM. Поскольку React (событие с маршрутами) - это только одностраничное приложение (index.html), вам нужно будет добавить ручные события в качестве просмотров страниц, когда ваш URL-адрес изменяется или вы нажимаете свои компоненты как «страницу». Проверить документы: import ReactGA from 'react-ga'; ReactGA.initialize('UA-000000-01'); ReactGA.pageview(window.location.pathname + window.location.search);. Вы позволяете React позаботиться об аналитике вместо того, чтобы встраивать только HTML в ваш /public/index.html, который будет регистрировать только первые посещения страницы.
Когда Google Tag Manager станет полезным?
Я никогда не считал это полезным. Возможно, кто-то еще может вмешаться и предоставить свои варианты использования. Диспетчер тегов Google может стать эффективным, если вы хотите, чтобы программная область (в другом подразделении без технических знаний) контролировала часть вашей веб-реализации для выполнения действия без участия ИТ-специалистов. Если вы правильно настроите веб-сайт, у вас будет постоянный файл заголовка, в который вы можете добавить сценарий, который будет влиять на каждую страницу, например сценарий Google Analytics. Поскольку React сам по себе чудовище, я не думаю, что вы получите много пользы от Диспетчера тегов Google.
Некоторые реализации GA с использованием GTM с React / одностраничным приложением: medium.com/@j3y/…pmg.com/blog/…
Я нашел эту статью полезной в качестве менеджера тегов привязки в проекте React: medium.com/finnovate-io/…
После того, как мы ответили, сайт добавил менеджер тегов: vacha-design.com.
Я думал, что цель Диспетчера тегов Google - избежать использования событий Google Analytics. Вы говорите, что их лучше комбинировать?