ng2-adsense

Adsense for Angular

Usage no npm install needed!

<script type="module">
  import ng2Adsense from 'https://cdn.skypack.dev/ng2-adsense';
</script>

README

ng2-adsense NPM version build status coverage status

Easy AdSense for Angular Applications

Demo: https://ng2-adsense.xmplaylist.com/

Install

npm install ng2-adsense

Dependencies

Latest version available for each version of Angular

ng2-adsense Angular
5.4.3 5.x 6.x 7.x
6.0.3 8.x
8.0.1 9.x
9.1.0 10.x 11.x
current >=12.x

Use

Add adsense code

Use the standard AdSense code somewhere in your <head></head> as you normally would

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

Import NgModule

Add AdsenseModule to the imports of your NgModule

import { AdsenseModule } from 'ng2-adsense';

@NgModule({
  imports: [
    // shown passing global defaults (optional)
    AdsenseModule.forRoot({
      adClient: 'ca-pub-7640562161899788',
      adSlot: 7259870550,
    }),
    ...

Show Ad

Uses global defaults which can be overriden via inputs

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