AST を使用して配置を設定する
このページには、サンプル クライアント ページのヘッダーと本文に Xandr の販売者タグ (AST) 関数を実装する方法を示すサンプル Web ページが含まれています。
注:
パフォーマンスを向上させ、Microsoft サービスと連携するための継続的な移行の一環として、AST 製品を Xandr CDN から Microsoft CDN に移行します。
この変更により、進化するプライバシー標準 (本格的なポリシーや CMP ポリシーなど) への準拠など、重要な更新プログラムを引き続き受け取ります。
重要なプライバシー機能を含む AST 製品の最新の更新プログラムと機能強化を確実に受け取るようにするには、次の手順に従って、Web ページを新しい Microsoft CDN URL で更新します。
- 標準ドメイン:https://acdn.adnxs.com/ast/ast.js
- Cookie フリー ドメイン:https://adsdk.bing.net/ast/ast.js
コンテンツ セキュリティ ポリシー (CSP) を使用する場合は、許可されている一覧に次のドメインが追加されていることを確認します。
adsdk.microsoft.com-
adsdk.bing.net(該当する場合)
詳細については、 AST API リファレンスを参照してください。
手順 1: APN オブジェクトを作成し、Xandr JavaScript ライブラリを読み込む
5 行目では、空の AST オブジェクトを設定します。 7 行目では、そのオブジェクトに関数キューを作成し、タグに関する情報を使用してそのキューに関数をプッシュし、Xandr 広告サーバーに入札を要求できるようにします。 10 行目から 15 行目では、Xandr CDN からクライアント側のオークション ライブラリを非同期的に読み込みます。 スクリプトが存在する場合は、スクリプトを処理します。それ以外の場合は、キューに入れられます。
注:
このコードは、Web ページに直接貼り付けることができます。追加の開発者の変更は必要ありません。 次に示すように、コードを head に分離して body するか、ページ headにアクセスできない場合は、タグ全体を body の 1 つのコード ブロックに配置できます。
警告
このコードのデプロイに AST タグを外部 Javascript ファイルまたはその他のカスタマイズにデプロイすると、意図しない結果や機能が失われる可能性があり、今後の AST リリースで機能をテストして利用するには、顧客のアクションが必要になります。 Xandr がこのインスタンスでトラブルシューティングまたはサポートできない場合があります。
<html>
<head>
<script type="text/javascript">
//create empty apntag object if it doesn't exist
var apntag = apntag || {};
//create a queue on the apntag object
apntag.anq = apntag.anq || [];
//load ast.js - async
(function() {
var d = document, e = d.createElement('script'), p = d.getElementsByTagName('head')[0];
e.type = 'text/javascript'; e.async = true;
e.src = 'https://adsdk.microsoft.com/ast/ast.js';
p.insertBefore(e, p.firstChild);
})();
手順 2: グローバル ページ オプションを設定する
次に、 setPageOpts 関数を使用してグローバル ページ オプションを設定します。 ここでは、メンバー ID を 958 に設定し、ページ全体のターゲット パラメーターを定義します。
member は、 setPageOpts または defineTag で必要です (以下を参照)。 この例では、年齢と性別を使用します。
//push commands to loading queue, to allow for async loading
apntag.anq.push(function() {
//set global page options
apntag.setPageOpts({
member: 958,
keywords: {
'artist': 'Prince',
'genre': ['rock', 'pop']
},
user: {
age: 26,
gender: 1
}
});
手順 3: 広告タグを定義する
次に、 defineTag 関数を使用して、このページで必要なすべての広告配置を定義します。 ここでは、配置ごとに次を指定します。
member: グローバル ページ オプションをこの配置のメンバー ID でオーバーライドできます (省略可能です。setPageOptsで指定されていない場合は存在する必要があります)invCode: この配置の配置コード。 (invCodeORtagId必要)tagId: この配置の配置 ID (invCodeORtagId必要)sizes: 複数のサイズを使用している場合、リストの最初の項目は配置サイズで、その他のサイズはプロモーション サイズです。targetId: 任意の一意の文字列。これは、ページ本文の一意のdivID に対応している必要があります。その他のオプションを使用できます。 AST API リファレンスを参照してください。
//define ad tags apntag.defineTag({ invCode: 'ABC1234', sizes: [728,90], targetId: 'apn_ad_slot_1' }); apntag.defineTag({ tagId: 123456, sizes: [[300,250],[300,600]], targetId: 'apn_ad_slot_2' });
手順 4: タグを読み込む
すべてのタグが定義されたらすぐに、 loadTags 関数を呼び出します。 この関数は、1 つの広告呼び出しでタグの広告要求を非同期的に送信します。
//start loading tags
apntag.loadTags();
});
</script>
</head>
手順 5: 配置の場所を定義する
ページの本文で、各defineTag呼び出しのtargetId要素に対応するdiv タグを使用して、各配置の場所を指定します。
showTag関数を使用して、配置が広告を受け取る準備ができていることを示します。 この関数が呼び出されると、インプレッションは取引済みとしてマークされ、会計目的の "印象" と見なされます。
注:
AST は、プログラムでタグ div 広告プレースホルダー内のすべての DOM 要素を管理します。 これらの要素は変更される可能性があるため、どの要素にも直接アクセスしないでください。では、 refresh などの組み込みの AST 関数のみを使用します。 これらの要素に直接アクセスすると、ページ上の間違った場所に広告が表示されたり、重複する広告や空白が表示されたりするなど、予期しない動作が発生する可能性があります。
<body>
<div id='apn_ad_slot_1'>
<script type="text/javascript">
apntag.anq.push(function() {
//signal to script that this DOM element has been loaded and is ready to be populated with an ad
apntag.showTag('apn_ad_slot_1');
});
</script>
</div>
<br>
<div id='apn_ad_slot_2'>
<script type="text/javascript">
apntag.anq.push(function() {
apntag.showTag('apn_ad_slot_2');
});
</script>
</div>
</body>
</html>