ngx-dfp
Semantic DoubleClick for Publishers (DFP by Google) integration with Angular 6.
dfp-ad
<dfp-ad adUnit="/path-to-my/ad-unit" responsive (afterRefresh)="refreshed($event)"> <dfp-size [width]="320" [height]="50"></dfp-size> <dfp-responsive [viewport]="[800,0]" [adSizes]="[[728,90],[600,300]]"></dfp-responsive> <dfp-responsive [viewWidth]="1024"> <dfp-size [width]="970" [height]="90"></dfp-size> <dfp-size [width]="1024" [height]="90"></dfp-size> </dfp-responsive> <dfp-targeting key="food" [value]="['chicken','meatballs']"></dfp-targeting></dfp-ad>
dfp-video
<dfp-video width="640" height="480" [adActions]="adInput" (adEvents)="adEvent($event)" adTag="dfpVideoTag"> <video preload="auto" poster="/path/poster.jpg"> <source src="/assets/demo.mp4"> </video></dfp-video><button (click)="adInput.emit('play')">Play AD</button>
DfpConfig
Config dfp with the optional options below:
DfpModule.forRoot({ idleLoad: true, enableVideoAds: true, personalizedAds: false, // Request non-personalized ads singleRequestMode: true, onSameNavigation: 'refresh', globalTargeting: { food: ['chicken', 'meatballs'] }})
Demo
- Source of demo page: Demo Source
- Online demo using StackBlitz: Editor URL