最近因公司需要对接新的 vendor,对接方式是应用 prebid.js 进行预竞价后获取广告,经历了各种翻看英文文档(英文差😭)后终于完成对接等待QA阶段,总结出自己的经验。
什么是header bidding
引用:conan酱_563e https://www.jianshu.com/p/e68b0535350f
标题出价是对数字广告显示的分散且高效率的过程的响应。它是“water fall”方法的替代方案,“water fall” 是在一个销售渠道提供展示的过程,如果最后没有成功展示会转移到下一个价值较低的渠道。
标题出价有时被称为提前出价或预先出价。加载页面后,标题出价可让发布商同时与所有SSP和广告交易进行竞价。发布商可以通过其ad server和广告交易平台接收可能没有填充的广告位资源的出价。然后,返回的出价将传递到server端,以便他们的广告位资源可以同时拿到直接需求端以及主要的Ad Server Exchange公平竞争。
Prebid.js于2015年推出,出价流程符合性和简洁性,使出版商可以轻松进行标题出价。通过创建一个简单,开放的技术层,可以将其代码添加到上面,Prebid.js可以更轻松地实现标题出价,并提供最大的工作适配器存储库。今天,Prebid.js是网上最广泛使用的标题出价“容器”或“包装器”。该生态系统支持150多个需求伙伴,
flowchart LR subgraph SSPs A[AppNexus] R[Rubioon] end subgraph Site g[gpt.js] P[Prebid.js] end P -->|1.向配置的Bidder\n发起竞价请求| SSPs SSPs -->|2.获取价格\n并计算胜利方| P P --> |3.设置广告位的KeyValue| g g --> |根据keyValue请求订单| G[GAM\n需通过line-item-manager\n增加prebid订单\n用于匹配订单及用于\n与GAM订单竞争] G --> |根据keyValue返回匹配订单| g
Prebid.js过程
一个简单的Prebid.js过程遵循以下步骤:
-
广告服务器的代码由计时器暂停,而Prebid.js会向所选的SSP和广告交易平台发送出价请求。
-
SSP和广告交易平台会返回广告和出价。
-
根据出价回复Prebid.js找到获胜者(如果适用)并缓存广告素材。
-
Prebid将获胜的出价参数作为key-values传递给ad server。
-
广告服务器获取这些key-values并查找匹配的订单项,并与针对此展示次数出价的其他订单项进行比较。
-
如果广告服务器确定Prebid赢得竞价,它会向Prebid.js返回一个信号,然后Prebid.js将广告素材写入页面。
准备工作
正式应用Prebid先要准备以下工作
向意向的 Bidder 申请关于 headerbidding 的合作,并返回相关的 bidder 参数,如:站点ID(pageId)、广告位置ID(placementId)
Prebid开发(Banner广告)
生成 prebid.js
根据已申请的 bidder 生成对应的 prebid.js 文件
方式一:prebid.js官方文档勾选对应bidder及其它模块下载
下载地址: Download Prebid.js for Header Bidding
方式二: 克隆 prebid.js 的 git 仓库
git clone git@github.com:prebid/Prebid.js.git
cd Prebid.js
yarn
gulp build --modules=googleAnalyticsAdapter,[...bidderAdapter]
应用Prebid.js
<html>
<head>
<title>Individual Ad Unit Refresh Example</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script><script>
var PREBID_TIMEOUT = 1000;
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
var adUnits = [
{
code: "div-1",
mediaTypes: {
banner: {
sizes: [[300, 250]],
},
},
bids: [
{
bidder: "appnexus",
params: {
placementId: 13144370,
},
},
],
},
];
pbjs.que.push(function () {
pbjs.addAdUnits(adUnits);
});
</script>
<script>
var slot1;
googletag.cmd.push(function () {
slot1 = googletag
.defineSlot("${广告单元code}", [[300, 250]], "div-1")
.addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function refreshBid() {
pbjs.que.push(function () {
pbjs.requestBids({
timeout: PREBID_TIMEOUT,
adUnitCodes: ["div-1"],
bidsBackHandler: function () {
pbjs.setTargetingForGPTAsync(["div-1"]);
googletag.pubads().refresh([slot1]);
},
});
});
}
</script>
</head>
<body>
<h1>Individual Ad Unit Refresh Example</h1>
<h5>Div-1</h5>
<p><button onclick="refreshBid()">Refresh Ad Unit</button></p>
<div id="div-1">
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-1');
});
</script>
</div>
</body>
</html>
手动配置订单测试
-
在你测试的订单中 新增订单项(New Line Item)
-
选择 Ad type为 Display(Standard)
-
输入订单名,如:
Prebid - banner - ${Bidder} - 1.50
-
订单类型:Price priority(12)
-
尺寸选择:根据广告单元与 bidder 之间的协定情况选择对应的尺寸,我这里测试就用 ‘300x250’
- 投放设置
-
开始时间选择:立即(Immediately)
-
结束时间选择:不限期(Unlimited)
-
费率(Rate): 1.50 (币种按与Bidder协商选择)
-
目标类型为Goal type:None
-
-
添加定位条件
-
展开 自定义定位(Custom targeting)
-
因为是用于测试应用,所以可以先用
hb_pb
做为 key 值定位,应用line-item-manager
创建订单会以hb_pb_${BidderCode}
,值为1.50
,注意不可省略后面的0
.
-
-
保存后我们就开始创建广告素材
-
选择 广告素材(Creatives) Tab标签,点击创建素材
-
选择
Third party
-
输入素材名,如:
prebid-test-creative
-
输入代码:
<script src = "https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/%%PATTERN:hb_format%%.js"></script> <script> var ucTagData = {}; ucTagData.adServerDomain = ""; ucTagData.pubUrl = "%%PATTERN:url%%"; ucTagData.targetingMap = %%PATTERN:TARGETINGMAP%%; ucTagData.hbPb = "%%PATTERN:hb_pb%%"; try { ucTag.renderAd(document, ucTagData); } catch (e) { console.log(e); } </script>
-
取消勾选
(使用SafeFrame呈现广告素材) Serve into a safeFrame
-
因为素材代码中引用了
jsdelivr.net
的素材,所以需要配置引用的广告技术提供服务 -
保存素材后,确保订单的激活状态就可以开始测试下广告prebid啦
调试Prebid成功的情况
-
打开示例的网站,在加载广告前,打开F12控制台,输入调试代码
pbjs.setConfig({ debugging: { enabled: true, intercept: [ { when: (bidRequest) => bidRequest.bidder==='appnexus', // 当发起的bidder为appnexus,覆写下方结果返回 then: { cpm: 1.5, //价格 currency: 'USD', //币种 adId: "j2YqKZkh5B9iU8ajo", //素材ID,唯一即可 // 素材内容 ad: '<html><body><img src="https://placehold.co/300x250?text=appnexus"/></body></html>' } }, ] } });
-
点击示例中的
Refresh Ad Unit
按钮后
总结
关于 Prebid.js 的基本应用就到这里了,后续将会针对 Prebid.js 的优先级、调试方式和 Line-Item-Manager 的应用写篇文章。