A Angular implementation of the google GPT API.
npm install ng-gptA Angular implementation of the Google Publisher Tags.
``bash`
npm install --save ng-gpt
Import Angular GPT and pass props to the component.
`javascript`
// app.module.ts
import { GptModule } from 'ng-gpt';
...
@NgModule({
declarations: [AppComponent],
imports: [
GptModule.forRoot({
idleLoad: true,
enableVideoAds: true,
personalizedAds: false,
singleRequestMode: false,
cookies: false,
ppid: '',
centering: true,
onSameNavigation: 'refresh',
globalTargeting: {
food: ['chicken', 'meatballs'],
},
enableLazyLoad: {
fetchMarginPercent: 500,
renderMarginPercent: 200,
mobileScaling: 2.0,
},
}),
],
providers: [],
bootstrap: [AppComponent],
})
`html`
adUnit="/35096353/pub-showcase"
[sizes]="[[728, 90]]"
[sizeMapping]="[
{ viewport: [1024, 768], sizes: [[728, 90],[300, 250]] },
{ viewport: [900, 768], sizes: [[300, 250],[210, 60]] }
]"
[targetingArguments]="{ categories: ['restaurantes', 'abogados'] }"
[collapseEmptyDivs]="true"
>
You at least need to pass adUnit and one of sizes and sizeMapping.
If you pass sizeMapping props instead of slotSize, Angular GPT listens for the viewport width change and refreshes an ad when the break point is hit.
`html
[sizeMapping]="[
{ viewport: [1024, 768], sizes: [[728, 90],[300, 250]] },
{ viewport: [900, 768], sizes: [[300, 250],[210, 60]] }
]"
>
`
`html`
[adActions]="adInput"
(adEvents)="adEvent($event)"
adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
>
controls
preload="auto"
data-setup="{}"
poster="https://img.rnudah.com/images/77/7717002808.jpg"
>
You at need to pass adTagUrl and sizes
- Getting Started A more detailed Getting Started Guide
1. Clone this repo
2. Run npm install
3. Run or npm start` for server side rendering.
4. Point your browser to http://localhost:4200
MIT