どのスタジオ クリエイティブにも動画を追加できます。動画を追加する際は、HTML5 の <video> タグを使用することをおすすめします。
スタジオ クリエイティブを初めて作成する場合は、HTML5 クリエイティブ作成ガイドをご覧ください。
留意点
クリエイティブに動画要素を追加すると、実行時に動画広告の配信料金が発生します。クリエイティブに動画を使用する予定がない場合は、動画要素を配置しないでください。
クリエイティブに動画を追加する
動画タグを HTML ファイルに追加して、クリエイティブに動画要素を作成します。要素に ID（例: video1）を割り当てます。CSS を使用して動画の位置とサイズを設定します。次に、キャンペーン レポートで指標を動画と一致させることができるように、固有のレポート ID を動画に追加します。
ステップ 1: 動画要素と JavaScript を追加する
動画タグを HTML ファイルに追加して、クリエイティブに動画要素を作成します。要素に ID（例: video1）を割り当てます。動画のソースを直接設定するのではなく、イネーブラーを使用して、Google の広告サーバーで広告を配信する際に使用する適切なファイル URL を取得します。
以下のサンプルコードを確認してください。このメソッドは次の処理を行います。
- HTML ファイルに動画要素を追加します。
- スタジオのイネーブラーを読み込みます。
- 適切な動画 URL を読み込む関数を作成します。ローカルでテストしている場合は、ローカル ファイルを直接読み込むことができます。広告が有効になったら、イネーブラーを使用して動画ファイルを読み込む必要があります。
- 動画要素とソースを設定し、動画を再生する関数を作成します。
- イネーブラーの初期化が完了するまで待機し、広告を読み込む関数を作成します。
JavaScript を使用した <video> タグの例
<video id="video1" muted playsinline></video>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
function getVideoUrl(filename) {
if (Enabler.isServingInLiveEnvironment()) {
return Enabler.getUrl(filename);
} else {
return filename;
}
}
function initAd() {
var video = document.getElementById("video1");
var source = document.createElement('source')
source.setAttribute('type', 'video/webm; codecs=vp9')
source.setAttribute('src', getVideoUrl('video.webm'))
video.appendChild(source);
video.play();
}
window.onload = function() {
var isInitialized = Enabler.isInitialized();
isInitialized ? initAd() : Enabler.addEventListener(studio.events.StudioEvent.INIT, initAd);
}
}());
</script>注
- 動画タグは、HTML5 要素であり、スタジオ イネーブラーの一部ではありません。詳しくは、W3School の <video> タグのリファレンスをご覧ください。
playsinline属性を使用すると、動画は全画面モードではなく、iOS のバナー内で再生されます。ユーザーが快適に利用できるように、この属性を常に含めることをおすすめします。
ステップ 2: CSS を追加して動画のスタイルを設定する
CSS を追加して、動画要素のサイズと位置を設定します。
CSS ファイル内のスタイル設定と ID セレクタの例
#video1 {
position: absolute;
width: 205px;
height: 154px;
}ステップ 3: レポート ID を追加する
動画の指標をトラッキングするには、イネーブラーの動画モジュールを読み込み、レポート ID を追加します。レポート ID を使用すると、キャンペーン レポートでレポート指標を適切な動画と一致させることができ、ライブ広告を見た視聴者による動画の視聴時間を把握できます。
var video1 = document.getElementById('video1');
Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
studio.video.Reporter.attach('video_1', video1);
});