Мощный инструмент аналитики для приложений Angular: Angulartics2

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

Простое решение

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

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

Погружение в некоторые простые фрагменты кода

Подключить Angulartics2 к вашему приложению Angular просто и аналогично любому другому модулю:

// main component
import { Angulartics2GoogleAnalytics } from 'angulartics2';
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `<router-outlet></router-outlet>` // Or what your root template is.
})
export class AppComponent {
  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}

// bootstrap
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';

const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES),

    Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

Вы должны импортировать Angulartics2Module.forRoot() в свой основной модуль и передать массив с используемыми вами провайдерами.

Затем в вашем основном компоненте вам нужно передать каждого провайдера функции конструктора компонента. Вот и все, теперь у вас есть автоматическое отслеживание страниц.

Убедитесь, что вы также импортировали RouterModule в свой основной модуль. Angulartics2 использует Router для отслеживания текущего состояния вашего приложения.

Отслеживание пользовательских событий

После настройки Angulartics2 вы можете легко запускать пользовательские события:

// component
import { Component } from '@angular/core';

@Component({
  selector: 'song-download-box',
  template: `
<div angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="{{ song.name }}" [angularticsProperties]="{label: 'Fall Campaign'}">Download</div>
`,
})
export class SongDownloadBox {
  private song:any = {
    name: 'Genesis by Justice'
  }
}

import { NgModule } from '@angular/core';
import { Angulartics2Module } from 'angulartics2';

@NgModule({
  imports: [
    Angulartics2Module.forChild()
  ],
  declarations: [
    SongDownloadBox
  ]
})

Вам просто нужно импортировать Angulartics2Module.forChild() в свои модули и использовать директиву angulartics2On в своих шаблонах.

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

// component
import { Component } from '@angular/core';
import { Angulartics2 } from 'angulartics2';

@Component({
  selector: 'my component',
  template: ``,
})
export class MyComponent {
  constructor(angulartics2: Angulartics2) {
    this.angulartics2.eventTrack.next({ action: 'myAction', properties: { category: 'myCategory', label: 'myLabel' }});
  }
}

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

В настоящее время мы поддерживаем провайдеров для:
— Google Analytics
— Google Tag Manager
— Kissmetrics
— Mixpanel
— Piwik< br /> — Сегмент
— Baidu Analytics
— Пиксель Facebook

Как и большинство хороших работ, это не могло быть сделано без помощи великих участников. Большое спасибо за всю помощь: Натан Уокер, Джонатан Рейес, Нильс Кристиан, Роланд Олденгарм, Крис, Тим Эльфельт, Мэттью Дэниелс, Адам С. Киршнер, Хунбо Мяо, Смитхи и Жулио Сезар.

Кстати,

Я соучредитель Altar.io и 10kStartup.com. Мы являемся командой технологов-основателей, базирующихся в Лондоне / Лиссабоне и помогающих клиентам оставаться на шаг впереди технологий и продуктов. Если вы хотите получить подсказку об Angular2/Javascript/dev в целом, давайте поговорим в Messenger. Кроме того, ознакомьтесь с моим профилем и получите доступ к библиотекам, автором которых я являюсь, на GitHub.

Спасибо за чтение,
Жоао

Спасибо, что поделились, если считаете эту статью полезной.

Не стесняйтесь высказывать сомнения или вопросы, а также критиковать 💬 сколько угодно :)