@kimaya/ngx-google-sense v1.0.1

Ngx Google Sense

Ngx Google Sense is used to get Google Adsense and Google Analytics in one single library

Using this library makes easy to use or implement Google Adsense or google analytics in angular application

Installation

npm i @kimaya/ngx-google-sense

Integrate

Import NgxGoogleSenseModule.forRoot() in your module

Usage of google adsense

Add component as selector in your component

    <ngx-google-adsense></ngx-google-adsense>

Inputs

    <ngx-google-adsense
      [adClient]="'xx-xxx-xxxxxxxxxxxxxxxx'"
      [adSlot]="xxxxx"
      [width]="320"
      [height]="108"
      [className]="'class-name'">
    </ngx-google-adsense>

Usage of google analytics

Usage of Google Analytics is little different from google adsense usage

1. Add NgxGoogleAnalyticsService in constructor

constructor(private ngxGoogleAnalyticsService: NgxGoogleAnalyticsService) {}   

2. need to call initialize function of ngxGoogleAnalytics service in start of appilication (so it will set and load script according to trackingId)

this.ngxGoogleAnalyticsService.initialize({
      enableTracing: true,
      trackingCode: 'x-xxxxxxxxx'
});

3. Then you can call event of ngxGoogleAnalyticsService

@Component(...)
export class TestFormComponent {

  constructor(
    private ngxGoogleAnalyticsService: NgxGoogleAnalyticsService
  ) {
  }

  onUserInputName() {
  ...
    this.ngxGoogleAnalyticsService.event('enter_name', 'user_register_form', 'Name');
  }

  onUserInputEmail() {
  ...
    this.ngxGoogleAnalyticsService.event('enter_email', 'user_register_form', 'Email');
  }

  onSubmit() {
  ...
    this.ngxGoogleAnalyticsService.event('submit', 'user_register_form', 'Enviar');
  }

}

Call GA Page Views and Virtual Page Views

@Component(...)
export class TestPageComponent implements OnInit {

  constructor(
    protected ngxGoogleAnalyticsService: NgxGoogleAnalyticsService
  ) {
  }

  ngOnInit() {
    this.ngxGoogleAnalyticsService.pageView('/teste', 'Teste de Title')
  }

  onUserLogin() {
  ...
    this.ngxGoogleAnalyticsService.pageView('/teste', 'Teste de Title', undefined, {
      user_id: 'my-user-id'
    })
  }

}

Further help

To get more help Ganeshram Kumhar