クリエイティブを管理する

キャンペーンマネージャー 360 用に HTML5 ディスプレイアセットを準備する方法

次へ: Google Web Designer からクリエイティブを取得する

このガイドでは、キャンペーンマネージャー 360 にアップロードする HTML5 ディスプレイアセットを準備する方法について説明します。

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 ファイルには代替画像を含めないでください。
.zip ファイルでサポートされているファイル形式と上限
- サポートされているファイル形式: HTML、HTM、JS、CSS、JPG、JPEG、GIF、PNG、JSON、XML、SVG、EOT、OTF、TTF、WOFF、WOFF2
- .zip ごとのファイルの最大数: 100
- 最大サイズ: 10 MB
HTML5 .zip ファイルのサンプル

サンプルの ZIP ファイルをダウンロード

.adz ファイルを使用する

キャンペーンマネージャー 360 は .adz ファイル形式の HTML5 クリエイティブも受け入れます。.adz ファイルは .zip ファイルとまったく同様に使用します。ここでは .adz と .zip のどちらを使用しても違いはありません。
フォルダを .zip ファイルに圧縮します。フォルダの圧縮について不明な点がある場合は、Windows または Apple のヘルプセンターでご確認ください。
これで、入稿担当者がこの .zip ファイルをキャンペーンマネージャー 360 の入稿システムにアップロードできます。

入稿についての詳細:
- キャンペーンマネージャー 360 でクリエイティブを追加する手順
- ディスプレイクリエイティブの設定

アップロードの問題

HTML5 検証ツールを使用して、準備した .zip ファイルがキャンペーンマネージャー 360 に受け入れられるかどうかをチェックしてください。

キャンペーンマネージャー 360 にアップロードする HTML5 ディスプレイクリエイティブを選択できないのはなぜですか？

この問題は、ファイルが .zip 形式または .adz 形式でないことが原因だと考えられます。HTML ファイルとそのファイルから参照するその他のファイルを 1 つの .zip に圧縮し、もう一度お試しください。
.zip ファイルがあると思われる場合は、念のためにファイルの拡張子を確認してください。ファイルを右クリックし、プロパティで拡張子が .zip であることを確認します。
拡張子が正しくてもファイルを選択できない場合は、サポートにお問い合わせください。

キャンペーンマネージャー 360 によってアップロードが拒否されるのはなぜですか？

ファイルをアップロードできない場合: 有効な HTML5 アセットがファイルに含まれていない、ファイル数が 100 個（上限）を超えているなどの問題が考えられます。その他の問題として、HTML5 アセットがローカルストレージまたはセッションストレージの JavaScript API を使用していることも考えられます。キャンペーンマネージャー 360 では、ユーザーのプライバシーを保護するため、それらの API を許可していません。

キャンペーンマネージャー 360 でローカルストレージまたはセッションストレージの JavaScript API を使用できないのはなぜですか？

ユーザーのプライバシーを保護するため、キャンペーンマネージャー 360 はローカルストレージまたはセッションストレージを使用する HTML5 アセットを受け入れません。この理由でアップロードが拒否される場合は、禁止されている API の削除をデベロッパーに依頼してください。その後、もう一度アセットをアップロードしてみてください。具体的には、以下の JavaScript API を使用する HTML5 アセットはアップロードできません。

indexedDB
localStorage
openDatabase
sessionStorage

これらの API が広告目標の達成に影響する場合は、代わりにキャンペーンマネージャー 360 の設定を使ってみてください。たとえば、一部の広告主はこれらの API を広告のターゲティングとフリークエンシーキャップのために使用していますが、そうすうる必要はありません。キャンペーンマネージャー 360 を使用して、さまざまな種類のターゲティングをセットアップし、フリークエンシーキャップを設定できます。回避策の実装については、サポートにお問い合わせください（アセットの設定方法にかかわらず、Google マーケティングプラットフォームとの契約に定められているプライバシー要件を満たすデータの取得のみを試みることができます）。

ローカルストレージとセッションストレージとは何ですか？HTML5 ウェブストレージの 2 つの形式であり、データをブラウザで保存する方法です。ローカルストレージは、ブラウジングセッションに関係なくブラウザでファイルを保存するときに使用されます。ユーザーが手動でブラウザキャッシュの消去やファイルの削除を行わない限り、このストレージのデータは永続的にブラウザ上に残ります。セッションストレージは、特定のブラウジングセッションの間のみブラウザでデータを保存するときに使用されます。ブラウザを閉じて再起動すると、セッション中に保存されたデータはすべて消去されます。

こうした形式のストレージを使用できないのはなぜですか？こうした形式で保管されるファイルでは、コードを組み込むことにより、個人情報（PII）を取得したり、複数のセッション間でブラウザアクティビティをトラッキングしたり、Google マーケティングプラットフォームとの契約条項に違反してその他のデータを第三者に送信したりすることが可能になるためです。こうしたデータ収集だけが、ローカルストレージやセッションストレージの利用目的ではありませんが、ファイルにすべての種類のコードを含めることができるため、データが収集されるおそれがあります。

デベロッパーガイドライン

リソース

IAB の HTML5 ガイドライン

クリエイティブのサイズを設定する方法

サイズのガイドライン

画像や動画とは異なり、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 ドキュメントに挿入されたクリックタグの例を次に示します。

<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 として使用されていることを確認します。

Google Web Designer を exit イベントに使用

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 入稿担当者に送信します。

ドキュメント

<html>
  <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 ファイル

HTML5 ファイルは、URL を動的に変更し、キャンペーンマネージャー 360 の広告サーバーでクリックを記録するために使用されます。

シンプル

クリック発生時にクリックタグを呼び出します。

シンプルな HTML5 ファイル

パラメータを含む例

ボタンがクリックされたときに clickTag を呼び出します。この例はパラメータ（郵便番号など）をリンク先 URL に渡す方法を示しています。

HTML5 file with parameter

# 記号を含む例

キャンペーンマネージャー 360 へのトラッキング呼び出しとボタンのランディングページ URL を別々にコーディングします。シャープ記号（#）を含むリンク先 URL に移動するクリエイティブの場合に必要です。

HTML5 file with a number sign in a click tag URL

複数のクリックタグの例

複数のクリックタグが含まれます。

HTML5 file with multiple click tags

ローダの例

.zip ファイルに 2 つの .zip ファイル（親ファイルと子ファイル）が含まれます。親ファイルは子ファイルを読み込みます。

HTML5 parent and child files

特殊なトラッキングを設定した HTML5 ファイル

リッチメディア以外のクリエイティブでユーザーが行った操作を記録するために使用される HTML5 ファイルのサンプルです。

1x1 トラッキングピクセル

読み込まれたときに、キャンペーンマネージャー 360 の 1 x 1 トラッキングピクセルを呼び出します。

HTML5 file with special tracking