Angular и Google Analytics — Полное руководство

Кто еще хочет добавить Google Analytics в свое приложение Angular?

Добавить Google Analytics в ваше приложение Angular очень просто.

Ну, добавить его в Angular SPA не так просто по сравнению со статическими веб-сайтами, но это можно сделать быстро, если вы знаете, что делаете.

Не нужно потеть как свинья.

Или перегореть предохранитель.

В этом полном руководстве я покажу вам, как интегрировать Google Analytics в ваше приложение Angular.

Что такое Google Analytics?

Google Analytics — это мощная бесплатная аналитическая служба, предлагаемая Google. Любой может использовать его для отслеживания трафика на своем веб-сайте и составления отчетов.

По состоянию на 2019 год Google Analytics стал самым популярным сервисом веб-аналитики в Интернете. Однако Google Analytics не ограничивается только веб-сайтами. Они также предоставляют SDK, позволяющий получать данные об использовании из мобильных приложений на платформах iOS и Android.

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

Должен ли я использовать Google Analytics с Angular?

Итак, каковы некоторые из причин, по которым вам следует использовать Google Analytics?

И есть ли преимущества?

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

Первоначально он был создан для статических веб-сайтов и не предназначен для одностраничных приложений, созданных с помощью Angular (или других веб-библиотек и фреймворков). Это немного усложняет добавление Google Analytics в приложение Angular, но это выполнимо и на самом деле не так уж сложно.

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

Недостатки использования Google Analytics с Angular

Одним из самых больших недостатков использования Google Analytics является конфиденциальность.

В статье блога 2019 года о FastCompany один из их авторов рекомендовал нам отказаться от Google Analytics.

Из-за таких проблем с Google Analytics появились альтернативы, такие как Правдоподобная аналитика и Микроаналитика.

Итак, есть ли время, когда вам не следует использовать Google Analytics с Angular?

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

Как вы используете Google Analytics с Angular?

При интеграции Google Analytics в наше приложение Angular у нас есть два варианта.

• Используйте стороннюю библиотеку, созданную сообществом с открытым исходным кодом.
• Создайте нашу собственную службу Angular, которая взаимодействует с нашей учетной записью Google Analytics.

Какой из них выбрать?

Следует ли вам использовать библиотеку или создать собственный коннектор?

Очевидно, что первый вариант — это самый простой и быстрый способ использования Google Analytics с Angular. Но он может не предлагать необходимую нам настройку и отслеживание. В этом случае нам нужно будет создать собственную службу, которая взаимодействует со службами Google Analytics.

Первый шаг: настройка Google Analytics

Первый шаг — перейти на главную страницу Google Analytics и создать учетную запись.

Если у вас уже есть учетная запись, вы можете войти вместо нее.

Далее нам нужно создать новое свойство.

Дайте вашему новому свойству имя и правильно настройте другие параметры.

Ответьте на вопросы о бизнес-информации и нажмите «Создать».

Затем выберите свою платформу. В этом случае это будет Web.

Теперь вам нужно указать URL-адрес вашего веб-сайта, а также имя нового потока данных (данные, поступающие из вашего приложения Angular в Google Analytics).

Это должно привести вас на страницу, которая отображает новые сведения о веб-потоке. MEASUREMENT ID важен, и он понадобится нам для следующего шага.

Яда! Теперь вы готовы бросить

Вот как добавить Google Analytics в ваше приложение Angular (простой способ)

Первым делом необходимо установить пакет ngx-google-analytics.

npm install --save ngx-google-analytics

После установки вам нужно будет импортировать его в свой файл app.module.ts следующим образом.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxGoogleAnalyticsModule } from 'ngx-google-analytics';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxGoogleAnalyticsModule.forRoot('MEASUREMENT-ID')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Запустите приложение Angular, и вы должны увидеть нового пользователя в отчете Google Analytics в режиме реального времени.

Однако есть проблема. 🤨

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

Чтобы исправить это, все, что нам нужно сделать, это импортировать модуль NgxGoogleAnalyticsRouterModule. Так.

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavBarComponent } from './core/nav-bar/nav-bar.component';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxGoogleAnalyticsModule.forRoot('MEASUREMENT-ID'),
    NgxGoogleAnalyticsRouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

И вот как добавить Google Analytics в ваше приложение Angular простым способом.

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

Но как насчет трудного пути?

Как добавить Google Analytics в ваше приложение Angular (сложный способ)

Первый шаг — зайти в настройки своего ресурса Google Analytics и найти файл Global site tag.

Вы хотите скопировать глобальный тег сайта в head файла index.html.

Это должно выглядеть примерно так.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT-ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'MEASUREMENT-ID');
  </script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Это хорошее начало, но снова есть проблема. Мы не совсем закончили, потому что Google Analytics не получает уведомления, когда мы переходим на страницу в нашем SPA.

Чтобы это исправить, мы подпишемся на маршрутизатор Angular внутри файла app.component.ts и отправим новые маршруты в Google Analytics.

import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

declare const gtag: Function;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        gtag('config', 'MEASUREMENT-ID', { 'page_path': event.urlAfterRedirects });
      }      
    })
  }
}

Ву! Мы установили Google Analytics и теперь отправляем просмотры страниц на серверы Google Analytics.

Время для аналитики

Итак, что вы думаете об использовании Google Analytics в своем приложении Angular?

Стоит ли оно того?

И сложно ли было его настроить и запустить?

Пожалуйста, нажмите кнопку 👏 и дайте мне знать в комментариях ниже.

Сейчас мне нужно зайти в Google Analytics и проанализировать, кто просматривает мой блог.

Подпишитесь на меня: GitHub, Medium, Личный блог

Первоначально опубликовано на https://danielk.tech.