@kimaya/ngx-google-sense

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