https://github.com/hwrdy/react-dfp-slot
React based DFP library
https://github.com/hwrdy/react-dfp-slot
babel dfp es6 gpt react
Last synced: 3 months ago
JSON representation
React based DFP library
- Host: GitHub
- URL: https://github.com/hwrdy/react-dfp-slot
- Owner: Hwrdy
- License: mit
- Created: 2017-07-30T07:11:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-11T06:13:13.000Z (over 7 years ago)
- Last Synced: 2025-03-16T17:39:25.452Z (3 months ago)
- Topics: babel, dfp, es6, gpt, react
- Language: JavaScript
- Size: 104 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dfp-slot
[](http://badge.fury.io/js/react-dfp-slot)
A React component library to execute Google DFP logic.
## Getting started
1. Install package
```bash
yarn add react-dfp-slot
```
or
```bash
npm install react-dfp-slot
```
2. Set the DFP provider
```jsx
// App.js
import { DFPProvider } from 'react-dfp-slot';
render() {
return (
...
);
}
```
3. Add AdSlot component with profile
```jsx
import { AdSlot } from 'react-dfp-slot';
class SomeComponent extends Component {
...
render() {
return (
...
);
}
}
```
## DFPProvider
### Child context
```jsx
getChildContext() {
return {
getIsSlotAdReady: this.getIsSlotAdReady,
setIsSlotAdReady: this.setIsSlotAdReady,
getIsComponentMounted: this.getIsComponentMounted,
setIsComponentMounted: this.setIsComponentMounted,
refreshAds: this.refreshAds,
clearAdSlots: this.clearAdSlots,
};
}
```
#### 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
```jsx
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: ProTypes.bool,
/**
* Event handler for slotRenderEnded event.
*/
onSlotRenderEnded: PropTypes.func,
},
```
#### onSlotRenderEnded(provider, event)
- provider: child context from DFPProvider
- event: [GPT event](https://developers.google.com/doubleclick-gpt/reference#googletageventsslotrenderendedevent)
```js
// example
handleSlotRenderEnded = (provider, event) => {
const adElement = document.getElementById(`${event.slot.getSlotElementId()}-container`);
switch (event.slot.getAdUnitPath()) {
case AdProfiles.idleBannerCenter.path: {
provider.setIsSlotAdReady(AdProfiles.idleBannerCenter.name, !event.isEmpty);
break;
}
default:
break;
}
if (event.isEmpty && adElement) {
adElement.style.display = 'block';
}
};
```
## AdSlot
### Props
```js
// [300, 250], [[300, 250], 'fluid'], ['fluid]
const SIZE_TYPE = PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.number]),
);
/* 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.arrayOf(PropTypes.arrayOf(AD_SIZE_TYPE));
const ProfilePropType = PropTypes.shape({
path: PropTypes.string, // DFP code
name: PropTypes.string, // slot name
size: SIZE_TYPE, // slot size
multiSize: MULTI_SIZE_TYPE, // responsive size mapping
multiSizeHandler: PropTypes.func, // responsive handler
waitingFor: PropTypes.string, // refresh ads after component didmount
hideOnInitial: PropTypes.bool, // set display: none; on initial
});
propTypes: {
// Profile data for slot
profile: ProfilePropType.isRequired,
// class name
className: PropTypes.string,
// Init slot after specific millisecond
asyncInit: PropTypes.number,
// use lazyLoading mode
lazyLoading: PropTypes.bool,
/**
* `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.oneOfType([PropTypes.number, PropTypes.string]),
/**
* `bottomOffset` is like `topOffset`, but for the bottom of the container.
*/
lazyLoadingBottomOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
// DFP setTargeting
targetValue: PropTypes.arrayOf(PropTypes.string),
},
```