HTML5 クリエイティブは、JavaScript、HTML、CSS で作成され、ウェブページやモバイルアプリに配信される広告で、ディスプレイとリッチメディアの 2 つがあります。
- ディスプレイ - クリックして広告主のウェブサイトに移動するイメージ広告
- リッチメディア – アニメーション、画像ギャラリー、ゲーム、埋め込み動画などのインタラクティブな要素を含む広告
ディスプレイ＆ビデオ 360 では、ディスプレイ バナーとリッチメディア バナーを直接アップロードできます。ただし、エキスパンドやインタースティシャル フォーマットなど、高度なリッチメディア機能付きのクリエイティブの場合は、スタジオをご使用ください。スタジオのクリエイティブは、キャンペーン マネージャー 360 で入稿して、ディスプレイ＆ビデオ 360 アカウントに同期できます。
HTML5 クリエイティブは、ディスプレイ広告申込情報に割り当てることができます。
サポートされている HTML5 クリエイティブ タイプ
ディスプレイ＆ビデオ 360 では、次の HTML5 広告フォーマットがサポートされています。リッチメディア ギャラリーで、各クリエイティブ タイプの例をご覧いただけます。
ディスプレイ
ウェブページやモバイルアプリの固定位置に 1 つ以上の固定サイズで表示される HTML5 クリエイティブです。
サポートされるディスプレイ機能:
- クリックタグ - クリックタグは、広告主のランディング ページを開いたクリックの測定に使用されるコードです。
- レスポンシブ クリエイティブ – 同じディスプレイ バナーの複数のサイズを 1 つのレスポンシブ クリエイティブとしてパッケージ化し、クリエイティブの割り当てを効率化できます。
リッチメディア
リッチメディアとは、デジタル広告配信において高度な機能を含む広告、たとえば動画やオーディオといったユーザーを引きつける広告を指す用語です。リッチメディア広告で、リッチ操作を記録するための指標が増え、ユーザーによる広告へのエンゲージメントを明確に把握できるようになりました。たとえば、リッチメディア広告で、ユーザーが広告でゲームをプレイした回数や時間を示すカウンタやタイマーを使用できます。
サポートされるリッチメディア機能とフォーマット:
- リッチメディア指標 – リッチメディア指標を使用して、クリック、離脱、インタラクション、動画の再生時間などをカウントできます。
- インバナー動画 – 動画プレーヤーを組み込んだ広告。動画は、データドリブン クリエイティブ以外のすべてのリッチメディア フォーマットに含めることができます。
- フルスクリーン エキスパンド - モバイル デバイスの画面全体にエキスパンドして表示される広告です（例: 3D Swirl クリエイティブ）。
- データドリブン クリエイティブ - データドリブン クリエイティブを使用すると、さまざまなユーザー セグメントに合わせてメッセージをカスタマイズできます。
- パララックス クリエイティブ – パララックスは、リッチメディア クリエイティブで使用できるアニメーション効果で、画像を複数の層に重ねた奥行きのある視覚効果を生み出すことができます。モバイル デバイスでページを上下にスクロールすると、前景画像と背景画像が異なる速さで動きます。
HTML5 クリエイティブを作成する
HTML5 ディスプレイ バナーを作成する
Google Web Designer
HTML5 エディタ
独自のコードを記述する場合は、任意の HTML5 エディタを使用してバナーを作成できます。
（上級ユーザー向け）HTML5 バナーを最初から作成する
- 有効な HTML ファイル（
<html>、<head>、<title>、<body>タグを含んでいる）を作成します。 <meta>タグを追加して、想定しているクリエイティブのサイズを指定します。
<meta name="ad.size" content="width=[x],height=[y]">- クリックタグを追加します。
-
次のスクリプトタグを追加し、「
https://www.google.com」を広告主のランディング ページに置き換えます。<script type="text/javascript">
var clickTag = "https://www.google.com";
</script> - メイン画像または広告コンテナの
<div>タグを<a>タグで囲み、クリックできるようにします。<a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a>
-
リッチメディア バナーを作成する
リッチメディア バナーには、Studio のイネーブラーが必要です。たとえば次のような操作が可能です。
Enabler.getUrl()を使って、動画と画像を安全に読み込みます。Enabler.exit()を使って広告主のランディング ページを開きます。リッチメディア バナーのクリックタグの代わりに exit を使用します。
クリエイティブの不承認が原因で広告の配信が遅延するのを避けるため、クリエイティブを作成する際には、リッチメディアのガイドラインをご確認ください。
HTML5 .zip ファイルの内容
HTML5 .zip ファイルには、最大 100 個のファイルを含めることができ、サイズに制限はありません。ただし、パブリッシャーの要件を満たすには、.zip ファイルはできるだけ小さくするようにしてください。
.zip ファイルに名前を付ける
HTML5 .zip ファイルに、半角 50 文字（「.zip」を含む）未満の名前を付けます。ファイル名がこれより長い場合、ファイルをアップロードできません。
サポートされているファイル形式
- HTML、テキスト: HTML、HTM、CSS、JS
- 画像: JPG、JPEG、GIF、PNG、SVG
- フォント: DFONT、EOT、OTF、TTE、TTF、WOFF、WOFF2
HTML5 .zip ファイルに含める要素
- HTML ファイル: HTML5 クリエイティブのメインアセットは HTML ファイルです。ファイルは 1 つ以上の exit かクリックタグを含み、iframe に読み込むことができるようにする必要があります。ディスプレイ＆ビデオ 360 ではアセットが iframe で配信されます。
- その他のファイル: HTML ファイルで使用される画像、CSS、JavaScript ファイル。リッチメディア クリエイティブは次のファイル形式もサポートされますが、動画は外部サーバーでホストし、クリエイティブはスタジオで作成する必要があります。
.avi、.mov、.mp4、.m4v、.mpeg、.mpg、.oga、ogg、.ogv、.webm、.wmv
HTML5 .zip ファイルに含めてはならない要素
- 他の .zip ファイル: HTML5 .zip ファイル内に他の .zip ファイルを追加しないでください。
- 使われていないファイル: HTML ファイルで使用されているファイルのみを追加します。ソースファイルまたはオーサリング ファイルを追加しないでください。
- ローカルまたはセッション ストレージ: ディスプレイ＆ビデオ 360 では、ローカル ストレージまたはセッション ストレージを使用する HTML5 アセットは使用できません。
- 代替画像: HTML5 .zip ファイルに代替画像を含めないでください。代替画像は、[代替画像] セクションで個別にアップロードします。
- 長い名前のファイル: 動画とオーディオのファイル名は 50 文字以内で指定する必要があります。他のファイル名は半角 200 文字以内にする必要があります。日本語、中国語、韓国語などでは全角文字が使用されます。これらの言語では、上限はそれぞれ 25 文字と 100 文字になります。
（省略可）代替画像
代替画像は省略可能で、クリエイティブ アセットが閲覧ユーザーのブラウザやプラットフォームでサポートされていない場合にのみ配信されます。たとえば、ユーザーが Internet Explorer 8 でブラウジングしていて、クリエイティブは CSS アニメーションを使用している場合などに配信されます。
代替画像は、クリエイティブの .zip ファイルとは別にアップロードします。アップロードしない場合は、システムで生成された空白の画像が配信されます。
HTML5 クリエイティブをアップロードする
最初に、クリエイティブ アセットを .zip ファイルにパッケージ化します。HTML5 zip ファイルに含める要素について
-
広告主の画面を開き、左のメニューの [クリエイティブ] をクリックします。
-
[新規]、[アップロード]、[HTML5 または画像] をクリックします。
-
ディスプレイ＆ビデオ 360 で使用するクリエイティブの名前を入力します。
-
クリエイティブ ファイルを追加するには、パソコンに保存されている .zip ファイルを [ファイルをここにドロップ] にドロップします。または、[アップロード] をクリックして、.zip ファイルを選択します。
HTML5 のアップロードが拒否された場合は、こちらの解決方法をお試しください。 -
クリエイティブの配信サイズを 1 つ以上選択します。ディスプレイ＆ビデオ 360 では、1 つのサイズを指定したクリエイティブか、複数のサイズに対応したレスポンシブ HTML5 クリエイティブを使用できます。
-
[イベント] セクションで、クリエイティブ内で見つかった exit を確認、編集します。それぞれの exit（クリックタグ）について、
http://またはhttps://で始まるランディング ページ URL を編集できます。レポートラベルまたは URL を編集するには、該当の行にカーソルを合わせて、編集をクリックします。
注: クリエイティブを保存した後、プレビューまたは同期したキャンペーン マネージャー 360 広告主の画面に更新後のランディング ページが表示されるまでには、数分かかる場合があります。 -
クリエイティブを保存します。
ディスプレイ＆ビデオ 360 ではクリエイティブが自動システムと担当者により審査され、適切に表示されるかどうかと、Google の広告ポリシーおよび配信可能なエクスチェンジのポリシーを遵守しているかどうかが確認されます。クリエイティブのステータスを確認するには、[クリエイティブのステータス] タブに移動します。
詳細設定
次の設定は省略可能です。
-
インタースティシャル広告がモバイルの画面に合わない場合は、ディスプレイ＆ビデオ 360 でサイズに合わせて拡大縮小されます。拡大縮小をしないようにするには、[デバイスの幅に合わせて拡大縮小しない] をオンにします。
-
代替画像とレポートラベルを追加します。レスポンシブ クリエイティブをアップロードする場合は、代替画像をサイズごとに 1 つアップロードできます。
-
ポライトロード画像をアップロードします。この画像は、メインのクリエイティブ ファイルの読み込みが遅い場合やネットワーク接続速度が遅い場合に表示されます。
- ディスプレイ＆ビデオ 360 広告主がキャンペーン マネージャー 360 アカウントにリンクされている場合は、トラッキング広告を追加して、リンクされたキャンペーン マネージャー 360 広告主のレポートを取得します。注: このオプションは、リッチメディア クリエイティブ、Swirl クリエイティブ、カスタムのデータドリブン クリエイティブでのみ使用できます。
- [配信プロパティ] をクリックします。
- キャンペーン マネージャー 360 の既存のトラッキング広告を検索します。同期にはしばらく時間がかかるため、ディスプレイ＆ビデオ 360 でクリエイティブを作成する前に、キャンペーン マネージャー 360 でトラッキング広告を作成しておく必要があります。
ヒント: 適切なトラッキング広告を見つけやすいように、キャンペーン マネージャー 360 では広告とプレースメントごとにトラッキング広告を 1 つのみ割り当てるようにしてください。
-
[その他の詳細情報] をクリックして、トラッキング タグ、統合コード、メモを追加します。
プレビューを共有する
プレビュー リンクを使用すると、HTML5 クリエイティブを共有して他のユーザーが確認や承認を行えるようにできます。リンクを受け取ったユーザーは誰でもクリエイティブを閲覧でき、ログインは不要です。
よくある質問
ファイルをアップロードした後、クリエイティブのサイズが正しく表示されないのはなぜですか？次のような一般的な問題によって、クリエイティブ アセットをアップロードできなくなることがあります。
- ファイル名が長すぎる: ほとんどのファイル形式で、最大文字数は半角 200 文字（全角 100 文字）です。オーディオ ファイルと動画ファイルでは、最大文字数は半角 50 文字（全角 25 文字）です。
- zip 内に zip が含まれている: 圧縮した zip ファイルを別の zip ファイル内に含めることはできません。
- クリエイティブにクリックリンクがない: すべてのクリエイティブは、広告主のランディング ページに移動する exit を少なくとも 1 つ含んでいる必要があります。
- Google Web Designer のクリエイティブのアップデートが必要: Google Web Designer で作成したクリエイティブの場合は、「Google Web Designer の HTML に指定されているメタデータが無効です」というエラーが表示されることがあります。これは、クリエイティブが古いバージョンの Web Designer で作成されていて、更新が必要であることを意味します。この場合は、最新バージョンの Web Designer にアップグレードしてから、問題のクリエイティブを開いて再公開してください。
詳しくは、クリエイティブのアップロードに関するトラブルシューティングをご覧ください。
