An advert panel using GPT tags


133.4.03 years ago6 years agoMinified + gzip package size for @economist/component-ad-panel in KB



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/foo.bar/qux/x.
  • 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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.