この記事では、HTML5 クリエイティブの Zip バンドルを作成して Google アド マネージャーにアップロードする際のガイドラインについて説明します。
ガイドラインは、HTML5 をサポートするすべてのブラウザで有効です。ただし、一部のクリエイティブは意図したとおりに機能しない可能性があります。HTML5 コードは、実装する前にテストしてください。
このページの内容:
- バンドルが SSL 対応であることを確認する
- ZIP ファイルが適切な構造になっていることを確認する
- Google Web Designer で適切な環境を選択する
- ディメンションを定義する
- クリックタグとリンク先 URL を設定する
バンドルが SSL 対応であることを確認する
HTTPS サイトに配信するには、HTML5 クリエイティブが SSL 対応であることが必要です。
ZIP ファイルが適切な構造になっていることを確認する
アップロード用の HTML5 クリエイティブを準備する際は、ZIP ファイルについて次の点を確認してください。
- 適切な構造である: メインの HTML ファイルと関連付けられたすべてのアセット（画像、スクリプト、CSS）は、ZIP アーカイブのルートレベルまたは明確に参照されるサブフォルダに配置されている必要があります。メインの HTML ファイルを複数のサブディレクトリ内にネストしないでください。
- 破損していない: ZIP ファイルが破損しておらず、適切に圧縮されていることを確認します。アップロードする前に、ファイルをローカルで解凍して、完全な状態であることを確認してください。
- すべてのアセットが含まれている: 参照されるすべてのアセット（画像、CSS、JavaScript ファイル）が ZIP ファイルに含まれている必要があります。アド マネージャーで明示的にサポートされ、ホワイトリストに登録されている場合を除き、基本的なクリエイティブ コンポーネントの外部ホスティングは避けてください。HTML に含まれるすべてのファイルパスが相対パスになっていて、ZIP 構造内のアセットを正しく参照していることを確認してください。
Google Web Designer で適切な環境を選択する
Google Web Designer を使用して HTML5 クリエイティブを作成する場合は、ディスプレイ＆ビデオ 360 の環境を選択してください。
ディメンションを定義する
sizeメタタグを使用して、クリエイティブを表示するサイズを定義します（例:<meta name="ad.size" content="width=[x],height=[y]">）。HTML5 クリエイティブには、固定サイズのみ使用できます（例:300x250、400x400、728x90）。Fluidなどの動的なサイズは使用できません。例
<meta name="ad.size" content="width=300,height=250">- Google Web Designer のバンドルに含まれるクリエイティブ HTML ファイルでは、
creativePropertiesパラメータのminWidthプロパティとminHeightプロパティをゼロ以外の値に設定する必要があります。例
次のコードはエラーになります:"creativeProperties":{"minWidth":0,"minHeight":0,"maxWidth":0,"maxHeight":0}
クリックタグとリンク先 URL を設定する
exit とは、クリックに反応してブラウザをランディング ページに誘導する領域のことです。クリックタグとは、HTML5 クリエイティブに設定されている各 exit のリンク先 URL を定義するものです。
exit でクリックが発生すると、クリエイティブからアド マネージャーに呼び出しが行われ、関連付けられているリンク先 URL が取得されます。
- exit の URL は、ニーズやクリエイティブ タイプに応じて、クリエイティブまたは広告に設定できます。クリエイティブと広告の両方にクリックタグを設定した場合は、広告レベルの設定が優先されます。Google Web Designer を使用して exit を追加する方法など、HTML5 の exit を追加する方法について詳しくは、ヘルプセンターをご覧ください。
アド マネージャーでは、アセットをアップロードするとクリックタグが検出されます。タグを書き出した後でも、クリックタグで使用するリンク先 URL はいつでも変更できます。
- クリックタグは HTML ドキュメントの
<head>に挿入します。例<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
</head>
- クリエイティブのリンク先として
clickTag変数を使用します。例<a href="javascript:void(window.open(clickTag))">
<img src="images/dclk.png" border=0>
</a> - クリックタグは広告サーバーが読み取りやすいものにします。クリックタグを圧縮したり難読化したりしないでください。コードの他の部分や他のファイルは圧縮可能です。
- リンク先 URL はハードコードしないでください。ハードコードすると、アド マネージャーでクリックをトラッキングできず、広告担当者も URL を更新できなくなります。バンドルをアップロードしたとき、ハードコードした URL が HTML5 コードに含まれていると警告が表示されます。