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

Usage no npm install needed!

<script type="module">
  import noliknolikNgxMetrika from 'https://cdn.skypack.dev/@noliknolik/ngx-metrika';


Angular Yandex Metrika

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


Install via npm package manager

npm install @noliknolik/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 '@noliknolik/ngx-metrika';

  imports: [
      id: environment.yaCounterId,
      defer: true,
      webvisor: true,
      clickmap: true,
      trackLinks: true,
      accurateTrackBounce: true,


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.


// or with custom params

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


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

   Some Product...

The directive will produce the following event on dragstart.


Demo is here demo

Working code for this demo at stackblitz example