[英]How do I use reactjs with Google DFP/AdSense
I'm wanting to build a project with Facebook's reactjs framework (JSX), but given how it renders, how would I use this with Doubleclick for publishers? 我想用Facebook的reactjs框架(JSX)构建一个项目,但考虑到它的渲染方式,我如何在发布者的Doubleclick中使用它?
If I trigger adsense/urchin, how do I tell React not to change/update those items? 如果我触发adsense / urchin,如何告诉React不要更改/更新这些项目?
Is there an alternative adwords script/interface I can use? 我可以使用替代adwords脚本/界面吗?
(will clean up this answer with a jsx example when I have one, for now...) (当我有一个jsx示例时,会用这个答案来清理这个答案,现在...)
Thanks to rcs in freenode #reactjs: 感谢freenode #reactjs中的rcs:
rcs> tracker1: componentDidMount and make sure
you're not throwing it away when you don't mean to
tracker1> rcs: so use componentDidMount for adsense/dfp
binding, and simply don't change the render output?
rcs> tracker1: Yeah. Your render should write out the
<ins class="adbygoogle" data-analytics-uacct ..... >
piece, and you should fire off the adsbygoogle.push in
componentDidMount
tracker1> cool... didn't think it would be that easy for
some reason...
rcs> tracker1: Or for dfp, handle the defineAdSlot in CDM,
and googletag.pubads().refresh() on something that fires
after they're all written out.
rcs> The thing that will trip you up is if you're firing
things that make React thing that written node needs to get
removed and replaced, instead of moved, etc.
rcs> But that shouldn't be a primary worry -- just something
to keep in the back of your head if you're seeing more
impressions/ad loads than you should be.
tracker1> they'll only change on a navigation/route change
rcs> Keep in mind that adsense TOS is vague on ajax page loads.
rcs> Or 'client side' page loads.
(fix apos) (固定)
Here's a simple component that handles displaying ads, taking into account viewability best practices . 这是一个处理展示广告的简单组件,同时考虑了可见度最佳做法 。 (Thanks to Tracker1 for the comments here, which helped me tremendously in putting this together.)
(感谢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;
this.displayAd = this.displayAd.bind(this);
}
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} />
<div id={this.id}></div>
</div>
);
}
displayAd() {
const id = this.id;
googletag.cmd.push(function() {
googletag.display(id);
});
}
}
export default Ads;
I've used react-waypoint to ensure proper viewability (not loading ads until users will see them). 我已经使用react-waypoint来确保正确的可见性(在用户看到之前不加载广告)。 When the waypoint hits the bottom of the viewport as a user scrolls down to it, displayAd() shows the ad.
当航点在用户向下滚动到达视口底部时,displayAd()会显示广告。 The offset could be enhanced, but hopefully this will be a good starting point to give you the general idea.
偏移量可以增强,但希望这将是一个很好的起点,为您提供一般的想法。
If you have several ad slots on one page, you can use unique IDs in place of #ad-container
. 如果您在一个页面上有多个广告位,则可以使用唯一ID代替
#ad-container
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.