react-gpt-ads
v0.5.9-alpha
Published
Gpt library for react
Downloads
828
Maintainers
gabriellluccasReadme
react-gpt-ads
A React components for Google Publisher Tag
Requirements
| Module | Version | | ----------- | ----------- | | React | 16.8.0 | | React DOM | 16.8.0 |
Installation
Install the library using your favorite package manager:
npm install react-gpt-adsor using:
yarn add react-gpt-adsGetting Started
- First add the gpt script
import { GptScript } from react-gpt-ads
<head>
<GptScript />
</head>or using:
<head>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>- Add the Gpt component for define ad slot
import { Gpt } from react-gpt-ads
<Gpt
adUnit="ad-unit"
name="ad-name"
size={[300, 250]}
/>Gpt Props
adUnit
- type: string
- required: true
Ad unit path loaded from google ad manager.
name
- type: string
- required: true
Name used in div id
size
- type: SingleSize | MultiSize | FluidSize | ResponsiveSize
- required: true
SingleSize: [number, number] MultiSize: Array<[number, number]> FluidSize: 'fluid' Responsive: Array<[ [number, number], Array<[number, number]> ]>
Size is defined by single, multi, fluid or responsive.
target
- type: Array<[string, string | Array<string>]>
- required: false
Configure targets in slot-level
GptConfig Props
networkCode
- type: number | string
- required: true
Is a unique identifier for the Ad Manager network the ad unit belongs to.
target
- type: Array<[string, string | Array<string>]>
- required: false
Configure targets in page-level
refreshTimer
- type: number | string
- required: false
The refreshTimer prop defines how often ads are updated. It activates a function where the ads are updated in a loop and while displayed on the screen.
collapseEmptyDivs
- type: boolean
- default: false
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.
eventSlotOnload
- type: callback(event)
- required: false
This event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.
eventSlotVisibilityChanged
- type: callback(event)
- required: false
This event is fired whenever the on-screen percentage of an ad slot's area changes.
eventSlotRenderEnded
- type: callback(event)
- required: false
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.
eventSlotRequested
- type: callback(event)
- required: false
This event is fired when an ad has been requested for a particular slot.
eventSlotResponseReceived
- type: callback(event)
- required: false
This event is fired when an ad response has been received for a particular slot.