A Angular implementation of the Google Publisher Tags.
This library was generated with Angular CLI version 14.1.0.
Description
The Google Publisher Tag (GPT) is an ad tagging library for Google Ad Manager which is used to dynamically build ad requests. It takes key details from you (such as ad unit code, ad size, and custom targeting), builds the request, and displays the ad on web pages.
Installation
$ npm i --save @niur/ng-gpt @types/googletagOverview
Import Angular GPT and pass props to the component.
// app.module.ts
import { NgGptModule } from '@niur/ng-gpt';
...
@NgModule({
declarations: [AppComponent],
imports: [
NgGptModule.forRoot(options)
]
})Options
centering |
Enables and disables horizontal centering of ads. Centering is disabled by default. In legacy gpt_mobile.js, centering is enabled by default. |
collapseEmptyDivs |
Enables collapsing of slot divs so that they don't take up any space on the page when there is no ad content to display. |
targeting |
Sets custom targeting parameters for a given key that apply to all Publisher Ads service ad slots. |
ppid |
Sets the value for the publisher-provided ID. See the article on PPID for more details. |
address |
Passes location information from websites so you can geo-target line items to specific locations. |
forceSafeFrame |
Configures whether all ads on the page should be forced to be rendered using a SafeFrame container. |
safeFrameConfig |
Sets the page-level preferences for SafeFrame configuration. |
enableLazyLoad |
Enables lazy loading in GPT as defined by the config object. |
disableInitialLoad |
Disables requests for ads on page load, but allows ads to be requested with a googletag.pubads().refresh() call. This should be set prior to enabling the service. Async mode must be used; otherwise it will be impossible to request ads using refresh. |
privacySettingsConfig |
Configuration object for privacy settings. |
enableSingleRequest |
Enables single request mode for fetching multiple ads at the same time. |
Events
impressionViewable |
This event is fired when an impression becomes viewable, according to the Active View criteria. |
rewardedSlotClosed |
This event is fired when a rewarded ad slot is closed by the user. It may fire either before or after a reward has been granted. |
rewardedSlotGranted |
This event is fired when a reward is granted for viewing a rewarded ad. If the ad is closed before the criteria for granting a reward is met, this event will not fire. |
rewardedSlotReady |
This event is fired when rewarded ad ad is ready to be displayed. The publisher is responsible for presenting the user an option to view the ad before displaying it. |
slotOnload |
This event is fired when the creative's iframe fires its load event. When rendering rich media ads in sync rendering mode, no iframe is used so no SlotOnloadEvent will be fired. |
slotRenderEnded |
This event is fired when the creative code is injected into a slot. This event will occur before the creative's resources are fetched, so the creative may not be visible yet. If you need to know when all creative resources for a slot have finished loading, consider the SlotOnloadEvent instead. |
slotRequested |
This event is fired when an ad has been requested for a particular slot. |
slotResponseReceived |
This event is fired when an ad response has been received for a particular slot. |
slotVisibilityChanged |
This event is fired whenever the on-screen percentage of an ad slot's area changes. The event is throttled and will not fire more often than once every 200ms. |
Example
<!-- Fixed size ad slot -->
<!-- This ad slot will display an ad sized 300x250. -->
<div class="ad-container">
<gpt-ad adUnitPath="/6355419/Travel/Europe/France/Paris" [size]="[300, 250]"></gpt-ad>
</div>
<!-- Multi-size ad slot -->
<!-- This ad slot will display an ad with any of the following dimensions: 300x250, 728x90, 750x200. -->
<div class="ad-container">
<gpt-ad adUnitPath="/6355419/Travel/Europe" [size]="[
[300, 250],
[728, 90],
[750, 200],
]"></gpt-ad>
</div>
<!-- Fluid ad slot -->
<!-- This ad slot will resize its height to fit the creative content being displayed. For this example, the slot is
limited to 50% of the width of its parent container. -->
<div class="ad-container">
<gpt-ad adUnitPath="/6355419/Travel" [size]="['fluid']"></gpt-ad>
</div>
<!-- Responsive ad slot -->
<!-- This ad slot will display different sized ads depending on the size of the browser viewport at page load time: -->
<!-- When viewport= 1024x768, ads sized 750x200 or 728x90 may be displayed. -->
<!-- When 1024x768 viewport= 640x480, ads sized 300x250 may be displayed. -->
<!-- When viewport 640x480, no ads may be displayed. -->
<div class="ad-container">
<gpt-ad adUnitPath="/6355419/Travel/Europe" [size]="[
[300, 250],
[728, 90],
[750, 200],
]" [sizeMapping]="[
[
[1024, 768],
[
[750, 200],
[728, 90],
],
],
[
[640, 480],
[300, 250],
],
[[0, 0], []],
]"></gpt-ad>
</div>Stay in touch
- Author - Niurmiguel Gonzalez