我想用Facebook的反应框架(JSX)构建一个项目,但是考虑到它如何呈现,我如何使用Doubleclick作为发布者？
如果我触发adsense / urchin,我该如何告诉React不要更改/更新这些项目？
有没有可以使用的替代adwords脚本/界面？
解决方法
这是一个简单的组件来处理展示广告,考虑到
viewability best practices.(感谢
Tracker1的评论,这帮助我极大地把它放在一起).
import React from 'react';
import Waypoint from 'react-waypoint';
let instance = 0;
class Ads extends React.Component {
static propTypes = {
id: React.PropTypes.string,width: React.PropTypes.number.isrequired,height: React.PropTypes.number.isrequired,adslot: React.PropTypes.string.isrequired
}
constructor() {
this.__id = 'ads-instance-' + ++instance;
}
get id() {
return this.props.id || this.__id;
}
componentDidMount() {
googletag.cmd.push(function() {
// Define the ad slot
googletag.defineSlot(
this.props.adslot,[this.props.width,this.props.height],this.id
).
addService(googletag.pubads());
// Start ad fetching
googletag.enableServices();
});
}
render() {
return (
<div style={{width:this.props.width,height:this.props.height}}>
<Waypoint onEnter={()=>this.displayAd(this.id)} />
<div id={this.id}></div>
</div>
);
}
displayAd(id) {
googletag.cmd.push(function() {
googletag.display(id);
});
}
}
export default Ads;
我使用了反应路线来确保适当的可见度(直到用户看到它们才能加载广告).当用户向下滚动时,当航点到达视口底部时,displayAd()显示该广告.抵消可能会增强,但希望这将是一个很好的起点给你一般的想法.
如果您在一个页面上有多个广告位,则可以使用唯一的ID代替#ad-container.
