接入 Header Bidding 头部竞价，手摸手教你应用Prebid.js

什么是header bidding
准备工作
Prebid开发（Banner广告）
- 生成 prebid.js
- 应用Prebid.js
- 手动配置订单测试
- 调试Prebid成功的情况
总结

最近因公司需要对接新的 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’

投放设置
1. 开始时间选择：立即(Immediately)
2. 结束时间选择：不限期(Unlimited)
3. 费率(Rate): 1.50 （币种按与Bidder协商选择）
4. 目标类型为Goal type：None

添加定位条件
1. 展开自定义定位(Custom targeting)
2. 因为是用于测试应用，所以可以先用 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 的应用写篇文章。