npm package: @kimaya/ngx-google-sense
Description: Ngx Google Sense is used to get Google Adsense and Google Analytics in one single library
Latest version: 1.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

| 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`

```ts
@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

```ts
@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](https://github.com/gns088)