ファイルをパソコンで直接開く
IMA のガイドでは、ローカルでもウェブサーバー経由でページを配信するよう案内しています。HTML ファイルを直接開くと、テストが失敗することがあります。
1分でわかる
映画館で、本編が始まる前に予告編や広告が流れるのを見たことはありませんか? プレロール動画はまさにそれで、舞台があなたのサイトになったものです。ユーザーが再生ボタンを押すと、コンテンツが表示される前に、同じプレーヤー内で広告が再生されます。プレーヤーとは、動画が流れる枠のことで、再生、一時停止、音量のボタンがあります。広告が終わると、選ばれた動画が始まります。
これを動かすには、プレーヤーが広告をリクエストできる必要があります。Google は IMA SDK というコードのパッケージを提供しており、プレーヤーと一緒に組み込みます。IMA SDK は、広告タグを使って Ad Manager にリクエストを送ります。広告タグとは、広告ユニットやプレーヤーのサイズなど、広告枠の情報が入ったインターネット上のアドレスです。レスポンスは VAST という標準形式で返ります。どの動画を再生し、再生回数をどう数えるかが書かれた、レシピのようなものです。サイトで動画広告ルールを使っている場合、レスポンスは VMAP で返ることもあります。これはテレビの番組表のように、各広告ブレークが入るタイミングを示します。
Google は、動画が自動的に始まる「自動再生」についても重要な点を説明しています。Chrome や Safari などのブラウザには独自のルールがあり、音声なしの場合にだけ自動再生できることが多くあります。ブラウザが許可しているかを簡単に確認する方法はなく、実際に再生を試すしかありません。そのため IMA のガイドでは、モバイルでは広告コンテナをユーザーの操作、たとえば再生ボタンのタップで有効にするよう案内しています。また、プレーヤーが自動再生またはミュートで始まる場合は、その旨をリクエストで伝え、その方法で再生できる広告だけが返るようにします。
プレロールは、授業、レシピ、動画ニュースのように、動画が訪問の目的である場合に向いています。Google の動画ポリシーでは、この枠は「インストリーム」と呼ばれます。ユーザーが見ると選んだコンテンツの中という意味で、正しく宣言する必要があります。常に覚えておいてください。ユーザーは動画を見に来たので、広告がコントロールを邪魔したり、コンテンツを止めたりしてはいけません。
手順
実装例
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
<video id="conteudo" width="640" height="360" playsinline controls>
<source src="meu-video.mp4" type="video/mp4">
</video>
<div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>
<script>
var video = document.getElementById('conteudo');
var adDisplayContainer = new google.ima.AdDisplayContainer(
document.getElementById('adContainer'), video);
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
var adsManager;
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
function (e) {
adsManager = e.getAdsManager(video);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
function () { video.pause(); });
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
function () { video.play(); });
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
});
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
function onAdError(e) {
console.log(e.getError());
if (adsManager) { adsManager.destroy(); }
video.play(); // sem anúncio, o vídeo continua
}
// 3. Pedido do anúncio (IDs de exemplo)
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
'&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
'&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
adsRequest.linearAdSlotWidth = 640;
adsRequest.linearAdSlotHeight = 400;
adsLoader.requestAds(adsRequest);
// 4. Só começa quando a pessoa clica em Assistir
document.getElementById('playButton').addEventListener('click', function () {
adDisplayContainer.initialize();
try {
adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
adsManager.start();
} catch (err) {
video.play();
}
});
</script>Googleのガイダンス
ヒント
注意
IMA のガイドでは、ローカルでもウェブサーバー経由でページを配信するよう案内しています。HTML ファイルを直接開くと、テストが失敗することがあります。
モバイルでは、再生をタップするなど、ユーザーの操作で広告コンテナを有効にする必要があります。そうしないと、広告が再生されないことがあります。
問題のある VAST レスポンスはエラーになることがあります。Google の例では、広告マネージャーを破棄して動画を再生し、ユーザーが止まった画面に取り残されないようにしています。
ウィンドウのサイズが変わると、Google の例では、動画のサイズを指定して AdsManager のリサイズを呼び出します。これがないと、広告のサイズがずれることがあります。
いいえ。プレーヤーは IMA 経由で VAST タグをリクエストできます。Google によると、広告ルールのパラメータ(ad_rule)は広告配信に必須ではなく、動画の広告ルールを使うときだけ必要です。
VAST は、どの広告を再生するかを示すレスポンスです。VMAP は、広告ルールと一緒に使われ、ブレークが入るタイミングを示すレスポンスです。タグは output パラメータで形式を選び、値には vast や vmap などがあります。
ブラウザが許可していればできます。Chrome や Safari は、特に音声ありの自動再生を制限しています。プレーヤーは再生を試し、自動再生やミュートで再生することをリクエストで伝え、モバイルではユーザーの操作から広告を始めてください。
Google のガイドでは、広告が読み込まれなかったときも動画の再生を続けるよう求めています。例では、広告マネージャーを破棄して、広告なしで動画を再生します。
ライブラリ
このページの内容はすべて Google の公式ドキュメントに基づいています。原文で直接確認できます。
監査は、何もクリックせずに訪問者としてサイトを読み取り、修正すべき点を表示します。