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

| input | type | description | | ------------------- | ------------- | --------------------------------------------------- | | adClient | string | account ca-pub-XXXXXXXXXXXXXXXX | | adSlot | string/number | ad slot/number | | adFormat | string | adsense ad format | | adRegion | string | older adsense code to make all ads on page the same | | display | string | element display style | | fullWidthResponsive | boolean | enable full width responsive ad | | height | number | element height in px | | width | number | element width in px | | layout | string | used for in-feed ads | | layoutKey | string | used for in-feed ads | | pageLevelAds | boolean | enable page-level ads | | adtest | string | sets up some sort of google test ad | | className | string | add custom class names to the "ins" element |

    <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