Angular Yandex Metrika

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

Demo

Demo is here demo

Working code for this demo at stackblitz example

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'
}});

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" target="TRACKED">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.

What's included

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

metrika/
└── projects/
    ├── ngx-metrika/
    └── ngx-metrika-app/

ngx-metrika/ - library

ngx-metrika-app/ - demo application

Documentation

The documentation for the ngx-metrika is hosted at our website ngx-metrika

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, ngx-metrika is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Andrey Kolkov

• https://github.com/kolkov