Northern Pileated Marmoset


    3.4.0 • Public • Published


    An advert panel using GPT tags


    This component expects an ES6 environment, and so if you are using this in an app, you should drop in a polyfill library - it has been tested with babel-polyfill but core-js or es6-shim may also work.

    The default export is a React Component, so you can simply import the component and use it within some JSX, like so:

    import Adpanel from '@economist/component-ad-panel';
    return <Adpanel/>;

    For more examples on usage, see src/example.es6.

    Props and defaults:

    • adTag (required string): The DFP tag this points to. Often in the format of a URL. example: /5605/
    • className (string): Add this className to ad-panel__container.

    sizes={[ [ 60, 60 ], [ 70, 70 ], [ 300, 250 ], [ 1024, 768 ] ]} ``` (array of pairs of advertisement width, height): what ad sizes can be loaded. Is used as the size argument to googletag.defineSlot

    sizeMapping={[ [[980, 200], [[1024, 768]]], [[0, 0], [[300, 250]]], ]} ``` (array of pairs of screen sizes [ width, height ] and advertisement sizes [ [width1, height1], [width2, height2], ... ] ): Each element in this array results in a call to sizeMapping().addSize

    • targeting (array of pairs of key/value strings): Defines the ad targeting. Each element corresponds to a call to setTargeting
    • reserveHeight (number of px): Sets a min-height to the ad, so as to avoid content jumps when the ad eventually comes around.
    • googletag (instance of the googletag object): Mostly a testing hook, but can be passed to avoid loading the DFP tag again, if it was already loaded.

    Relevant reading:

    Deprecation notice

    The lazyload prop has been removed as the feature was making this component unmaintainable and bug-prone. From now on you can use the excellent react-lazy-load. Here's an example:

    // Before:
    <AdPanel lazyLoad {...otherProps} />
    // After:
      <AdPanel {...otherProps} />

    The animated prop has also been removed, and its relevant CSS with it. This feature can also be implemented very easily using LazyLoad (and some classNames):

    // Before:
    <AdPanel animated {...otherProps} />
    // After:
    class AnimatedAd extends React.Component {
      render() {
        const className = this.state && this.state.visible ?
          'animated-ad-wrapper animated-ad-wrapper--visible' :
        return (
          <div className={className}>
            <LazyLoad onContentVisible={() => { this.setState({ visible: true }) }}>
              <AdPanel {...this.props} />
    <AnimatedAd {...otherProps} />

    Both work exactly the same.


    npm i -S @economist/component-ad-panel

    Run tests

    npm test




    npm i @economist/component-ad-panel

    DownloadsWeekly Downloads






    Unpacked Size

    519 kB

    Total Files


    Last publish


    • wellingtonvieira
    • economist-org-bot