react-ad-manager
Advanced tools
Install the library using your favorite package manager:
npm install react-ad-manager
or using:
yarn add react-ad-manager
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]}
/>
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)}
/>
adUnitAd unit path loaded from Google Ad Manager.
nameName used in div id
sizeSize is defined by single, multi, fluid or responsive. See more information at Ad sizes - Google Developers .
SingleSize: [number, number]
MultiSize: Array<[number, number]>
FluidSize: 'fluid'
Responsive: Array<[ [number, number], Array<[number, number]> ]>
targetConfigure targets in slot-level
refreshTimerThe 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.
typeDefine Out-of-page formats supported by Google Tag Manger. See more information at Enum Types - Google Developers.
eventSlotOnloadThis event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.
eventSlotVisibilityChangedThis event is fired whenever the on-screen percentage of an ad slot's area changes.
eventSlotRenderEndedThis 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.
eventSlotRequestedThis event is fired when an ad has been requested for a particular slot.
eventSlotResponseReceivedThis event is fired when an ad response has been received for a particular slot.
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>
networkCodeIs a unique identifier for the Ad Manager network the ad unit belongs to.
targetConfigure targets in page-level
collapseEmptyDivsEnables 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.
eventSlotOnloadThis event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.
eventSlotVisibilityChangedThis event is fired whenever the on-screen percentage of an ad slot's area changes.
eventSlotRenderEndedThis 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.
eventSlotRequestedThis event is fired when an ad has been requested for a particular slot.
eventSlotResponseReceivedThis event is fired when an ad response has been received for a particular slot.
FAQs
A React component for Google Ad Manager
The npm package react-ad-manager receives a total of 1,088 weekly downloads. As such, react-ad-manager popularity was classified as popular.
We found that react-ad-manager demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.