次の方法で共有

アウトストリーム ビデオのページ上のタグを設定する

  • [アーティクル]

Xandr Outstream Video では、Xandr の販売者タグ (AST) が使用されます。 AST は、ページのヘッダーで実行される非同期 JavaScript タグです。 AST タグは、ページ ヘッダーで定義および読み込まれ、ページ本文にタグを "表示" することによってアクティブ化されます。

ヒント

選択したユース ケースの場合は、AST を定義、読み込み、ページ本文に表示することもできます。

メカニズム

アウトストリーム ビデオ広告ユニットは、次のページ位置にある Web ページに追加できます。

  • 記事の先頭
  • アーティクル内のテキストの段落間
  • 記事の最後に

上記の各シナリオでは、アウトストリームビデオ広告ユニットがページ本文に非表示 <div> の要素として含まれています。 ページ本文の要素は <div> 、ターゲット識別子を使用するビデオ広告ユニットを参照します。これは、ページ ヘッダー内のターゲット識別子の定義に対応します。 コンテナーが表示されると、アウトストリームビデオ広告ユニットが再生用にアクティブ化され、ページ上で展開されてコンテンツが表示されます。

例

AST を使用すると、呼び出すタグ (配置) を定義できます。 アウトストリーム配置を定義するときに、追加のオプションを渡して、プレーヤーをページに表示する方法と動作を指定できます。 次の例は、アウトストリーム配置の を defineTag 呼び出す方法を示しています。

    apntag.defineTag({
        //required params
        targetId: 'outstream_div',
        tagId: 31,
        sizes: [1, 1],
        allowedFormats: ['video'],
        targetingParams: {},
        video: {
            frameworks: [1,2]
        },
        //the options object is passed to the renderer which creates the outstream player on the page
        rendererOptions: {
            playerTechnology: [
                'flash',
                'html5'
            ],
            adText: 'Ad',
            showMute: true,
            showVolume: true,
            showProgressBar: true,
            autoInitialSize: true,
            allowFullscreen: true,
            skippable: {
                videoThreshold: 10,
                videoOffset: 5,
                skipLocation: 'top-right',
                skipText: 'Video can be skipped in %%TIME%% seconds',
                skipButtonText: 'Continue'
            }
        }
    });

Outstream ビデオを使用した SafeFrame の実装

SafeFrame は、破壊的な広告の動作や、ページで広告をインライン配信する潜在的なセキュリティ リスクを回避するために作成されました。 SafeFrame の完全な仕様は、 IAB Web サイトで入手できます。

ビデオ クリエイティブの場合、SafeFrame は現在、アウトストリーム ビデオでのみ使用できます。

Outstream の SafeFrame を有効にするには、次の enableSafeFrame 例に示すように、定義で apntag オプションを設定します。

apntag.defineTag({
  enableSafeFrame : true,
  sizes: [640, 414]
  ...

SafeFrame のプレイヤー サイズの定義

autoInitialSize SafeFrame はまだサポートされていないため、前の例に示すように、 でapntag最終プレイヤーの正確なディメンションを設定する必要があります。 通常、さまざまなプレイヤー サイズに対応するために、モバイルとデスクトップの配置を異なる方法で設定する必要があります。

次の例に示すように、プレーヤーの必要な幅と高さを計算できます。

ターゲット幅が 640 で aspectRatio=16:9 の場合:

  • 640 / (16/9) = 360px プレイヤーの高さ
  • 24px = 上のバーは高さに 24px を追加します
  • 30px = コントロール位置が下に設定されている場合 (オーバーではなく)、高さに 30px を追加します

この例では、[640, 414] のサイズに対して高さの合計が最大 414 を加算します。