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