@wwei/dfp v16.2.0

@wwei/dfp

@wwei/dfp is an angular (>=12) module for displaying google dfp ads using Google Publisher Tag (Doubleclick GPT).

This library was generated with Angular CLI version 12.0.4.

Usage

Add DfpModule to the imports of your NgModule.

import { DfpModule } from '@wwei/dfp';

@NgModule({
  imports: [
    ...
    DfpModule,
  ],
  ...
})
export class AppModule {}
...

Use googletag.PubAdsService to customize page-level settings before the service is enabled.

import { DfpService } from '@wwei/dfp';

@Component({
  selector: 'app-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private dfp: DfpService) {
    // Use googletag to customize page-level settings
    this.dfp.cmd(() => {
      googletag.pubads().collapseEmptyDivs();
      googletag.pubads().enableSingleRequest();
      ...
    });
  }
}

Use DfpAdDirective in angular templates to define and display advertisements.

<div
  *dfpAd="{
    unitPath: '/6355419/Travel/Europe',
    id: 'ad-div-id',
    size: [
      [300, 250],
      [728, 90],
      [750, 200]
    ],
    sizeMapping: [
      [
        [750, 0],
        [
          [750, 200],
          [728, 90]
        ]
      ],
      [
        [300, 0],
        [300, 250]
      ],
      [[0, 0], []]
    ],
    categoryExclusion: 'AirlineAd',
    clickUrl: 'http://www.example.com?original_click_url=',
    collapseEmptyDiv: [true, true],
    forceSafeFrame: true,
    safeFrameConfig: { sandbox: true },
    targeting: { test: 'refresh' },
    adsense: { adsense_test_mode: 'on' }
  }"
></div>

The following settings can override the above settings with the same name.

<div
  *dfpAd="
    '/6355419/Travel/Europe';
    id: 'ad-div-id';
    size: [
      [300, 250],
      [728, 90],
      [750, 200]
    ];
    sizeMapping: [
      [
        [750, 0],
        [
          [750, 200],
          [728, 90]
        ]
      ],
      [
        [300, 0],
        [300, 250]
      ],
      [[0, 0], []]
    ];
    categoryExclusion: 'AirlineAd';
    clickUrl: 'http://www.example.com?original_click_url=';
    collapseEmptyDiv: [true, true];
    forceSafeFrame: true;
    safeFrameConfig: { sandbox: true };
    targeting: { test: 'refresh' };
    adsense: { adsense_test_mode: 'on' };
  "
></div>

Links