Angular Yandex Metrika

A simple Yandex Mertika (Яндекс Метрика) tag.js package for Angular 14.

Based on https://github.com/kolkov project.

Install

Install via [npm][npm] package manager

npm install @snabcentr/yandex-metrika --save

Add the package to your app.module.ts. Then simple add property yaCounterId to the environment constant or use inline

import { RouterModule } from '@angular/router';
import { YandexMetrikaModule } from '@snabcentr/yandex-metrica';

@NgModule({
  imports: [
    RouterModule.forRoot([]),
    YandexMetrikaModule.forRoot(new YandexMetrikaConfig(91948419, { ... })),
  ]
})

Pageviews

The package will listen to route changes by default, you just need to instantiate service in the root of the project.

export class AppComponent {
  constructor(private ym: YandexMetrikaService) { }
}

YandexMetrika is a service that also allows you to track pageViews manually.

this.ym.hit.emit();

// or with custom params

this.ym.hit.emit(new YandexMetrikaHitConfig('some_url', { ... }));

ReachGoal

ReachGoal expect an action.

this.ym.reachGoal.next({
                           target: 'TARGET_NAME',
                           callback: (e) => {},
                           params: { },
                           ctx: element,
                       })

Goal Directive

Many analytics events are tracked based on user interaction, such as button clicks. Just tell it which DOM event to track.

<button ymGoal trackOn="click" target="BUTTON_CLICK" (click)="onClick()">Test reach goal</button>

This will register a general Target in Yandex Metrika based on the target name.

You can pass optional params to the directive like so:

<div ymGoal     
     target="PROGUCT_DRAGGED"     
     [params.params]="{ targetLabel: 'Something cool just happened' }">

   Some Product...
   
</div>

The directive will produce the following event on dragstart.

What's included

Within the download you'll find the following directories and files. You'll see something like this:

metrika/
└── projects/
    ├── yandex-metrika/
    └── yandex-metrika-example-app/

yandex-metrika/ - library

yandex-metrika-example-app/ - demo application

Documentation

The documentation hosted at Yandex Metrika.

Contributing

Ask developers: Sergey Smirnov<[email protected]>

Creators

Sergey Smirnov <[email protected]>