Prebid.js x GAMでヘッダービディングを行う方法を画像付き解説！デバッグ方法も丁寧に | エーメーズ・デジタル・ラボラトリー│Amay’s Digital Laboratory

アドテク業界では、HeaderBiddingやPrebid.jsという単語をよく聞くようになりました。

これらは広告配信の収益の最適化を図るための仕組みですが、複雑なのでなかなかとっつきにくい面があると思います。

今回は、以下内容について分かりやすく解説していきます。

HeaderBiddingとPrebid.jsの概要
Prebid.jsとGAMの連携の概要の設定方法
Prebid.jsとGAMの連携のデバッグ方法

Prebid.jsはHeader Biddingを行うための仕組み。それじゃあHeader Biddingって何？

Prebid.jsは、Header Biddingという入札の仕組みを行うための機能です。

そして、Header Biddingとは、HTMLタグの「head」タグに各SSPの「Bidding（入札）」を組み込むことで、GoogleAdManager(以下GAM)などの広告サーバーにリクエストを送信する前に各SSPに入札を促し、最も高単価な広告とGAMの広告を競わせ、単価が高い方の広告を配信するという仕組みです。

つまり、最初にHeaderBiddingサーバーにリクエストを行い、そこで色々なSSPの入札が行われ勝者ビッダーを決定し、そしてその勝者ビッダーのCPMを、GAM上で選択された広告と競合させることができます。

それでは、なぜこのような仕組みが有効なのでしょうか？

そもそも、GAM内ではダイナミックアロケーションという仕組みによって収益の最適化が行われています。

これは、GAMの広告配信が行われる際にGoogle社のSSPであるGoogleAdExchange（以下AdX）とGAMの広告申込情報で設定した広告申込情報を競合させて、CPMの高い広告申込情報を配信させるという仕組みです。

しかしこの方法だと、SSPから更にアドネットワークなどが呼ばれる場合なども考えると、本当に一番高いCPMで配信されるかどうか不明です。

SSPで配信される広告のCPMは常に変動しているので、GAMの広告申込情報で設定しているCPMの値が本当にベストなのか分からないというわけです。

Prebid.jsを利用すれば、各SSPの入札が最初に行われてそれらの中で一番高いCPMが決まるので、それ以降のフローで本当にCPMが一番高い広告を配信させることができます。

Prebid.jsって？

Prebid.jsは、メディアの広告収益最適化のためのHeader Biddingソリューションの一種であり、https://prebid.org/ で開発されたオープンソースのテクノロジーサービスです。

最大の特徴は、オープンソースの性質にあります。

このため、異なるラッパー事業者が存在するため接続されているBidderはいくつか異なるかもしれませんが、技術的には統一されたPrebid.jsのテクノロジーが広く使用されています。

そのため、Header Biddigの運用に伴う混乱が起きにくいというメリットがあります。

Prebid.jsを使ってGAMでHeaderBiddingを行う全体像

続いて、Prebid.jsを使ってGAMでHeaderBiddingを行う全体像について分かりやすく説明していきます。

広告リクエストの処理の流れは、Prebid.jsの公式サイトに以下のように示されています。

日本語で書き下していくと、以下のようになります。

①head内で設定されたPrebid.jsおよび設定されたスクリプトからビッダーに対してリクエストを送信します。
②ビッダーからの応答をPrebid.jsが受け取ります。
③Prebid.jsは設定に基づいてデータを整形し、複数のビッダーの中で勝者のビッダーの応答をキャッシュします。
④Prebid.jsはKey-Value形式で勝者となったビッダーをGoogle Ad Manager（GAM）に通知します。
⑤GAMは通知されたKey-Valueを使用して、広告申込情報を検索し、他の広告申込情報と比較します。
⑥GAMが④で通知されたビッダーの広告申込情報がオークションに勝ったと判断した場合、Prebid.jsに通知し、GAMの枠にクリエイティブが描画されます。

