A react display ad component using Google Publisher Tag
npm install @codingcatdev/react-gptThis package was originally created by the NFL and hosted at
https://www.npmjs.com/package/react-gpt
Forked by https://github.com/mcontigo/react-gpt
We are publishing here to stay updated more regularly and host on NPM.
A React component for Google Publisher Tags.
* React 0.14+
* IE10+
Supports all rendering modes (single request mode, async rendering node and sync rendering mode)
* Supports responsive ads.
* Supports interstitial ads.
* Supports lazy render.
\* Synchronous rendering requires that the GPT JavaScript be loaded synchronously.
``
$ yarn react-gpt
React GPT depends on Promise to be available in browser. If your application support the browser which doesn't support Promise, please include the polyfill.
Import React GPT and pass props to the component.
`js
import {Bling as GPT} from "react-gpt";
class Application extends React.Component {
render() {
return (
slotSize={[728, 90]}
/>
);
}
}
`
You at least need to pass adUnitPath and one of slotSize and sizeMapping.
#### Enabling Single Request Mode
To enable Single Request Mode, call Bling.enableSingleRequest() before rendering any ad.Asynchronous Rendering Mode
It defaults to if not set.
`js
import {Bling as GPT} from "react-gpt";
GPT.enableSingleRequest();
class Application extends React.Component {
render() {
return (
The above example will make one request to the server to render both ads which makes it easier to ensure category exclusion.
#### Responsive ad
If you pass
props instead of slotSize, React GPT listens for the viewport width change and refreshes an ad when the break point is hit.`js
import {Bling as GPT} from "react-gpt";class Application extends React.Component {
render() {
return (
sizeMapping={[
{viewport: [0, 0], slot: [320, 50]},
{viewport: [750, 0], slot: [728, 90]},
{viewport: [1050, 0], slot: [1024, 120]}
]}
/>
);
}
}
`API and Documentation
* API Review the
API
* Getting Started A more detailed Getting Started Guide
* Docs Guides and API.To run examples:
1. Clone this repo
2. Run
yarn
3. Run for client side rendering, npm start` for server side rendering.Please take a moment to review the guidelines for contributing.
* Pull requests
* Development Process
MIT