В какой-то момент во время разработки веб-сайта вы, вероятно, захотите настроить инструмент веб-аналитики. Google Analytics является одним из лучших и наиболее распространенных, и хотя его чрезвычайно просто настроить в MPA (многостраничном приложении), для него требуется несколько не столь очевидных дополнительных шагов для SPA (одностраничных приложений). .
Angular создает веб-приложения как SPA, которые по определению не перезагружают весь веб-сайт при переходе на другую страницу, а вместо этого используют JavaScript для преобразования текущей страницы в следующую. По умолчанию Google Analytics отслеживает просмотры страниц при каждой полной перезагрузке, поэтому для работы в Angular необходимо прослушивать события навигации по страницам и вручную отслеживать просмотры страниц. Цель данной статьи - помочь вам в этом.
Создание учетной записи Google Analytics
Прежде всего, если у вас еще нет учетной записи Google Analytics для своего веб-сайта, вам необходимо создать ее, прежде чем продолжить. Для этого перейдите на страницу Google Analytics в Интернете, нажмите Зарегистрироваться и заполните форму на следующей странице. После этого вы попадете на страницу с кодом отслеживания.
Если у вас уже есть учетная запись, войдите в нее, нажмите кнопку «Администратор» (та, что со значком шестеренки в нижней части левого меню), а затем «Информация для отслеживания» и «Код отслеживания».
Запишите свой идентификатор отслеживания, потому что он вам скоро понадобится.
Реализация
Начните с копирования следующего кода в верхнюю часть тега заголовка вашего файла /src/index.html:
Вы, вероятно, заметите, что этот код сильно отличается от кода, предоставленного Google на странице «Код отслеживания». Это потому, что есть более новый код, который труднее заставить работать с Angular.
Вместо этого мы собираемся использовать модифицированную версию старого кода analytics.js. Вы можете спросить: Почему именно модифицированная версия, и ответ прост: исходный код просто жестко закодировал идентификатор отслеживания в файле /src/index.html. , но в проекте Angular вы должны использовать файлы среды для такого рода информации. С помощью этой версии кода можно сохранить идентификатор отслеживания в другом месте.
После создания переменной для хранения идентификатора отслеживания в файлах среды (я называю ее googleAnalyticsTrackingID), создайте AnalyticsService и настроил его вот так.
Функция createAnalytics не объявлена в конкретном контексте. Объявление его таким образом вне любого класса делает его существующим как глобальный объект, поэтому, когда createAnalytics имеет значение, определенное в сценарии в / src / index.html, это createAnalytics, получающее значение. Благодаря этому мы можем выполнять его внутри функции AnalyticsService и иметь доступ к переменным среды (что недоступно в ‹ скрипт › внутри тега /src/index.html)
Поскольку мы хотим, чтобы Google Analytics запускался как можно скорее после загрузки веб-приложения, необходимо вызвать функцию init () в ngOnInit () крючок жизненного цикла app.component.ts.
Посещение при этом не будет отслеживаться. Если вы посмотрите на исходный analytics.js, вы увидите, что там есть ga ('send', 'pageview') , который отсутствует в нашей версии кода, и именно этот вызов отслеживает просмотр страницы.
Вместо того, чтобы оставлять его там, что будет означать, что будет отслеживаться только первая посещенная страница, настройте app.component.ts, чтобы начать прослушивание событий навигации из Router при инициализации, и когда обнаруживается событие NavigationEnd, мы запускаем просмотр страницы. Если бы вызов просмотра страницы не был удален из скрипта в /src/index.html, он не будет вызываться дважды для первой посещенной страницы.
После этого ваш проект будет готов к работе с Google Analytics, и все просмотры страниц будут корректно отслеживаться.
Улучшения
То, что было сделано до сих пор, работает и может быть достаточным для ваших нужд, но есть способы улучшить. Существует пакет npm под названием Angulartics 2 с некоторыми приятными функциями, такими как простое отслеживание событий, исключение маршрутов из автоматического отслеживания страниц или удаление идентификаторов и параметров запроса из отслеживаемых URL-адресов.
При желании вы можете добавить в свой проект:
npm install angulartics2 --save
Чтобы настроить его, вам необходимо добавить «Angulartics2Module.forRoot ()» к импортируемым файлам app.module.ts (импортируйте его из 'angulartics2') и измените подписку на события маршрутизатора на вызов startTracking () из Angulartics2GoogleAnalytics.
Образец
Я создал образец проекта для своих руководств по Angular. Вы можете проверить pull request для добавления поддержки в Google Analytics, чтобы увидеть все изменения, которые вам нужно внести в свой проект.