以下、簡単に補足していきます。

GAMではhead内で記述されたGAM共通タグで、そのページ上で配信する広告枠の定義をして、各広告の表示場所でGAMのサーバーに広告リクエストを行います。

上記①、②、③はその広告リクエストの前に、ビッダー対してリクエストを行い、それぞれの広告枠に対して勝者ビッダーに関する情報(hb_bidder,hb_pbといった整形された変数)がページ上に返されれる、というものです。(hb_bidderは勝者ビッダーがどのSSPか。hb_pbは勝者ビッダーのCPM。)

それらの情報をが集まってから、④でGAMのサーバーに広告リクエストを行います。

⑤、⑥に関しては、GAMでは以下のように広告申込情報を設定しておきます。

ここで仮に広告枠Aに対して、勝者ビッダーがX社でそのCPMがP円だったとします。

その場合GAMの広告申込情報に、広告申込情報でCPMがP円でターゲティングをhb_pbがPのものを設定しておけば、適切に広告が配信されます。（これに関しては後ほどもう少し詳しく説明します。）

そしてその広告申込情報のクリエイティブに、hb_pbなど勝者ビッダーの情報をマクロに埋め込んだ以下のようなタグを設定します。

&lt;script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/creative.js"&gt;&lt;/script&gt;
&lt;script&gt;
  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);
  }
&lt;/script&gt;

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>

このように広告申込情報を設定しておくと、勝者ビッダーのCPMがAdXなどのCPMより高ければ、その勝者ビッダーから広告が配信されます。

注意点としては、hb_pbに関して様々なCPM価格帯の広告申込情報を設定する必要があります。

それでは続いて①、②、③の処理に必要なPrebid.jsスクリプトの設定に関して説明していきます。

Prebid.jsの設定スクリプトに関して

Prebid.jsを導入する際には、最初にPrebid.jsのソースコードを読み込む必要があります。

また設定するPrebid.jsは、バージョンや設定したいビッダーを追加したカスタマイズされたものである必要がありますが、以下のようにPrebid.jsの公式サイトでは簡単に出力してダウンロードすることができます。

そしてそのダウンロードしたPrebid.jsを、運営しているサイトにアップします。

続いて、そのPrebid.jsを利用してビッダーにリクエストを飛ばすサンプルスクリプトが以下になります。前の見出しの①、②、③、④を実現するためのスクリプトですね。

（こちらは広告枠が1つの場合のスクリプトになります。

実際に自分が携わっているサイトで配信するために編集する箇所は、コメントの「広告サイズ」「GAMの広告枠とPrebid.jsのビッダーの連携」「GAMの通常のheadの設定」になります。

「広告サイズ」に関しては、[320,180]などをカンマ区切りで追加します。

「GAMの広告枠とPrebid.jsのビッダーの連携」に関しては、広告ユニット分だけ{ ～ }を記述してカンマ区切りで追加します。

「GAMの通常のheadの設定」に関しては、サイト上での配信する広告ユニットに合わせてdefineSlotを追加します。）

