ng2-adsense

Demo: https://scttcper.github.io/ng2-adsense/

1. Install

npm install ng2-adsense --save

2. Place Code

Use the standard AdSense code somewhere on your index.html.

<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>

3. Add to NgModule

Add AdsenseModule to the imports of your NgModule

import { AdsenseModule } from 'ng2-adsense';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // shown passing optional global defaults
    AdsenseModule.forRoot({
      adClient: 'ca-pub-7640562161899788',
      adSlot: 7259870550,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Use

Use global defaults

<ng-adsense></ng-adsense>

adClient and adSlot will override the global defaults if set
display, width, height are all applied to the "ins" element and help specify size for ads
layout, layoutKey are available for in feed ads

<ng-adsense
  [adClient]="'ca-pub-7640562161899788'"
  [adSlot]="7259870550"
  [display]="'inline-block'"
  [width]="320"
  [height]="108">
</ng-adsense>

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng2-adsense: