メインコンテンツまでスキップ

Prebid.js ネイティブ広告 実装マニュアル

Prebid.js で Adgeneration のネイティブ広告（Native ad）を配信するための実装マニュアルです。
Prebid.js 自体の設定、Google Ad Manager（GAM）の設定は、公式サイト等よりご確認ください。

Adgeneration の管理画面での Bidder 枠の作成は、Bidder設定 Prebid.jsをご参照ください。

対象バージョン​

お使いの Prebid.js のバージョンによって、書き方が異なります。

Prebid.js書き方
11.43.0 以降（推奨）「Prebid.js 11.43.0 以降」タブの書き方
10.0 〜 11.4211.43.0 以降へ更新してください（下記参照）
9 以前「Prebid.js 9 以前」タブの書き方
Prebid.js 10.0 〜 11.42 をお使いの場合
  • 「Prebid.js 9 以前」の書き方では、Prebid.js 10 からネイティブ広告の値が GAM の key-value（hb_native_*）で送られなくなったため、タイトル・画像・リンクなどが表示されません。
  • 「Prebid.js 11.43.0 以降」の書き方では、オプトアウトリンクの URL がエンコードされたまま入るため、インフォメーションアイコンのリンクが正しく開きません。

Prebid.js を 11.43.0 以降に更新し、あわせて書き方も「Prebid.js 11.43.0 以降」に変更してください。

ヒント

このページのタブは連動しています。どこかのタブでバージョンを選ぶと、ページ内のすべてのタブが切り替わります。

実装手順​

  1. Prebid.js のダウンロード
  2. サイトへの Prebid.js ライブラリの実装
  3. bidder コードの記述
  4. GAM のネイティブスタイルの設定
  5. GAM のラインアイテムの設定

1. Prebid.js のダウンロード​

ダウンロード URL：https://docs.prebid.org/download.html

「Select Bidder Adapters」で Ad Generation を含めてください。

Prebid.js 11.43.0 以降をダウンロードしてください（Ad Generation のアダプター 1.7.0 以降が含まれます）。

2. サイトへの Prebid.js ライブラリの実装​

サイトへ、アダプターを含むライブラリを実装します。

3. bidder コードの記述​

Prebid.js のネイティブ広告の bidder コードを記述します。

① AdSlot の設定

  • サイズは固定、または Fluid で設定してください。
  • mediaTypes を native で設定してください。
  • GAM のアドユニットを記述します。

② ネイティブフィールドの設定

  • リクエストで取得する項目を設定します。書き方は Prebid.js のバージョンによって異なります（下記参照）。

③ 枠 ID の設定

  • bidder: 'adg' または bidder: 'adgeneration' が使用できます。
  • id には、Adgeneration の管理画面で作成した Bidder 枠の広告枠 ID を指定します。作成方法はBidder設定 Prebid.jsをご参照ください。

ネイティブフィールド一覧​

Prebid.js が推奨する ORTB 形式（OpenRTB Native 1.2）で、mediaTypes.native.ortb に記述します。各項目は assets に、id と種類（title / img / data）で指定します。
詳しくは、Prebid 公式の Prebid.js Native Implementation Guide をご参照ください。

キーassets での指定
タイトルtitle: { len: 80 }
リード文data: { type: 2 }
広告主data: { type: 1 }
メイン画像img: { type: 3, wmin: 1, hmin: 1 }
アイコン画像img: { type: 1, wmin: 1, hmin: 1 }
CTAボタンdata: { type: 12 }
オプトアウトリンクassets ではなく、ortb に privacy: 1 を記述
リンク先URL記述不要
  • ネイティブスタイルで表示する項目を記述してください。
  • id は、assets の中で重ならない整数にしてください。
  • type の番号は、上の表のとおり正しく記述してください。required: 1 を付けた項目の番号が違うと、入札ごと除外されます。
  • img には、w か wmin、h か hmin を必ず記述してください。記述が無いと、Prebid.js がネイティブの設定ごと無効にするため、広告が配信されません。
  • OpenRTB の仕様に合わせて、オプトアウトリンクを使うことを示すため、privacy: 1 を記述してください。
  • 表示に欠かせない項目だけ required: 1 にしてください（required: 1 の項目が欠けた入札は除外されます）。
  • Prebid.js 10 以降、sendId の記述は不要です。
var adUnits = [{
  code: 'GAMNetworkID/AdUnitCode',
  sizes: [1, 1],
  mediaTypes: {
    native: {
      ortb: {
        ver: '1.2',
        privacy: 1,
        assets: [
          { id: 1, required: 1, title: { len: 80 } },                    // タイトル
          { id: 2, required: 1, img: { type: 3, wmin: 1, hmin: 1 } },    // メイン画像
          { id: 3, required: 0, img: { type: 1, wmin: 1, hmin: 1 } },    // アイコン画像
          { id: 4, required: 1, data: { type: 1 } },                     // 広告主
          { id: 5, required: 0, data: { type: 2 } },                     // リード文
          { id: 6, required: 0, data: { type: 12 } }                     // CTAボタン
        ]
      }
    }
  },
  bids: [{
    bidder: 'adg',
    params: {
      id: "xxxxxxx"
    }
  }]
}];

4. GAM のネイティブスタイルの設定​

GAM のネイティブスタイルを、次のとおり設定します。

  • bidder コードに記述した必須フィールドを含むスタイルを、HTML / CSS で作成します。
  • Prebid CDN のスクリプトを設定します。
  • インフォメーションアイコンを設置します。

4-1. ネイティブスタイルの作成​

通常どおりネイティブスタイルを設定します。

  1. GAM へログイン → 配信 → ネイティブ → ネイティブ広告を作成 → 「HTML ＆ CSS エディタ」を選択
  2. 広告サイズ・カスタムフォーマットを作成（既存のフォーマットを使う場合は選択）
  3. ネイティブ広告のスタイルを設定
  4. HTML / CSS で広告のスタイルを作成

参照：https://support.google.com/admanager/answer/7661907

4-2. 各要素の組み込み​

作成したネイティブスタイルに、各キーを設定します。

##hb_native_*## の形式で記述します。広告ユニットを ORTB 形式で記述していても、ネイティブスタイルはこの名前の形式で記述してください（assets の id に左右されないため、id を変えてもクリエイティブが壊れません）。

キーparamネイティブスタイルへの記述
タイトルhb_native_title##hb_native_title##
説明文hb_native_body##hb_native_body##
オプトアウトリンクhb_native_privacy<a href="##hb_native_privacy##" id="prlinkurl" target="_blank" rel="noopener">
会社名・ブランドhb_native_brand##hb_native_brand##
メイン画像hb_native_image##hb_native_image##
アイコンhb_native_icon##hb_native_icon##
CTAボタンhb_native_cta##hb_native_cta##
リンク先URLhb_native_linkurl%%CLICK_URL_UNESC%%##hb_native_linkurl##
  • クリック URL：GAM のクリック計測マクロ %%CLICK_URL_UNESC%% を使います。
    実装例：<a href="%%CLICK_URL_UNESC%%##hb_native_linkurl##" target="_blank" class="pb-click">
  • オプトアウトリンク：デコードは不要です。##hb_native_privacy## をそのまま href に設定してください。

4-3. スクリプトの記述​

ネイティブスタイル内に、Prebid CDN でホストされている Universal Creative のスクリプトを記述します。下記の記述をそのまま設定してください。

native.js は、##hb_native_*## の置き換えと、インプレッション・クリックの計測に必要です。
バージョン（@1.18.0）は記載のまま指定してください。@latest にすると、新しい版が公開されたときに意図せず動作が変わるおそれがあります。

<script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@1.18.0/dist/native.js"></script>
<script>
  var pbNativeTagData = {};
  pbNativeTagData.pubUrl = "%%PATTERN:url%%";
  pbNativeTagData.adId = "%%PATTERN:hb_adid%%";  // Send All Bids の場合は "%%PATTERN:hb_adid_adg%%"（bidder: 'adgeneration' の場合は "%%PATTERN:hb_adid_adgeneration%%"）
  pbNativeTagData.requestAllAssets = true;
  window.ucTag.renderAd(document, pbNativeTagData);
</script>

4-4. インフォメーションアイコン​

ネイティブスタイル内に、インフォメーションアイコンとオプトアウトリンクを設定します。

① インフォメーションアイコン画像の設置

  • メディア様でアイコン素材をお持ちの場合は、お持ちのインフォメーションアイコンを設置してください。
  • SVG 形式のアイコン素材を使う場合は、下記の SVG をご利用ください。
