yieldbird_gpt_components

Made with create-react-library

• QuickWrap - Yieldbird GPT Components
  • Installation
  • Usage
  • Development

Installation

npm install --save yieldbird_gpt_components

Usage

import React, { Component } from 'react'

import { AdManagerProvider, AdManagerSlot } from 'yieldbird_gpt_components'

return (
  <AdManagerProvider uuid='YOUR_YIELDBIRD_WRAPPER_UUID'>
    <AdManagerSlot
      adUnitPath='AD_UNIT_PATH/FOO'
      size={[[120, 600], [160, 600]]}
      optDiv='AD_UNIT_DIV_ID'
    />
  </AdManagerProvider>
)

AdManagerProvider context component should be placed at the top of your React app. It is responsible for injecting GPT and Yieldbird Wrapper scripts, initializing variables and storing helper data.

name	type	required	description
collapseEmptyDivs	boolean	false	Google AdManager collapseEmptyDivs option. If no parameter is specified, true will be passed as a collapseEmptyDivs argument.
globalTargeting	object	false	targeting object which can be used to pass aditional key-values pairs to pubads object
uuid	string	false	Yieldbird UUID required to load Wrapper script. If not set, you need to provide scripts in your head section, see Head section
onImpressionViewable	function	false	Callback function for 'impressionViewable' event
onSlotOnload	function	false	Callback function for 'slotOnload' event
onSlotRender	function	false	Callback function for 'slotRenderEnded' event
onSlotRequested	function	false	Callback function for 'slotRequested' event
onSlotResponseReceived	function	false	Callback function for 'slotResponseReceived' event
onSlotVisibilityChanged	function	false	Callback function for 'slotVisibilityChanged' event
lazyLoadOffset	number	false	Lazy loading offset in relation to viewport (example: 0.5 = 50% of viewport)
isMobile	boolean	false	Mobile device flag. Mainly used for setting default lazy load offset when no offset is provided by default

You can find more about GPT events on the official Google docs. |

AdManagerSlot is a simple ad component, with properties similar to GPT slot. It is responsible for rendering ad in specified place. You can use it with following properties:

name	type	required	description
adUnitPath	string	true	Google AdManager ad unit path
size	number	true	base slot sizes
optDiv	string	true	name of DIV ID of given adUnit
targeting	object	false	extra targeting object which can be used to pass aditional key-values pairs to GAM
sizeMapping	array	false	array representation of size mapping GPT command calls. Each array element consists of two more arrays, representing viewport size and mapping which correspnds to GPT setup.
lazyLoad	boolean	false	whether given adUnit should be lazy loaded
screeningAd	boolean	false	Screening ad flag. When ads is set as screening ad, it will reset body background when unmounted

Head script

In case you want to boost your performance, you may want to set dependency scripts in head section. In this case, see below example of how to properly implement it. Make sure not to set uuid in your AdManagerProvider

  <script type='text/javascript'>
    window.googletag = window.googletag || {}
    window.googletag.cmd = window.googletag.cmd || []
    window.Yieldbird = window.Yieldbird || {}
    window.Yieldbird.cmd = window.Yieldbird.cmd || []

    window.yb_configuration = { lazyLoad: true }

    window.googletag.cmd.push(function () {
      window.googletag.pubads().disableInitialLoad()
    })
  </script>
  <script type='text/javascript' async src='//securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
  <script type='text/javascript' async src='//jscdn.yieldbird.com/{ENTER_YOUR_YIELDBIRD_UUID_HERE}/yb.js'></script>

Additional targeting example

<AdManagerSlot
  adUnitPath='AD_UNIT_PATH/FOO'
  size={[[120, 600], [160, 600]]}
  optDiv='AD_UNIT_DIV_ID'
  targeting={{
    foo: 'bar',
    bar: 'baz'
  }}
/>

Size mapping example

<AdManagerSlot
  adUnitPath='AD_UNIT_PATH/FOO'
  size={[[120, 600], [160, 600]]}
  optDiv='AD_UNIT_DIV_ID'
  sizeMapping={[
    [[0, 0], [[120, 600], [160, 600]]],
    [[600, 0], [[300, 600]]]
  ]}
/>

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

Make sure to configure your config.ts file basing on config.ts.example.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

License

MIT © YieldbirdDev