Angular: Как правильно добавить Google Analytics в ваше приложение

Одностраничные платформы и библиотеки могут быть благословением для разработчиков, но болью, когда дело доходит до правильной реализации отслеживания и аналитики.

Если вы когда-либо работали с Google Analytics, вы столкнулись с gtag.js. Google предлагает вам установить свой код на странице в качестве первого элемента в области , которую вы хотите отслеживать.

Но когда у вас есть только одна страница, как это делают встроенные фреймворки для одностраничных приложений, такие как Angular, решение для копирования и вставки не будет работать так, как вам нужно.

Как работает Angular

Angular - это одностраничная прикладная среда, что означает, что ваш браузер технически загружает только одну страницу. Когда страница «изменяется», DOM просто обновляет часть страницы, как указано в коде JavaScript.

Компоненты - это то, что составляет части визуальной головоломки. Хотя вы можете переходить от определенного вида, а ссылка в адресной строке динамически изменяется, чтобы соответствовать, вы все еще находитесь на той же корневой странице.

Это связано с тем, что браузер не обновляет вашу страницу и новая страница не загружается. Это все та же страница - просто другое представление, и базовая реализация тега Google Analytics этого не знает.

Все начинается с кода копирования-вставки gtag.js

Есть две версии отслеживания через Google Analytics - ga и gtag. ga является устаревшей версией, вместо него лучше использовать gtag.js которой Google предлагает к внедрению.

Для начала вам нужно перейти на панель Google Analytics и найти код для копирования и вставки. Вам нужно будет скопировать этот код, поместить его в предложенный , за исключением части gtag('config', 'xx-xxxxx-xxx');.

Этот небольшой фрагмент кода просто делает библиотеку gtag.js доступной для использования вашим приложением. Функция gtag('config', 'xx-xxxxx-xxx'); выполняет часть просмотра вашей веб-страницы.

С этой функцией gtag() мы будем иметь дело для всего, что связано с Google Analytics.

Маршрутизатор событий - секрет готовки вашего Angular приложения

В Angular есть несколько методов обработки событий, которые можно использовать для доступа к определенной информации. Для Google Analytics нас интересует URL-адрес, на который перешел пользователь.

Чтобы извлечь эту информацию, мы можем использовать метод navigationEnd для доступа к свойству с именем urlAfterRedirects. Это свойство содержит часть вашего URL-адреса маршрутизации.

Таким образом, для URL, который выглядит примерно так http://localhost:4200/shop, в качестве значения будет указано /shop.

Чтобы использовать navigationEnd, вам нужно импортировать его и подписаться на событие subscribe для вызова gtag(). Вам также необходимо предоставить доступ к компоненту Angular gtag, объявив его как Function.

В целях эффективности кода вы можете поместить все это в файл app.component.ts, так как это первый файл, который вызывается и загружается на верхний уровень всего, что в итоге следует.

Короче говоря, ваш код должен выглядеть примерно так:

...
import{ Router, NavigationEnd } from '@angular/router';
...
declare let gtag: Function;
...
export class AppComponent {
 constructor(public router: Router){   
     this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            gtag('config', 'xx-xxxxx-xx', {
                'page_path': event.urlAfterRedirects
            });
         }
      }
   )}
}

Есть и другие параметры, которые вы можете использовать для дальнейшего улучшения вашего отслеживания. Со списком параметров вы можете ознакомиться на странице документации по просмотрам страниц отслеживания Google Analytics.

Отслеживание событий

Отслеживание событий добавляет еще один уровень данных в статистику Google Analytics. Его реализация, однако, немного сложнее, чем просмотры страниц, и потребует небольшого вмешательства, чтобы получить правильные данные для платформы Google.

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

Для этого вы можете использовать интерфейс командной строки для создания сервиса, а затем добавить его в свой файл app.module.ts в качестве одного из поставщиков.

Чтобы создать новый сервис с помощью CLI:

ng generate s GoogleAnalytics

Как в app.module.ts должен выглядеть ваш код:

...
import {GoogleAnalyticsService} from './google-analytics.service';
...
@NgModule({
...
  providers: [GoogleAnalyticsService],
});
...

Внутри вашего вновь созданного service файла вы создадите функцию public eventEmitter, которая будет по существу запускать gtag при ее вызове и будет гарантировать, что ваше форматирование правильное и соответствует требованиям gtag.

Вам также нужно будет объявить gtag как Function, чтобы открыть ваш сервис для загруженной извне библиотеки.

Ваш сервисный код должен выглядеть примерно так:

...
declare let gtag:Function;
...
export class GoogleAnalyticsService {
...
  public eventEmitter( 
      eventName: string, 
      eventCategory: string, 
      eventAction: string, 
      eventLabel: string = null,  
      eventValue: number = null 
  ) {
      gtag('event', eventName, { 
           eventCategory: eventCategory, 
           eventLabel: eventLabel, 
           eventAction: eventAction, 
           eventValue: eventValue
      });
  }
}

Чтобы использовать этот сервис, вам нужно импортировать его в свой компонент и запускать, когда что-то происходит - что-то вроде события нажатия кнопки, - а затем передавать значения в eventEmitter, которые вы хотите отслеживать.

Итак, в вашем HTML у вас может быть что-то вроде этого:

Add To Cart

Затем в вашем компоненте, где вы будете обрабатывать SendAddToCartEvent(), вы можете вызвать eventEmitter. Обратите внимание, что вам нужно импортировать созданный вами сервис в ваш компонент, чтобы он работал.

Код вашего компонента должен выглядеть примерно так:

...
import{GoogleAnalyticsService} from './google-analytics.service';
...
export class ShopComponent implements OnInit {
...  
  SendAddToCartEvent(){ 
    this.googleAnalyticsService.eventEmitter(
      "add_to_cart", 
      "shop", 
      "cart", 
      "click", 
      10
    );
  } 
...
}

Вы можете создавать свои собственные события и категории событий. Тем не менее, у Google есть список предопределенных событий, готовых для использования. Вы можете найти полный список здесь.