@le2xx/ng-yandex-metrika
v18.0.0
Published
Yandex metrika for angular
Downloads
33
Readme
Angular Yandex Metrika
Модуль добавляет на страницу счетчик(и) яндекс метрики, доступны все методы API метрики. Для методов, в которые можно передать колбэк, возвращается промис, но колбэки так же работают.
npm install ng-yandex-metrika
Чтобы подключить, нужно добавить скрипт в шаблон, либо подключить с помощью загрузчика модулей, и подключить в приложение.
import { MetrikaModule } from 'ng-yandex-metrika';
@NgModule({
imports: [
MetrikaModule.forRoot(
{ id: 35567075, webvisor: true }, // CounterConfig | CounterConfig[]
{
// Можно задать ID счетчика, либо порядковый номер в массиве, необязательный параметр, по умолчанию первый
defaultCounter,
// Для загрузки метрики с другого источника
alternativeUrl: 'https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js',
},
),
]
})
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
// ...
importProvidersFrom(
MetrikaModule.forRoot([
{ id: 35567075, webvisor: true },
{ id: 35567076 },
])
),
]
};
Если вам нужно, чтобы счетчик работал без javascript, нужно добавить это:
<noscript><div><img src="https://mc.yandex.ru/watch/put_your_id_here" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
Для отправки javascript цели можно вызвать метод вручную:
export class AppComponent {
constructor(private metrika: Metrika) {}
onClick() {
this.metrika.reachGoal('a_goal_name');
}
}
Или использовать директиву:
<!-- eventName по умолчанию click -->
<button metrikaGoal goalName="test" eventName="mouseover">Click me</button>
<button metrikaGoal goalName="test" [counterId]="123456">Click me</button>
Для отправки данных о просмотре:
import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
import { Location } from '@angular/common';
import { filter } from 'rxjs/operators';
export class AppComponent {
constructor(
private metrika: Metrika,
private router: Router,
location: Location,
@Inject(PLATFORM_ID) platformId: Object,
) {
if (isPlatformServer(platformId)) {
return;
}
let prevPath = location.path();
this.router
.events
.pipe(filter(event => (event instanceof NavigationEnd)))
.subscribe(() => {
const newPath = location.path();
this.metrika.hit(newPath, {
referer: prevPath,
callback: () => { console.log('hit end'); }
});
prevPath = newPath;
});
}
}