Google アド マネージャーは、ネイティブ ディスプレイ広告のほか、動画アプリ インストール広告、動画コンテンツ広告、カスタム フォーマットなどのネイティブ動画広告にも対応しており、さまざまなプラットフォームでネイティブ動画を使って効果的に情報を発信することができます。ネイティブ広告スロットには、動画とディスプレイのどちらのフォーマットも配信できます。
ネイティブ動画広告の動作
アド マネージャーのネイティブ動画広告では、PC ウェブ、モバイルウェブ、モバイルアプリのリクエストで、Fluid サイズを含むすべてのネイティブ スタイル設定オプションを使用できます。ネイティブ動画広告は次のように動作します。
動画の再生 |
|
---|---|
音声 |
|
機能のサポートと制限
ネイティブ動画広告は、アプリとウェブのプレースメント、すべての予約広告、直接取引、間接的なプログラマティック デマンドに対応しています。ネイティブ動画広告の要件は次のとおりです。
レンダリング | ネイティブ スタイルまたはモバイルアプリ用カスタム レンダリング |
動画のホスティング |
アド マネージャーでホスト、または第三者の VAST アド マネージャーでホストする場合は、動画アセットをアップロードするか、クリエイティブとして使用するアセットのソース URL を指定するかを選択できます。アセットは、サポートされている形式である必要があります。アド マネージャーではアセットをメザニン ファイルとして自動的に指定し、利用可能なすべてのフォーマットとサイズにコード変換します。 |
ホストされる動画の最大サイズ | 512 MB* |
インプレッション トラッキング | ネイティブ動画広告のインプレッションは、動画広告の業界標準に合わせて、プレーヤーで広告の再生が開始された後にカウントされます。カスタム ネイティブ テンプレートのモバイルアプリ用カスタム レンダリングの場合は、アプリで recordImpression メソッドを呼び出す必要があります。 |
使用プレーヤー |
|
必要な SDK (モバイルアプリ用) |
ネイティブ スタイル
カスタム レンダリング
|
*アド マネージャー 360 をご利用でないネットワークでは、ホストされる動画の最大サイズは 30 MB となります。
制限事項
- VPAID 動画は、ネイティブ動画では使用できません
- 現在のところ、クリエイティブのプレビューはネイティブ動画には対応していません
- カスタム ネイティブ動画広告は、プログラマティック保証型取引のパブリッシャー管理のクリエイティブでサポートされています。優先取引の広告主提供のクリエイティブではサポートされていません。プログラマティック直接取引でサポートされているクリエイティブ タイプをご覧ください。
- 現時点でサポートされているのはバナーとフィード内プレースメントのみで、インタースティシャルはサポートされていません
Google に提供し、使用されるすべてのコンテンツは、利用規約に沿ったものである必要があります。
SDK 経由でネイティブ動画をリクエストする
アプリ向けネイティブ動画広告は、標準のディスプレイ バナー広告のコードを使用して呼び出すことができます。
メインの画像アセットをネイティブ広告のレイアウトに含める場合は、ImageView
アセットの代わりに MediaView
アセットを使用する必要があります。実装とカスタマイズについては、デベロッパー ガイドをご覧ください。
HTML と CSS の要件
ネイティブ動画広告のスタイルを設定する際、動画プレーヤーはアスペクト比を保つために 1 つの HTML 要素内に配置する必要があります(div
で #%NATIVE_VIDEO_WRAPPER%#
マクロを使ってプレーヤーをトリガーする)。また、動画プレーヤーは配置した要素の中で最大限のスペースを使って表示されなければなりません。したがって、ネイティブ動画フォーマットのスタイルを設定するにあたっては、以下の 3 点に留意してください。
1. ネイティブ動画ラッパーを含む div 要素のサイズを明示的に指定する
#%NATIVE_VIDEO_WRAPPER%#
マクロを含む div
要素のサイズを、CSS 内に割合(%)またはピクセルで明確に指定します。
.host-div { width: 300px; height: 200px; }
2. 動画とコンテナ div のアスペクト比に注意し、余白ができないようにする
コンテナ div と動画プレーヤーのアスペクト比が異なると、動画の周囲に余白が生まれます。余白部分の色は、モバイルアプリの場合は透明、モバイルウェブと PC ウェブの場合は黒になります。ここに示す例では、高さに対する幅の比率が、動画よりコンテナ div で大きくなっています。余白をなくすには、コンテナ |
例: 動画より div の方が幅の比率が大きい |
<div class="video-ratio-wrapper"> <div class="video"> #%NATIVE_VIDEO_WRAPPER%# </div> </div>
.video-ratio-wrapper { position: relative; width: 100%; } .video-ratio-wrapper:after { padding-top: 56.25%; /* 16:9 ratio */ display: block; content: ''; } .video { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
3. HTML 要素が動画プレーヤーにどのように重なるかを知っておく
モバイルアプリに実装された動画プレーヤーは、常に他の HTML 要素よりも下に(奥に)表示されます。この表示方法は仕様であり、見出しなどの要素が動画に重ねて表示されることを意図したものです。
コンテナ div
に Z-Index を設定してもこの動作に影響はありませんが、コンテナ div
に背景色を設定すると、div
要素が動画プレーヤー全体を覆うことになります。
そのため、動画をラッピングする div
要素は透明にする必要があります。コンテナ div
に透明以外の背景色が設定されていると、動画が覆われてしまいます。
SDK を使うと、コンテナ div
を透明色で維持しつつ、動画の周囲に余白が表示される場合の色を設定できます。これを行うには、CSS の body 要素に background-color
を設定します。SDK では、この値が動画の周囲の余白の色として使用されます。
body { background-color: aliceblue; }