Package Exports
- react-ad-manager
- react-ad-manager/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ad-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
📮 + ⚛️
react-ad-manager
A React component for Google Ad Manager, created to serve Ads on the 🖖🏻 Jovem Nerd website (https://jovemnerd.com.br).
Demo
Installation
Install the library using your favorite package manager:
npm install react-ad-manageror using:
yarn add react-ad-managerGetting Started
First add the Google Publisher Tags script on your application
import { AdScript } from 'react-ad-manager'
;<head>
<AdScript />
</head>or using:
<head>
<script
async
src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'
></script>
</head>then, create the Ad component for define ad slot
import { Ad } from react-ad-manager
<Ad
adUnit='/6355419/Travel/Europe'
name='div-name'
size={[300, 250]}
/>Ad Props
import { Ad } from react-ad-manager
<Ad
adUnit='/6355419/Travel/Europe'
name='div-name'
size={[
[[1024, 768], [[750, 200], [728, 90]]],
[[640, 480], [[300, 250]]],
]}
target={[['color', 'red']]}
refreshTimer={5000}
type='INTERSTITIAL'
eventImpressionViewable={(e) => console.log(e.slot)}
eventSlotOnload={(e) => console.log(e.slot)}
eventSlotRenderEnded={(e) => console.log(e.slot)}
eventSlotRequested={(e) => console.log(e.slot)}
eventSlotResponseReceived={(e) => console.log(e.slot)}
eventSlotVisibilityChanged={(e) => console.log(e.slot)}
/>adUnit
Ad unit path loaded from Google Ad Manager.
- type: string
- required: true
name
Name used in div id
- type: string
- required: true
size
Size is defined by single, multi, fluid or responsive. See more information at Ad sizes - Google Developers .
- type: SingleSize | MultiSize | FluidSize | ResponsiveSize
- required: true
SingleSize: [number, number]
MultiSize: Array<[number, number]>
FluidSize: 'fluid'
Responsive: Array<[ [number, number], Array<[number, number]> ]>
target
Configure targets in slot-level
- type: Array<[string, string | Array<string>]>
- required: false
refreshTimer
The refreshTimer prop defines how often the ad are updated. It activates a function where the ads are updated in a loop and while displayed on the screen. The prop is set in milliseconds.
- type: number | string
- required: false
type
Define Out-of-page formats supported by Google Tag Manger. See more information at Enum Types - Google Developers.
- type: string
- required: false
- value: 'INTERSTITIAL' | 'TOP_ANCHOR' | 'BOTTOM_ANCHOR' | undefined
eventSlotOnload
This event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.
- type: callback(event)
- required: false
eventSlotVisibilityChanged
This event is fired whenever the on-screen percentage of an ad slot's area changes.
- type: callback(event)
- required: false
eventSlotRenderEnded
This event is fired when the ad unit is injected into a slot. This event will occur before the ad are fetched, so the ad may not be visible yet.
- type: callback(event)
- required: false
eventSlotRequested
This event is fired when an ad has been requested for a particular slot.
- type: callback(event)
- required: false
eventSlotResponseReceived
This event is fired when an ad response has been received for a particular slot.
- type: callback(event)
- required: false
Global Props
It is possible set global props using the component <AdConfig>:
import { AdScript, AdConfig } from react-ad-manager
<head>
<AdScript />
<AdConfig
networkCode={1}
target={[['global', 'true']]}
collapseEmptyDivs={true}
eventImpressionViewable={(e) => console.log(e.slot)}
eventSlotOnload={(e) => console.log(e.slot)}
eventSlotRenderEnded={(e) => console.log(e.slot)}
eventSlotRequested={(e) => console.log(e.slot)}
eventSlotResponseReceived={(e) => console.log(e.slot)}
eventSlotVisibilityChanged={(e) => console.log(e.slot)}
/>
</head>networkCode
Is a unique identifier for the Ad Manager network the ad unit belongs to.
- type: number | string
- required: true
target
Configure targets in page-level
- type: Array<[string, string | Array<string>]>
- required: false
collapseEmptyDivs
Enables collapsing of slot divs if have ad content to display. If true the div collapse mode will be enable and if false the slot div won't collapse.
- type: boolean
- default: false
eventSlotOnload
This event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.
- type: callback(event)
- required: false
eventSlotVisibilityChanged
This event is fired whenever the on-screen percentage of an ad slot's area changes.
- type: callback(event)
- required: false
eventSlotRenderEnded
This event is fired when the ad unit is injected into a slot. This event will occur before the ad are fetched, so the ad may not be visible yet.
- type: callback(event)
- required: false
eventSlotRequested
This event is fired when an ad has been requested for a particular slot.
- type: callback(event)
- required: false
eventSlotResponseReceived
This event is fired when an ad response has been received for a particular slot.
- type: callback(event)
- required: false