🐈

XandrのASTタグでクリエイティブIDを直接指定する

2025/02/26に公開

adtech

tech

TL;DR

apntag.defineTag に指定するパラメータに forceCreativeId を入れれば良い

概要

ASTタグで広告を呼び出す場合で、次のようなフローを取る場合を想定しています。
Web広告はそこそこ複雑なのでコンテキストを整えるために今回の想定フローを詳しめに書き出すとこんな感じです。
(とはいえ、ふんわり理解な部分も多いので細かな前後関係がおかしかったら指摘ください)

1. Webページ
↓
2. GAM (広告ユニット → オーダー → 広告申し込み情報 → クリエイティブ)
↓
3. クリエイティブとしてASTタグ付きのHTMLを指定
↓
4. Xandr (Advertiser → Insertion Order → Line Item → Creative)

困っていたこと

Xandrからの広告配信の実ページでのテストをしたい場合、テストであってもRTB(オークション)が走るので確率的にしか広告が表示されない。よって検証がスムーズにいかない。
そこには「QA担当者が30分間リロードボタンをクリックし続ける」みたいな苦行がありました。

実装

呼び出し側のHTML

こんな感じを想定。普通のGAM呼び出しです。

<html>
  <head>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
        googletag.defineSlot('SLOT_ID', [1, 1], 'div-gpt-ad-id')
          .addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
      });
    </script>
  </head>

  <body style="">
    <h2>AST Test Page</h2>
    <h5>Ad goes here ↓↓↓↓↓</h5>
    <div id='div-gpt-ad-id'>
      <script>
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-id'); });
      </script>
    </div>
    <h5>Ad goes here ↑↑↑↑↑</h5>
  </body>
</html>

GAMに設置するASTタグ

FIXMEと書いてる部分は適宜変更してください

<html>
  <head>
    <script type="text/javascript">
      const astTopDocument = window.top.document
      const member = MEMBER_ID; // FIXME: fill your Member ID
      const tagId = XANDR_PLACEMENT_ID; // FIXME: fill your Placement ID
      const adTargetId = 'ad_dfp_overlay';
      const targetId = 'ast-render-to';
      const creativeId = 'CREATIVE_ID'; // FIXME: fill your Creative ID
      const definedTag = {
        targetId,
        tagId,
        enableSafeFrame: false,
        sizes: [[1, 1]],
        allowedFormats: ['banner'],
        targetingParams: {},
        forceCreativeId: creativeId, // ← これで指定できる
      }
      // Call AST
      var apntag = apntag || {};
      apntag.debug = true; // FIXME: remove in prod
      apntag.anq = apntag.anq || [];
      (function () {
        var d = document, e = d.createElement('script'), p = d.getElementsByTagName('head')[0];
        e.type = 'text/javascript'; e.async = true;
        e.src = '//acdn.adnxs.com/ast/ast.js';
        p.insertBefore(e, p.firstChild);
      })();
      apntag.anq.push(function () {
        apntag.setPageOpts({ member });
        apntag.defineTag(definedTag);
        apntag.loadTags();
        apntag.onEvent('adAvailable', targetId, function(xt) {
          const astCreative = xt && xt.banner && xt.banner.content || null
          if (!astCreative) return;
          const astParentElement = astTopDocument.getElementsByTagName('body').item(0)
          if (!astParentElement) return;
          astParentElement.insertAdjacentHTML('afterbegin', astCreative)
        })
        // FIXME: remove from this
        apntag.onEvent('adAvailable', targetId, function(info) {
                console.log('adAvailable', info);
        });
        apntag.onEvent('adNoBid', targetId, function(info) {
                console.log('adNoBid', info);
        });
        apntag.onEvent('adError', targetId, function(info) {
                console.log('adError', info);
        });
        // FIXME: remove to this
        apntag.anq.push(function () {
          apntag.showTag(targetId);
        });
      });
    </script>
  </head>
  <body>
    <div id="ast-render-to"></div>
    <span style="display: none">%%CLICK_URL_UNESC%%</span>
  </body>
</html>

TL;DR

概要

困っていたこと

実装

呼び出し側のHTML

GAMに設置するASTタグ

Discussion