HTML5 を使用するクリエイティブについて
HTML5 クリエイティブには、ディスプレイ クリエイティブまたはリッチメディア クリエイティブの 2 つのタイプがあります。それぞれのタイプについて詳しくは、以下をご覧ください。
ディスプレイ クリエイティブ
ディスプレイ クリエイティブ: リッチメディア以外のクリエイティブで、画像または HTML5 を使用できます。ディスプレイ クリエイティブの特徴は次のとおりです。
- 個別の exit についてクリックタグのレポートを作成できる
- ポライトロードで読み込める
- レスポンシブ HTML5 アセットをサポートしている
リッチメディア クリエイティブ
リッチメディア クリエイティブ: インバナー動画を含める、大きなサイズに拡大する、ゲームなどのインタラクティブな要素を含めるなど、さまざまことが可能な HTML5 クリエイティブです。リッチメディア クリエイティブの特徴は次のとおりです。
- 複数の exit、カウンタ、タイマーに関するレポートを作成して、インタラクションに関するデータを取得できる
- 大きなサイズまたは全画面に拡張できる
- インバナー動画とオーディオをサポートしている
- ポライトロードで読み込める
HTML5 ディスプレイ クリエイティブ アセットを作成してアップロードする
HTML5 を使用するディスプレイ クリエイティブを設定するには、HTML5 クリエイティブを .zip ファイルの形式でキャンペーン マネージャー 360 にアップロードします。.zip には、HTML ファイルを 1 つとその HTML ファイルで参照しているファイルを含めます。
-
フォルダを作成します。
-
HTML ファイルとそのファイルが参照するすべてのアセットをフォルダに追加します。それ以外のファイルは含めないでください。アセットをサブフォルダに分けて整理できますが、サブフォルダは圧縮しないでください。
.zip ファイルに含めるもの含めるファイル
-
HTML ファイル: HTML5 ディスプレイ クリエイティブのメインアセットは HTML ファイルです。このファイルによってクリエイティブが表示されます。HTML ファイルは、1 つ以上のクリックタグを含み、iframe に読み込まれる完全な HTML ドキュメントでなければなりません。iframe はアセットとともにキャンペーン マネージャー 360 によって配信されます。クリックタグについては、下記をご覧ください。
-
その他のファイル: 上記の HTML ファイルが参照する他のファイルを含めます。参照されていないファイルは含めないでください。
含めてはならないもの
-
.zip 内に .zip は含めない: HTML5 .zip ファイルの中には .zip ファイルを含めないでください。ただし、複数の別個の HTML5 クリエイティブに対してそれぞれ別個の HTML5 .zip ファイルがある場合は、これらのファイルを 1 つの .zip にまとめてキャンペーン マネージャー 360 に一括アップロードできます。
-
参照されていないファイルは含めない: 前述のとおり、HTML ファイルから参照しているファイルだけを含めてください。
-
ローカル ストレージとセッション ストレージは含めない: キャンペーン マネージャー 360 は、ローカル ストレージまたはセッション ストレージを使用する HTML5 アセットを受け入れません。
-
名前に % を使用しない: アセット内のファイルにはパーセント記号(%)を使用しないでください。
-
代替アセットは含めない
-
(省略可)入稿担当者は、代替画像をキャンペーン マネージャー 360 に別途アップロードできます。メインのアセットがサポートされていないためにキャンペーン マネージャー 360 で使用できない場合は、代替画像が使用されます。HTML5 .zip ファイルには代替画像を含めないでください。
-
-
サポートされているファイル形式: HTML、HTM、JS、CSS、JPG、JPEG、GIF、PNG、JSON、XML、SVG、EOT、OTF、TTF、WOFF、WOFF2
-
.zip ごとのファイルの最大数: 100
-
最大サイズ: 10 MB
キャンペーン マネージャー 360 は .adz ファイル形式の HTML5 クリエイティブも受け入れます。.adz ファイルは .zip ファイルとまったく同様に使用します。ここでは .adz と .zip のどちらを使用しても違いはありません。
-
-
フォルダを .zip ファイルに圧縮します。フォルダの圧縮について不明な点がある場合は、Windows または Apple のヘルプセンターでご確認ください。
-
これで、入稿担当者がこの .zip ファイルをキャンペーン マネージャー 360 の入稿システムにアップロードできます。
入稿についての詳細:
アップロードの問題
-
この問題は、ファイルが .zip 形式または .adz 形式でないことが原因だと考えられます。HTML ファイルとそのファイルから参照するその他のファイルを 1 つの .zip に圧縮し、もう一度お試しください。
-
.zip ファイルがあると思われる場合は、念のためにファイルの拡張子を確認してください。ファイルを右クリックし、プロパティで拡張子が
.zip
であることを確認します。 -
拡張子が正しくてもファイルを選択できない場合は、サポートにお問い合わせください。
ファイルをアップロードできない場合: 有効な HTML5 アセットがファイルに含まれていない、ファイル数が 100 個(上限)を超えているなどの問題が考えられます。その他の問題として、HTML5 アセットがローカル ストレージまたはセッション ストレージの JavaScript API を使用していることも考えられます。キャンペーン マネージャー 360 では、ユーザーのプライバシーを保護するため、それらの API を許可していません。
ユーザーのプライバシーを保護するため、キャンペーン マネージャー 360 はローカル ストレージまたはセッション ストレージを使用する HTML5 アセットを受け入れません。この理由でアップロードが拒否される場合は、禁止されている API の削除をデベロッパーに依頼してください。その後、もう一度アセットをアップロードしてみてください。具体的には、以下の JavaScript API を使用する HTML5 アセットはアップロードできません。
- indexedDB
- localStorage
- openDatabase
- sessionStorage
これらの API が広告目標の達成に影響する場合は、代わりにキャンペーン マネージャー 360 の設定を使ってみてください。たとえば、一部の広告主はこれらの API を広告のターゲティングとフリークエンシー キャップのために使用していますが、そうすうる必要はありません。キャンペーン マネージャー 360 を使用して、さまざまな種類のターゲティングをセットアップし、フリークエンシー キャップを設定できます。回避策の実装については、サポートにお問い合わせください(アセットの設定方法にかかわらず、Google マーケティング プラットフォームとの契約に定められているプライバシー要件を満たすデータの取得のみを試みることができます)。
ローカル ストレージとセッション ストレージとは何ですか?HTML5 ウェブ ストレージの 2 つの形式であり、データをブラウザで保存する方法です。ローカル ストレージは、ブラウジング セッションに関係なくブラウザでファイルを保存するときに使用されます。ユーザーが手動でブラウザ キャッシュの消去やファイルの削除を行わない限り、このストレージのデータは永続的にブラウザ上に残ります。セッション ストレージは、特定のブラウジング セッションの間のみブラウザでデータを保存するときに使用されます。ブラウザを閉じて再起動すると、セッション中に保存されたデータはすべて消去されます。
こうした形式のストレージを使用できないのはなぜですか?こうした形式で保管されるファイルでは、コードを組み込むことにより、個人情報(PII)を取得したり、複数のセッション間でブラウザ アクティビティをトラッキングしたり、Google マーケティング プラットフォームとの契約条項に違反してその他のデータを第三者に送信したりすることが可能になるためです。こうしたデータ収集だけが、ローカル ストレージやセッション ストレージの利用目的ではありませんが、ファイルにすべての種類のコードを含めることができるため、データが収集されるおそれがあります。
デベロッパー ガイドライン
リソース
クリエイティブのサイズを設定する方法
サイズのガイドライン画像や動画とは異なり、HTML ドキュメントそのものにはサイズはありません。そのため、サイズメタタグを使用して、クリエイティブの意図するサイズを指定します。サイズメタタグは HTML ドキュメントのパラメータです。クリエイティブが正しいサイズで表示されるようにするため、この方法を使用することをおすすめします。次のようにサイズを入力できます。
meta name="ad.size" content="width=300,height=250"
>クリックタグ
クリックタグでは、HTML5 アセットを使用するクリエイティブの各 exit に対するランディング ページを定義します。exit は、クリックされたときにブラウザをランディング ページに誘導できる領域です。各クリックタグでは、各種 exit のランディング ページを定義します。
exit がクリックされると、クリエイティブはキャンペーン マネージャー 360 に対しその exit に関連付けられたランディング ページを求めます。このランディング ページは、必要に応じて、クリエイティブまたは広告に設定できます。
キャンペーン マネージャー 360 では、アセットのアップロード時にクリックタグが検出されます。タグのエクスポート後も、クリックタグで使用するランディング ページはいつでも変更できます。これは、クリックタグは標準の変数であり、ハードコーディングされた値ではなくランディング ページのプレースホルダとして使用できるためです。
クリックタグを設定する際のおすすめの方法を紹介します。ディスプレイ クリエイティブでは、広告レベルの設定がクリエイティブ レベルの設定より優先されます。
- クリックのリンク先として、クリエイティブでクリックタグ変数を必ず使用するようにします。
- クリックタグは、広告サーバーにとって読み取りやすいものにする必要があります。縮小化や難読化は行わないでください(コードの他の部分や他のファイルでは縮小化できます)。
- アセットに URL をハードコーディングする方法はおすすめしません。キャンペーン マネージャー 360 はクリックをトラッキングできなくなり、入稿担当者は URL を更新できなくなります。アセット内に URL がハードコーディングされていると、アップロード後にキャンペーン マネージャー 360 で警告が表示されます。
HTML ドキュメントに挿入されたクリックタグの例を次に示します。
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[ここにクリエイティブ コードの残りの部分を挿入] </html>
クリエイティブで、クリックタグ変数がランディング ページ URL として使用されていることを確認します。
<img src="images/dclk.png" border=0>
</a>
Google Web Designer のタップ領域コンポーネントはキャンペーン マネージャー 360 と完全な互換性があります。カスタムコードは必要ありません。
タップ領域を使用してクリックタグを追加するには:
- 広告に、行動を促すフレーズが含まれていることを確認します。行動を促すフレーズは、ユーザーがクリックまたはタップできるボタンや、はっきりとした視覚的な要素である必要があります。
- [タップ領域] コンポーネントを、[コンポーネント] パネルの [操作] フォルダからステージにドラッグして行動を促すフレーズに重ねて配置します。
- [イベント] パネルで。新しいイベントボタン をクリックします。
- イベント ダイアログで、以下の設定を選択します。
ターゲット タップ領域コンポーネント( gwd-taparea_1
)イベント [タップ領域] > [タップ / クリック] 操作 [Google 広告] > [広告を終了]
注: 同様の操作である [広告を終了(URL を上書き)] では、スタジオやキャンペーン マネージャー 360 内など、クリエイティブ外の URL は変更できません。ダイナミック広告でのみ使用します。
レシーバー gwd-ad
設定 - 指標 ID - レポートをわかりやすくするためのラベル(「CTA」など)。
- URL - exit URL。
- 終了時に元に戻す - エキスパンド広告の場合、この設定をオンにすると、ユーザーが広告を閉じたときに広告が折りたたまれます。
- 終了時にメディアを一時停止 - オンにすると、ユーザーが広告を閉じたときに動画や音声の再生が停止します。
- 終了時に折りたたまれたページ - エキスパンド広告の場合に、ユーザーが広告を閉じたときに表示するページ。
サンプル ファイル
HTML ドキュメントのサンプルHTML5 クリエイティブの HTML ドキュメント全体のサンプルは次のとおりです。クリックタグとサイズメタタグは太字で示されています。
このクリエイティブはシンプルな例で、他に必要なアセットはありません。これを HTML5 クリエイティブとして使用する場合は、zip ファイルまたは .adz ファイルのいずれかに圧縮して、キャンペーン マネージャー 360 入稿担当者に送信します。
ドキュメント
<head>
<title>サンプル HTML ページ</title>
<meta name="ad.size" content="width=300,height=250">
<style>
html, body {background-color: blue;}
p { color:white; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var clickTag = "http://www.google.org";
function resizeWindow()
{
$('p').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var WinHeight = $(window).height();
var w = WinHeight/2;
var m = w - h;
var WinWidth=$(window).width();
$('p').css("margin-top",m + "px");
$("p").text("Size="+WinWidth+"x"+WinHeight);
}
$(document).ready(function () {
resizeWindow();
});
$(window).resize(function () {
resizeWindow();
});
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)"><p>ページを読み込み中...</p></a> </body> </html>
HTML5 ファイルは、URL を動的に変更し、キャンペーン マネージャー 360 の広告サーバーでクリックを記録するために使用されます。
シンプル
クリック発生時にクリックタグを呼び出します。
パラメータを含む例
ボタンがクリックされたときに clickTag
を呼び出します。この例はパラメータ(郵便番号など)をリンク先 URL に渡す方法を示しています。
# 記号を含む例
キャンペーン マネージャー 360 へのトラッキング呼び出しとボタンのランディング ページ URL を別々にコーディングします。シャープ記号(#
)を含むリンク先 URL に移動するクリエイティブの場合に必要です。
HTML5 file with a number sign in a click tag URL
複数のクリックタグの例
複数のクリックタグが含まれます。
HTML5 file with multiple click tags
ローダの例
.zip ファイルに 2 つの .zip ファイル(親ファイルと子ファイル)が含まれます。親ファイルは子ファイルを読み込みます。
リッチメディア以外のクリエイティブでユーザーが行った操作を記録するために使用される HTML5 ファイルのサンプルです。
1x1 トラッキング ピクセル
読み込まれたときに、キャンペーン マネージャー 360 の 1 x 1 トラッキング ピクセルを呼び出します。