react-dfp-slot
A React component library to execute Google DFP logic.
Getting started
-
Install package
yarn add react-dfp-slotor
npm install react-dfp-slot -
Set the DFP provider
// App.jsimport DFPProvider from 'react-dfp-slot';{return<DFPProvider><section =>...</section></DFPProvider>;} -
Add AdSlot component with profile
import AdSlot from 'react-dfp-slot';...{return<section ="some-component-main">...<AdSlot=/></section>;}
DFPProvider
Child context
{ return getIsSlotAdReady: thisgetIsSlotAdReady setIsSlotAdReady: thissetIsSlotAdReady getIsComponentMounted: thisgetIsComponentMounted setIsComponentMounted: thissetIsComponentMounted refreshAds: thisrefreshAds clearAdSlots: thisclearAdSlots ; }
getIsSlotAdReady(slotName)
Get target slot is ready to display or not
- slotName (string): target slot name
setIsSlotAdReady(slotName, isReady)
Set target slot is ready to display or not
- slotName (string): target slot name
- isReady (bool)
getIsComponentMounted(complonentName)
Get target component is mounted or not
- componentName (string): target component name
setIsComponentMounted(complonentName, doRefreshAd)
Set target component is mounted or not
- componentName (string): target component name
- doRefreshAd (bool)
refreshAds()
Refresh all unrefreshed slots
clearAds()
Clear all unrefreshed slots
Props
propTypes: /** * Enables or disables collapsing of slot divs so that they don't * take up any space on the page when there is no ad content to display. */ collapseEmptyDivs: ProTypesbool /** * Event handler for slotRenderEnded event. */ onSlotRenderEnded: PropTypesfunc
onSlotRenderEnded(provider, event)
- provider: child context from DFPProvider
- event: GPT event
// example { const adElement = document; if eventisEmpty && adElement adElementstyledisplay = 'block'; };
AdSlot
Props
// [300, 250], [[300, 250], 'fluid'], ['fluid] const SIZE_TYPE = PropTypes; /* if responsive break point is [0, 0] and [1300, 0] ([width, height]) [ [ [0,0], [[1, 1], [650, 60], 'fluid'], ], [ [1300, 0], [[1, 1], [800, 60], 'fluid'] ] ] */ const MULTI_SIZE_TYPE = PropTypes; const ProfilePropType = PropTypesshape path: PropTypesstring // DFP code name: PropTypesstring // slot name size: SIZE_TYPE // slot size multiSize: MULTI_SIZE_TYPE // responsive size mapping multiSizeHandler: PropTypesfunc // responsive handler waitingFor: PropTypesstring // refresh ads after component didmount hideOnInitial: PropTypesbool // set display: none; on initial ; propTypes: // Profile data for slot profile: ProfilePropTypeisRequired // class name className: PropTypesstring // Init slot after specific millisecond asyncInit: PropTypesnumber // use lazyLoading mode lazyLoading: PropTypesbool /** * `topOffset` can either be a number, in which case its a distance from the * top of the container in pixels, or a string value. Valid string values are * of the form "20px", which is parsed as pixels, or "20%", which is parsed * as a percentage of the height of the containing element. * For instance, if you pass "-20%", and the containing element is 100px tall, * then the waypoint will be triggered when it has been scrolled 20px beyond * the top of the containing element. */ lazyLoadingTopOffset: PropTypes /** * `bottomOffset` is like `topOffset`, but for the bottom of the container. */ lazyLoadingBottomOffset: PropTypes // DFP setTargeting targetValue: PropTypes