&lt;script&gt;
    // 広告サイズ
    var sizes = [
        [300, 250]
    ];
 
    // bidderのタイムアウト
    var PREBID_TIMEOUT = 1000;
 
    // Prebid.jsがloadされなかった場合のタイムアウト
    var FAILSAFE_TIMEOUT = 3000;
 
    // GAMの広告枠とPrebid.jsのビッダーの連携
    var adUnits = [{
        // GAMの枠
        code: '/19968336/header-bid-tag-1',
        // メディアの種類
        mediaTypes: {
            banner: {
                sizes: sizes
            }
        },
        // ビッダーの設定オブジェクトを配列で入れていく
        // どのようなパラメータが必要かは各種ビッダーによって異なるためPrebid.jsのドキュメントを確認する
        // https://docs.prebid.org/dev-docs/bidders.html
        bids: [{
            bidder: 'appnexus',
            params: {
                placementId: 13144370
            }
        }]
    }];
 
    // ======== DO NOT EDIT BELOW THIS LINE =========== //
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    googletag.cmd.push(function() {
        // GAMの広告リクエストを止める（Prebid.jsのビッダーリクエスト・レスポンスを先に行いたいため）
        googletag.pubads().disableInitialLoad();
    });
 
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];
 
    pbjs.que.push(function() {
        // 先のadUnitsを登録
        pbjs.addAdUnits(adUnits);
        // Prebid.jsのリクエスト
        pbjs.requestBids({
            // ビッダーのレスポンスが返ってきたorタイムアウトに差し掛かった場合のcallback
            bidsBackHandler: initAdserver,
            // タイムアウト
            timeout: PREBID_TIMEOUT
        });
    });
 
    function initAdserver() {
        if (pbjs.initAdserverSet) return;
        pbjs.initAdserverSet = true;
        googletag.cmd.push(function() {
            // GAMにKey-Valueターゲティングを行う
            pbjs.setTargetingForGPTAsync &amp;&amp; pbjs.setTargetingForGPTAsync();
            // disableInitialLoad()で止めていたリクエストを再開
            googletag.pubads().refresh();
        });
    }
    
    // in case PBJS doesn't load
    setTimeout(function() {
        initAdserver();
    }, FAILSAFE_TIMEOUT);
 
    // GAMの通常のheadの設定
    googletag.cmd.push(function() {
        googletag.defineSlot('/19968336/header-bid-tag-1', sizes, 'div-1')
          .addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
 
&lt;/script&gt;

// 広告サイズ

var sizes = [

[300, 250]

];

// bidderのタイムアウト

var PREBID_TIMEOUT = 1000;

// Prebid.jsがloadされなかった場合のタイムアウト

var FAILSAFE_TIMEOUT = 3000;

// GAMの広告枠とPrebid.jsのビッダーの連携

var adUnits = [{

// GAMの枠

code: '/19968336/header-bid-tag-1',

// メディアの種類

mediaTypes: {

banner: {

sizes: sizes

}

// ビッダーの設定オブジェクトを配列で入れていく

// どのようなパラメータが必要かは各種ビッダーによって異なるためPrebid.jsのドキュメントを確認する

// https://docs.prebid.org/dev-docs/bidders.html

bids: [{

bidder: 'appnexus',

params: {

placementId: 13144370

}

}]

}];

// ======== DO NOT EDIT BELOW THIS LINE =========== //

var googletag = googletag || {};

googletag.cmd = googletag.cmd || [];

googletag.cmd.push(function() {

// GAMの広告リクエストを止める（Prebid.jsのビッダーリクエスト・レスポンスを先に行いたいため）

googletag.pubads().disableInitialLoad();

});

var pbjs = pbjs || {};

pbjs.que = pbjs.que || [];

pbjs.que.push(function() {

// 先のadUnitsを登録

pbjs.addAdUnits(adUnits);

// Prebid.jsのリクエスト

pbjs.requestBids({

// ビッダーのレスポンスが返ってきたorタイムアウトに差し掛かった場合のcallback

bidsBackHandler: initAdserver,

// タイムアウト

timeout: PREBID_TIMEOUT

});

function initAdserver() {

if (pbjs.initAdserverSet) return;

pbjs.initAdserverSet = true;

googletag.cmd.push(function() {

// GAMにKey-Valueターゲティングを行う

pbjs.setTargetingForGPTAsync && pbjs.setTargetingForGPTAsync();

// disableInitialLoad()で止めていたリクエストを再開

googletag.pubads().refresh();

});

}

// in case PBJS doesn't load

setTimeout(function() {

initAdserver();

}, FAILSAFE_TIMEOUT);

// GAMの通常のheadの設定

googletag.cmd.push(function() {

googletag.defineSlot('/19968336/header-bid-tag-1', sizes, 'div-1')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.enableServices();

});

</script>

GAMでの広告申込情報の設定

GAMでの広告申込情報の設定は2つ前の見出しで少し説明しましたが、もう少し詳しく説明します。

まず前提として、ビッダーが返すCPMのレンジ分のいくつもの広告申込情報を作成する必要があります。

CPMは基本的にせいぜい数千円なので、上限が例えば3,000円などで1,000円までは100円刻み、500円までは10円刻み、300円以下は1円刻みなどとして、それらの数分だけ広告申込情報を設定する必要があります。

この刻みの情報は各ビッダーが提供してくれますし、レンジ分の広告申込情報を簡易に作成する方法なども指示があるはずです。

それでは実際の設定について説明していきます。

ここで仮に、CPM150の広告申込情報を設定するとします。

まず、「広告申込情報タイプ」は「価格優先」にしましょう。

そして、「レート」のCPMと、「カスタムターゲティング」のhb_pbに同じ値、例えば(CPM150円なら150.00)などを設定します。

他に関しては通常の設定と同じです。

そしてクリエイティブには以下のようなスクリプトを貼り付けます。

&lt;script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/creative.js"&gt;&lt;/script&gt;
&lt;script&gt;
  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);
  }
&lt;/script&gt;

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>

hb_pbなどの情報がマクロとして埋め込まれているので、これらの情報を元に勝者ビッダーにリクエストが飛び、サイトに返すべき広告を調べて、サイトに広告を返します。

Prebid.jsがうまく機能しているかデバッグする方法

ここまでの設定でPrebid.jsとGAMの連携が設定されPrebidの広告申込情報が配信できるようになりましたが、Prebid.jsとGAMの連携がうまくいっていることをを確認するためにはどのような手順を踏めばよいかを開設していきます。

これには3つの方法があります。

①Prebidの変数をConsoleで確認する方法
②Prebidのデバッグを有効にするパラメーターをURLに付加する
③GAMのデバッグを有効にするパラメーターをURLに付加する

こちら順に説明していきます。

Prebidの変数をConsoleで確認する方法

Prebid.jsを読み込んでいる場合、「pbjs」というグローバル変数が定義され、この変数の中に定義されている変数hb_pb(勝者ビッダーのCPM)を利用してGAMのターゲティングが行われます。

以下のスクリプトは、Prebid.jsの設定スクリプトで紐付けられたGAMの広告スロット、勝者ビッダー、および勝者ビッダーからの返されたレスポンス（CPMなど）を、ChromeなどのDevToolsに表示するためのものです。

確認したいページをChromeで開いて右クリックの「検証」をクリックしてDevToolsを開き、Consoleタブをクリックして、以下のスクリプトをコピーしてEnterを押して実行してみてください。

(function() {
  function forEach(responses, cb) {
    Object.keys(responses).forEach(function(adUnitCode) {
      var response = responses[adUnitCode];
      response.bids.forEach(function(bid) {
        cb(adUnitCode, bid);
      });
    });
  }
  var winners = pbjs.getAllWinningBids();
  var output = [];
  forEach(pbjs.getBidResponses(), function(code, bid) {
    output.push({
      bid: bid,
      adunit: code,
      adId: bid.adId,
      bidder: bid.bidder,
      time: bid.timeToRespond,
      cpm: bid.cpm,
      msg: bid.statusMessage,
      rendered: !!winners.find(function(winner) {
        return winner.adId==bid.adId;
      })
    });
  });
  forEach(pbjs.getNoBids &amp;&amp; pbjs.getNoBids() || {}, function(code, bid) {
    output.push({
      msg: "no bid",
      adunit: code,
      adId: bid.bidId,
      bidder: bid.bidder
    });
  });
  if (output.length) {
    if (console.table) {
      console.table(output);
    } else {
      for (var j = 0; j &lt; output.length; j++) {
        console.log(output[j]);
      }
    }
  } else {
    console.warn('NO prebid responses');
  }
})();

(function() {

function forEach(responses, cb) {

Object.keys(responses).forEach(function(adUnitCode) {

var response = responses[adUnitCode];

response.bids.forEach(function(bid) {

cb(adUnitCode, bid);

});

}

var winners = pbjs.getAllWinningBids();

var output = [];

forEach(pbjs.getBidResponses(), function(code, bid) {

output.push({

bid: bid,

adunit: code,

adId: bid.adId,

bidder: bid.bidder,

time: bid.timeToRespond,

cpm: bid.cpm,

msg: bid.statusMessage,

rendered: !!winners.find(function(winner) {

return winner.adId==bid.adId;

})

});

forEach(pbjs.getNoBids && pbjs.getNoBids() || {}, function(code, bid) {

output.push({

msg: "no bid",

adunit: code,

adId: bid.bidId,

bidder: bid.bidder

});

if (output.length) {

if (console.table) {

console.table(output);

} else {

for (var j = 0; j < output.length; j++) {

console.log(output[j]);

}

} else {

console.warn('NO prebid responses');

}

})();

以下のような表が表示されます。

この表では、GAMの広告スロットに対し勝者ビッダーやそのビッダーが提供したCPM、そしてGAM内で競り勝った場合はレンダリングされた結果などを確認できます。

この表を見ることで、どのビッダーが勝者になったかそしてそのCPMはいくらか？、またビッダーの広告が表示されないのはどういう原因か？などを確認することができます。

また、今紹介したスクリプトによる確認方法以外に、Prebidのデバッグを有効にするパラメーター、GAMのデバッグを有効にするパラメーターをURLに指定することで、デバッグをする方法もあります。

Prebidのデバッグを有効にするパラメーターをURLに付加する

デバッグしたいURLの末尾に、?pbjs_debug=trueをつけてロードすると、Prebid.jsによる処理の経過がタイムラインで確認できます。

Key-ValueのGAMへの付与は、以下のようなログで確認できます。

広告スロットにしたいして、hb_pbがセットされているか確認するようにしましょう。

GAMのデバッグを有効にするパラメーター

同様にデバッグしたいURLの末尾に、?google_console=1をというパラメーターをつけてロードすると、GAMによる処理の経過がタイムラインで確認できます。

パラメーターをつけてロードするといかのようなコンソールが開きますので、「ページリクエスト」タブをクリックして下さい。

そうすると、GAMによる処理の経過がタイムラインで確認できます。

Prebid.jsによるターゲティングがうまくいっている場合、これらのメッセージの中で「～にターゲティング属性hb_～を設定します。」というのが表示されるので、確認するようにしましょう。

まとめ

Prebid.jsを利用したHeaderBiddingの方法について、①HeaderBiddingとPrebid.jsの概要、②Prebid.jsとGAMの連携の概要と設定方法、③Prebid.jsとGAMの連携のデバッグ方法について、解説してきました。

かなり複雑な部分もありますが、ここで説明してきた方法でPrebid.jsを利用してGAMでHeaderBiddingを行うことができます。

HeaderBiddingでさらなる収益の最適化を行っていきましょう。

Prebid.jsはHeader Biddingを行うための仕組み。それじゃあHeader Biddingって何？

Prebid.jsって？

Prebid.jsを使ってGAMでHeaderBiddingを行う全体像

Prebid.jsの設定スクリプトに関して

GAMでの広告申込情報の設定

Prebid.jsがうまく機能しているかデバッグする方法

Prebidの変数をConsoleで確認する方法

Prebidのデバッグを有効にするパラメーターをURLに付加する

GAMのデバッグを有効にするパラメーター

まとめ

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

【GoogleAdManager】slotRenderEndedとは？使…

【Googleアドマネージャー】デバッグ方法を詳しく解説！エラーやトラブ…

GoogleAdManager(GAM)のkey-value(キーバリュ…

【GAM】ダイナミックアロケーション(DA)とは？競合させるメリットと設…

コメントを残すコメントをキャンセル