React DFP ·

A React implementation of the google DFP api. This package is inspired in the awesome library jquery.dfp, and aims to provide its same ease of usage but, of course, taking into consideration the react concepts & lifecycle features.

Installation:

To install just run the following command (no other dependencies are required):

npm install --save react-dfp

You can find more deatails in the React-dfp site.

Getting started

React-dfp has been designed in a very React-ish way, its main goal is to be able to serve DFP ads in your React application just using React components, that means that you wont have to programatically perform any initialization call when your page loads.

Here a quick example, notice that ads will render in your page as soon as your component is mounted, through its components (DFPSlotsProvider and AdSlot), react-dfp is making a full abstraction of the google dfp/gpt api.

import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';
...
class Page extends Component {
   render() {
     ...
     
     return (
       <DFPSlotsProvider dfpNetworkId={'9999'} adUnit={"foo/bar/baz"} ... >
         ...
         <AdSlot adUnit={"home/leaderboard"} sizes={[ [900, 90], [728, 90]]} />
         ...
         /* you can override the props */
         <AdSlot adUnit={"home/mobile"} sizes={[ [300, 250], [300, 600]]} />
         ...
         <div>
           ...
           <AdSlot adUnit={"home/footer"} sizes={[ [300, 250], [300, 600]]} />
           ...
         </div>
         ...
       </DFPSlotsProvider>
     );
   }
}

Examples

See the React-dfp site for more examples (basic example, how to have refreshable ads, etc).

Documentation

You can find the React-dfp documentation on the website. The site divided in many sections that describe each one the Components, properties and also the DFPManager api (in case you need to use this one manually).

The website is also full of live/working examples.

If you are also interested on it, you can find the source code of the website here: https://github.com/jaanauati/react-dfp-website.

Wanna help?

I certainly know that testcases need to be improved, but, as long as your syntax is clean, submit testscases and, of course, all the interfaces are kept working, all kind of contribution is welcome.

Complaints.

Pull requests are welcome 🍻.