Have ideas to improve npm?Join in the discussion! »

    @economist/component-ad-panel

    3.4.0 • Public • Published

    Adpanel

    An advert panel using GPT tags

    Usage

    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:
    <LazyLoad>
      <AdPanel {...otherProps} />
    </LazyLoad>
    

    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' :
          'animated-ad-wrapper';
        return (
          <div className={className}>
            <LazyLoad onContentVisible={() => { this.setState({ visible: true }) }}>
              <AdPanel {...this.props} />
            </LazyLoad>
          </div>
        )
      }
    }
    <AnimatedAd {...otherProps} />
    

    Both work exactly the same.

    Install

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

    Run tests

    npm test

    Keywords

    none

    Install

    npm i @economist/component-ad-panel

    DownloadsWeekly Downloads

    20

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    519 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar