Wondering what’s next for npm?Check out our public roadmap! »

    react-gpt

    2.0.1 • Public • Published

    React GPT

    npm Version Build Status Dependency Status codecov.io PRs Welcome

    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

    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.

    License

    MIT

    Install

    npm i react-gpt

    DownloadsWeekly Downloads

    4,889

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    384 kB

    Total Files

    39

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar