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.
$ npm install --save 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.
import {Bling as GPT} from "react-gpt";
class Application extends React.Component {
render() {
return (
<GPT
adUnitPath="/4595/nfl.test.open"
slotSize={[728, 90]}
/>
);
}
}You at least need to pass adUnitPath and one of slotSize and sizeMapping.
To enable Single Request Mode, call Bling.enableSingleRequest() before rendering any ad.
It defaults to Asynchronous Rendering Mode if not set.
import {Bling as GPT} from "react-gpt";
GPT.enableSingleRequest();
class Application extends React.Component {
render() {
return (
<div id="ad-1">
<GPT
adUnitPath="/4595/nfl.test.open"
slotSize={[728, 90]}
/>
</div>
<div id="ad-2">
<GPT
adUnitPath="/4595/nfl.test.open"
slotSize={[300, 250]}
/>
</div>
);
}
}The above example will make one request to the server to render both ads which makes it easier to ensure category exclusion.
If you pass sizeMapping props instead of slotSize, React GPT listens for the viewport width change and refreshes an ad when the break point is hit.
import {Bling as GPT} from "react-gpt";
class Application extends React.Component {
render() {
return (
<GPT
adUnitPath="/4595/nfl.test.open"
sizeMapping={[
{viewport: [0, 0], slot: [320, 50]},
{viewport: [750, 0], slot: [728, 90]},
{viewport: [1050, 0], slot: [1024, 120]}
]}
/>
);
}
}- API Review the
React GPTAPI - Getting Started A more detailed Getting Started Guide
- Docs Guides and API.
- Clone this repo
- Run
npm install - Run
npm run examplesfor client side rendering,npm startfor server side rendering. - Point your browser to http://localhost:8080
Please take a moment to review the guidelines for contributing.
MIT