npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-ad-manager

v1.1.9

Published

A React component for Google Ad Manager

Downloads

4,743

Readme

Package Version Package Monthly Downloads Docs

Demo

See demo here

Installation

Install the library using your favorite package manager:

    npm install react-ad-manager

or using:

    yarn add react-ad-manager

Getting Started

First add the Google Publisher Tags script on your application

import { AdScript } from 'react-ad-manager'
;<head>
  <AdScript />
</head>

or using:

<head>
  <script
    async
    src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'
  ></script>
</head>

then, create the Ad component for define ad slot

    import { Ad } from react-ad-manager

    <Ad
        adUnit='/6355419/Travel/Europe'
        name='div-name'
        size={[300, 250]}
    />

Ad Props

    import { Ad } from react-ad-manager

    <Ad
        adUnit='/6355419/Travel/Europe'
        name='div-name'
        size={[
            [[1024, 768], [[750, 200], [728, 90]]],
            [[640, 480], [[300, 250]]],
        ]}
        target={[['color', 'red']]}
        refreshTimer={5000}
        type='INTERSTITIAL'
        eventImpressionViewable={(e) => console.log(e.slot)}
        eventSlotOnload={(e) => console.log(e.slot)}
        eventSlotRenderEnded={(e) => console.log(e.slot)}
        eventSlotRequested={(e) => console.log(e.slot)}
        eventSlotResponseReceived={(e) => console.log(e.slot)}
        eventSlotVisibilityChanged={(e) => console.log(e.slot)}
    />

adUnit

Ad unit path loaded from Google Ad Manager.

  • type: string
  • required: true

name

Name used in div id

  • type: string
  • required: true

size

Size is defined by single, multi, fluid or responsive. See more information at Ad sizes - Google Developers .

  • type: SingleSize | MultiSize | FluidSize | ResponsiveSize
  • required: true

SingleSize: [number, number] MultiSize: Array<[number, number]> FluidSize: 'fluid' Responsive: Array<[ [number, number], Array<[number, number]> ]>

target

Configure targets in slot-level

  • type: Array<[string, string | Array<string>]>
  • required: false

refreshTimer

The refreshTimer prop defines how often the ad are updated. It activates a function where the ads are updated in a loop and while displayed on the screen. The prop is set in milliseconds.

  • type: number | string
  • required: false

type

Define Out-of-page formats supported by Google Tag Manger. See more information at Enum Types - Google Developers.

  • type: string
  • required: false
  • value: 'INTERSTITIAL' | 'TOP_ANCHOR' | 'BOTTOM_ANCHOR' | undefined

eventSlotOnload

This event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.

  • type: callback(event)
  • required: false

eventSlotVisibilityChanged

This event is fired whenever the on-screen percentage of an ad slot's area changes.

  • type: callback(event)
  • required: false

eventSlotRenderEnded

This event is fired when the ad unit is injected into a slot. This event will occur before the ad are fetched, so the ad may not be visible yet.

  • type: callback(event)
  • required: false

eventSlotRequested

This event is fired when an ad has been requested for a particular slot.

  • type: callback(event)
  • required: false

eventSlotResponseReceived

This event is fired when an ad response has been received for a particular slot.

  • type: callback(event)
  • required: false

Global Props

It is possible set global props using the component <AdConfig>:

    import { AdScript, AdConfig } from react-ad-manager
    <head>
        <AdScript />

        <AdConfig
            networkCode={1}
            target={[['global', 'true']]}
            collapseEmptyDivs={true}
            eventImpressionViewable={(e) => console.log(e.slot)}
            eventSlotOnload={(e) => console.log(e.slot)}
            eventSlotRenderEnded={(e) => console.log(e.slot)}
            eventSlotRequested={(e) => console.log(e.slot)}
            eventSlotResponseReceived={(e) => console.log(e.slot)}
            eventSlotVisibilityChanged={(e) => console.log(e.slot)}
        />
    </head>

networkCode

Is a unique identifier for the Ad Manager network the ad unit belongs to.

  • type: number | string
  • required: true

target

Configure targets in page-level

  • type: Array<[string, string | Array<string>]>
  • required: false

collapseEmptyDivs

Enables collapsing of slot divs if have ad content to display. If true the div collapse mode will be enable and if false the slot div won't collapse.

  • type: boolean
  • default: false

eventSlotOnload

This event is fired when the ad is displayed. When rendering ads in sync rendering mode SlotOnloadEvent won't be fired.

  • type: callback(event)
  • required: false

eventSlotVisibilityChanged

This event is fired whenever the on-screen percentage of an ad slot's area changes.

  • type: callback(event)
  • required: false

eventSlotRenderEnded

This event is fired when the ad unit is injected into a slot. This event will occur before the ad are fetched, so the ad may not be visible yet.

  • type: callback(event)
  • required: false

eventSlotRequested

This event is fired when an ad has been requested for a particular slot.

  • type: callback(event)
  • required: false

eventSlotResponseReceived

This event is fired when an ad response has been received for a particular slot.

  • type: callback(event)
  • required: false