React GPT

A React component for Google Publisher Tags.

Requirements

• React 0.14+

Browser Requirements

• IE10+

Features

• 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.

Installation

$ 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.

Getting Started

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.

Enabling Single Request Mode

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.

Responsive ad

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 and Documentation

• API Review the React GPT 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 npm run examples for client side rendering, npm start for server side rendering.
4. Point your browser to http://localhost:8080

Contributing to this project

Please take a moment to review the guidelines for contributing.

• Pull requests
• Development Process

License

MIT

2.0.1 (2018-03-13)

Code Refactoring

• Adds onSlotOnload event
• Allows ["fluid"] slotSize as an array

2.0.0 (2018-01-04)

Bug Fixes

• Removed test util dependencies from distribution (27187e0)

Migration notes

< 2.0.0 you may have imported createManagerTest like this:

import {createManagerTest} from "react-gpt";

>= 2.0.0 you now need to import createManagerTest like this:

import {createManagerTest} from "react-gpt/es/utils/createManagerTest";

1.1.1 (2017-11-08)

Bug Fixes

• Fixed bug in example Router project (7687ee9)

Code Refactoring

• Updated to support React 16 and unit tests refactored for React 16 (84264e7)

1.0.1 (2017-09-19)

Bug Fixes

• package.json: Add es folder to published package (2aa1a03)

1.0.0 (2017-09-18)

Features

• createManager: Export AdManager (#53) (9ed1807), closes #42
• package.json: Add Yarn (#38) (8b7a570)
• package.json: Export es modules (#54) (2d7a3ec), closes #29

0.3.0 (2017-09-18)

Code Refactoring

• Throttles scroll-check to render ad faster (7130060a)
• Use smaller invariant / canUseDom dependencies (b187381)

Features

• Check bundle-size on PR (8e51e26)
• Upgrade eslint and introduce prettier (17c8b89)

0.2.5 (2017-07-31)

Bug Fixes

• Add yarn.lock (b7c7c50)
• Import PropTypes from prop-types package (34b61be)
• Move MockGPT out of distribution files (775fe26)
• Import ReactTestUtils from test-utils (75e74f6)

0.2.4 (2017-03-23)

Bug Fixes

• more gracefully handle adSlot becoming empty object due to AdBlocker (7f9a989)

0.2.3 (2017-02-21)

Bug Fixes

• fix calling the same pubads API on Bling not overriding the previous one (fc374b6)

0.2.2 (2016-10-13)

Code Refactoring

• API: update GPT API list (993c0e0)

0.2.1

Features:

• Initial release