react-ads v2.1.0

react-ads

This package allows you to render ads with DFP and Prebid. All prebid modules are split into separte chunks, that way you only load what you need.

API

• Provider
• Ad
• Bider
• withAdRefresh

Reference

• Refreshing ads

Example

• Example
• Storybook

Installation

  npm i react-ads --save 

webpack

Copy the bidder files into your assets dir. They can't be loaded directly from react-ads/dist/bidders.

Use the copy-webpack-plugin to do this if using weback

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var babelConfig = require('./babel.config');
var CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: babelConfig
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  plugins: [
  // Use the copy plugin to copy all the bundles into your statics dir.
  // That way they can be lazy-loaded.
    new CopyPlugin([
      {
        from: 'node_modules/react-ads/dist/bidders/bidder-*.js',
        to: 'bidders/',
        flatten: true,
      }
    ])
  ]
};

Non webpack

just copy and paste node_modules/react-ads/dist/bidders/bidder-*.js files into your statics dir statics/bidders/all-the-bidder-files

Example

app.js

import React from 'react';
import { Provider, Ad } from '../../src';
import prebid from 'src/bidders/prebid';

const bidHandler = ({ id, sizes }) => ({
  prebid: {
    code: id,
    mediaTypes: {
      banner: {
        sizes: sizes
      }
    },
    bids: [{
      bidder: 'appnexus',
      params: {
        placementId: 13144370
      }
    }]
  }
});

class Example extends React.Component {
  render() {
    return (
      <Provider
        bidders={['criteoBidAdapter', 'appnexusBidAdapter']}        
        chunkSize={5}
        adUnitPath="header-bid-tag-0"
        networkId={19968336}
      >
        <Ad
          lazy
          type="lazy"
          bidHandler={bidHandler}
          adUnitPath="header-bid-tag-0"
          size={[300, 250]}
          sizeMap={[
            { viewPort: [0, 0], slots: [300, 250] },
          ]}
        />

        <Ad
          adUnitPath="header-bid-tag-1"
          bidHandler={bidHandler}
          lazy
          type="lazy"
          size={[728, 90]}
          sizeMap={[
            { viewPort: [0, 0], slots: [[728, 90], [70, 250]] },
          ]}
        />
      </Provider>
    );
  }
}

export default Example;

Provider

Ad

Bidder

Bidder is a class that is used to get bids. It provides an interface that makes it easier to communicate with the bidManager. This library is mainly intended to be used with prebid but there are other bidders like amazon that do not want to be part of the prebid project. For this reason this Bidder class can be used to include them or any other bidders that are not part of prebid.js. The bidder class accepts the bidder name when it is instantiated. new Bidder('prebid'). Then you must define the Bidder methods below to handle the bidding process.

withAdRefresh

withAdRefresh will pass the custom refresh function to a component. This can be used to refresh ads by their id.

const Button = withAdRefresh(UnwrappedComponent);

Refresh

Refresh can be called in 5 different ways.

Imperative refresh

An Imperative refresh can be done by reching into the DOM and directly refreshing the ad.

  const el = document.querySelector('#ad-1');
  el && el.refresh();

Dispatched custom event

You can refresh an ad by dispatching a custom event and providing the id of the ad that you want to refresh.

  window.dispatchEvent(new CustomEvent('refresh-ad', { detail: { id: 'leaderboard_1' } }));

Media query refresh

When an ad has a defined sizeMapping it will refresh automatically whenever it enters a ceratin breakpoint.

        <Ad
          lazy
          type="lazy"
          bidHandler={bidHandler}
          adUnitPath="header-bid-tag-0"
          size={[300, 250]}
          sizeMap={[
            { viewPort: [0, 0], slots: [300, 250] },
            { viewPort: [800, 200], slots: [300, 600] },
          ]}
        />

Lazy load refresh

Lazy loaded ads can call the refresh fn whenever it goes into the visible threashold.

        <Ad
          lazy
          bidHandler={bidHandler}
          adUnitPath="header-bid-tag-0"
          size={[300, 250]}
        />

withAdRefresh hoc refresh

Some developers might prefer wrapping their components with an HOC that can pass the refresh function to some other component. You can use the withAdRefresh hoc to receive the refreshAdById fn.

class UnwrappedComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 'leaderboard_1',
    };
  }

  render() {
    return (
      <div>

        <div>
          <label>
            Refresh ad
          </label>
          <input
            type="text"
            value={this.state.value}
            onChange={e => this.setState({ value: e.target.value })}
          />
          <button onClick={() => this.props.refreshAdById(this.state.value)}>
            Refresh
          </button>
        </div>
       
        <br/>
       
        <div>
          <label>
            Refresh All Ads
          </label>
          <button onClick={() => {
            const adIds = [...document.querySelectorAll('[data-react-ad]')].map(x => x.id);
            this.props.refreshAdById(adIds);
          }}>
            Refresh
          </button>
        </div>
      </div>
    );
  }
}

const Button = withAdRefresh(UnwrappedComponent);

Examples:

sizeMapping

[ 
    // One Ad until infinity 
    { viewPort: [1500, 200], slots: [728, 90] }, 
    // Multiple Ads until browser width >= 1500px
    { viewPort: [1250, 200], slots: [[728, 90], [970, 250]] }, 
    // No Ads until browser width >= 1250px
    { viewPort: [0, 0], slots: [] },
]

onSlotOnLoad

const onSlotLoadEvent = ({id, ref, ... e}) => ({
    console.log(`slot id is ${id}`);
}

onSlotRenderEnded

const onSlotLoadEvent = ({id, ref, ...e}) => ({
    console.log(`slot ${id} rendered`);
}

onImpressionViewable

const onSlotLoadEvent = ({id, ref, ...e}) => ({
    console.log(`Impression for slot with id ${id} served`);
}

onSlotVisibilityChanged

const onSlotLoadEvent = ({id, ref, ...e}) => ({
    console.log(`Slot viewability is ${e} %`);
}

Tables created with: tablesgenerator