Xandr HTML5 ライブラリと Adobe Edge 広告の統合
次の手順に従って、Xandr HTML5 ライブラリとシームレスに連携するように Adobe Edge で作成された広告を変更します。 これは、クリックを適切に追跡するために必要です。
バナー広告
前提条件
以下の手順を完了するには、テキスト エディターが必要です。 持っていない場合は、 崇高なテキストをお勧めします。
手順 1: 編集する正しいファイルを見つける
開始する前に、Adobe Edge で作成された広告を含むフォルダーを見つけます。 広告がファイル内にある .zip 場合は、ファイルを解凍して、さまざまなアセットを含むフォルダーを表示する必要があります。
次に、次のファイルを見つけます。
index.html- たとえば、広告フォルダーのルート レベルにある拡張子
.jsを持つファイル。300x250edge.jsedgeActions.js
これらのファイルは、以下の手順で必要なすべての変更を行う場所です。
手順 2: Xandr HTML5 ライブラリを追加する
実際の Xandr HTML5 ライブラリが 内 index.htmlにリンクされていることを確認します。
次<script>のタグを<head>追加して、ファイル内のindex.htmlタグ内のライブラリをリンクします。
<script type="text/javascript" src="https://acdn..com/html5-lib/1.3.0/-html5-lib.min.js"></script>
ヒント
クリエイティブが安全な在庫で配信できることを確認するために使用 https します。
手順 3: クリック イベントを追加する
この手順では、ファイルに対するすべての変更を .js 行います。
既存のクリック イベントなし
既存のクリック イベントのないイベントを処理する Adobe Edge JavaScript 関数が表示される場合があります。 次のようになります。
//Edge symbol: 'stage'
(function(symbolName){
Symbol.bindTriggerAction(compId,symbolName,"Default Timeline",16750,function(sym,e){
sym.play(0);
});
//Edge binding end
})("stage");
関数を使用して click イベントをサポートするには、次の APPNEXUS.click() 関数を追加する必要があります。
Symbol.bindElementAction(compId,symbolName,"${Stage}","click",function(sym,e){
APPNEXUS.click();
});
click イベントが追加されると、次のような関数が作成されます。
//Edge symbol: 'stage'
(function(symbolName){
Symbol.bindTriggerAction(compId,symbolName,"Default Timeline",16750,function(sym,e){
sym.play(0);
});
Symbol.bindElementAction(compId,symbolName,"${Stage}","click",function(sym,e){
APPNEXUS.click();
});
//Edge binding end
})("stage");
既存のクリック イベントを使用する
既存のクリック イベントでイベントを処理する Adobe Edge JavaScript 関数が表示される場合があります。 次のようになります。
//Edge symbol: 'stage'
(function(symbolName){
Symbol.bindElementAction(compId, symbolName, "${Stage}", "click", function(sym, e) {
window.open("https://xandr.com");
});
//Edge binding end
})("stage");
関数を使用して click イベントを APPNEXUS.click() サポートするには、ハードコーディングされた URL を置き換えて関数 https://xandr.comAPPNEXUS.getClickTag()を追加する必要があります。
ハードコーディングされた URL を置き換えると、次のような関数が作成されます。
//Edge symbol: 'stage'
(function(symbolName){
Symbol.bindElementAction(compId, symbolName, "${Stage}", "click", function(sym, e) {
window.open(APPNEXUS.getClickTag());
});
//Edge binding end
})("stage");
手順 4. 変更を保存する
変更を保存します。
手順 5. クリエイティブ コンテンツを再圧縮する
ファイルを解凍したときに作成されたフォルダー内のすべての内容を選択します。 内容を新 .zip しいファイルに圧縮します。
これで、HTML5 クリエイティブを Xandr プラットフォームにアップロードする準備ができました。
IAB バリデーター (省略可能)
このクリエイティブが IAB ガイドラインまでどのように測定されるかを確認する場合は、 HTML5 Ad Validator ツールを使用して行うことができます。