ng-yandex-metrika

Yandex metrika for angular

Usage no npm install needed!

<script type="module">
  import ngYandexMetrika from 'https://cdn.skypack.dev/ng-yandex-metrika';
</script>

README

Angular Yandex Metrika

Модуль добавляет на страницу счетчик(и) яндекс метрики, доступны все методы API метрики. Для методов, в которые можно передать колбэк, возвращается промис, но колбэки так же работают.

Версия 2 использует АПИ второй метрики.

  npm install ng-yandex-metrika
  yarn add ng-yandex-metrika

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

import { MetrikaModule } from 'ng-yandex-metrika';

@NgModule({
  imports: [
    MetrikaModule.forRoot(
      { id: 35567075, webvisor: true }, // CounterConfig | CounterConfig[]
      // Необязательный параметр по умолчанию первый попавшийся,
      // Можно задать ид счетчика, либо порядковый номер в массиве.
      defaultCounter, // number | string
    ),
  ]
})

Если вам нужно, чтобы счетчик работал без javascript, нужно добавить это:

<noscript><div><img src="https://mc.yandex.ru/watch/put_your_id_here" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

Для отправки javascript события:

constructor(private metrika: Metrika) {}

onClick() {
  this.metrika.fireEvent('some_event_name');
}

Просмотр страницы начнет трэкается автоматически для дефолтного счетчика (либо единственного), если импортировать куда-нибудь сервис.

Для отключения нужно задать параметр trackPageViews: false.

Для отправки данных о просмотре страницы вручную:

constructor(
  private metrika: Metrika,
  private router: Router,
) {
  let prevPath = this.router.url;
  this.router
    .events
    .filter(event => (event instanceof NavigationEnd))
    .subscribe(() => {
      const newPath = this.router.url;

      if (newPath !== prevPath) {
        this.metrika.hit(newPath, {
          referer: prevPath,
        });
        prevPath = newPath;
      }
    });
}

Все настройки:

export interface CounterConfig {
  id: string | number;
  params?: any;
  clickmap?: boolean;
  trackLinks?: boolean;
  accurateTrackBounce?: boolean;
  trackPageViews?: boolean;
  webvisor?: boolean;
  trackHash?: boolean;
  ut?: string;
  ecommerce?: string;
  triggerEvent?: boolean;
  alternative?: boolean;
}