@niur/ng-gpt

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/googletag

Overview

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

License

MIT licensed.