<svg id="master-artboard" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd">
  <defs><radialGradient id="gradient-0" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5"></radialGradient></defs>
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g transform="matrix(0.2555025815963745, 0, 0, 0.2555025815963745, -153.76052856445312, -11.603142738342285)">
    <g id="g-1" transform="matrix(1, 0, 0, 1, 0, 0)">
      <g id="g-2">
        <path class="st0" d="M652,46c27.6,0,50,22.4,50,50s-22.4,50-50,50s-50-22.4-50-50S624.4,46,652,46z" style="fill: rgb(85, 85, 85);"/>
      </g>
    </g>
  </g>
  <g transform="matrix(0.05735531821846962, 0, 0, -0.05735531821846962, -24.604122161865234, 11.472267150878906)">
    <g id="g-5" transform="matrix(1, 0, 0, 1, 0, 0)">
      <g id="g-6">
        <path class="st0" d="M652,46c27.6,0,50,22.4,50,50s-22.4,50-50,50s-50-22.4-50-50S624.4,46,652,46z" style="fill: rgb(255, 255, 255);"/>
      </g>
    </g>
  </g>
  <g transform="matrix(0.04459405317902565, 0, 0, 0.1242375373840332, 7.918155670166016, 4.555121421813965)">
    <g id="g-7" transform="matrix(1, 0, 0, 1, 0, 0)">
      <g id="g-8">
        <path class="st0" d="M58,49h100v100H58V49z" style="fill: rgb(255, 255, 255);"/>
      </g>
    </g>
  </g>
</svg>

② オプトアウトリンクの設定

  • ##hb_native_privacy## をリンク（href）に設定してください。
  • URL はエンコードされずにそのまま入るため、デコードは不要です。
<a href="##hb_native_privacy##" id="prlinkurl" target="_blank" rel="noopener">（アイコン）</a>

③ アイコンの表示の条件分岐（実装推奨）

  • ターゲティングをしない広告が配信される場合は、インフォメーションアイコンを非表示にする必要があります。
  • 値が空の場合は href が空になるため、CSS で非表示にしてください。
#prlinkurl[href=""] { display: none; }

4-5. サンプルコード​

GAM のネイティブスタイルのサンプルコードです。インフォメーションアイコンの SVG は、4-4. インフォメーションアイコンのものを <a> の中に貼り付けてください。

HTML

<div class="sponsored-post">
  <div id="thumbnail"><img src="##hb_native_image##" id="image"></div>
  <div class="content">
    <h1><a href="%%CLICK_URL_UNESC%%##hb_native_linkurl##" target="_blank" class="pb-click">##hb_native_title##</a></h1>
    <p>##hb_native_body##</p>
    <div class="attribution">##hb_native_brand##</div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@1.18.0/dist/native.js"></script>
<script>
  var pbNativeTagData = {};
  pbNativeTagData.pubUrl = "%%PATTERN:url%%";
  pbNativeTagData.adId = "%%PATTERN:hb_adid%%";
  pbNativeTagData.requestAllAssets = true;
  window.ucTag.renderAd(document, pbNativeTagData);
</script>

<div id="privacy">
  <a href="##hb_native_privacy##" id="prlinkurl" target="_blank" rel="noopener">
    <!-- インフォメーションアイコンの SVG -->
  </a>
</div>

CSS

.sponsored-post {
  background-color: #ffffff;
  font-family: sans-serif;
  padding: 10px 20px 10px 20px;
}

.content {
  overflow: hidden;
}

#thumbnail {
  width: 120px;
  height: 100px;
  float: left;
  margin: 0 20px 10px 0;
}

#image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

h1 {
  font-size: 18px;
  margin: 0;
}

a {
  color: #0086b3;
  text-decoration: none;
}

p {
  font-size: 16px;
  color: #444;
  margin: 10px 0 10px 0;
}

.attribution {
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  display: inline-block;
  letter-spacing: 2px;
  background-color: #ffd724;
  border-radius: 2px;
  padding: 4px;
}

#prlinkurl[href=""] {
  display: none;
}

#privacy {
  position: absolute;
  z-index: 9999;
  top: 0px;
  right: 0px;
}

5. GAM のラインアイテムの設定​

GAM のラインアイテムを設定して、配信設定は完了です。