Angular Yandex Metrika

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

Install

Install via npm package manager

npm install @kolkov/ngx-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 { NgxMetrikaModule } from '@kolkov/ngx-metrika';

@NgModule({
  imports: [
    RouterModule.forRoot([]),
    NgxMetrikaModule.forRoot({
      id: environment.yaCounterId,
      ...      
      defer: true,
      webvisor: true,
      clickmap: true,
      trackLinks: true,
      accurateTrackBounce: true,
    })
  ]
})

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: NgxMetrikaService) { }
}

NgxMetrika is a service that also allows you to track pageviews manually.

this.ym.hit.emit();

// or with custom params

this.ym.hit.emit({url: '/custom',{
  title: 'Lesson Feed',  
  referer: 'https://angularfirebase.com/lessons'
}});

Disable service

If we need to disable service for some reason, such as logged in into private area, we can disable it:

this.ym.disable();

If we need to re-enable service (when logoff from private area), then we can enable it:

this.ym.enable();

ReachGoal

ReachGoal expect an action.

this.ym.reachGoal.next({target: 'TARGET_NAME'})

You can optionally pass in addtional params.

function goalCallback () {
        console.log('request to Metrika sent successfully');
    }
const options: CommonOptions = {     
         params: {
            productId: product.id,
            productName: product.name,
         },
         callback: goalCallback,
      }
this.ym.reachGoal.next({target: 'ADD_TO_CART', options});

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">Track Me</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]="{ targetLabel: 'Something cool just happened' }">

   Some Product...
   
</div>

The directive will produce the following event on dragstart.

Demo

Demo is here demo

Working code for this demo at stackblitz example