カスタム HTML を使用して Gmail 広告を作成する

カスタム HTML を使用すると、Gmail 広告の既存のテンプレートとは異なる広告を作成できるようになり、上級レベルの広告主様向けです。こうした広告には、動画や複数の行動を促すフレーズを追加できます。レイアウトを独自にカスタマイズした Gmail 広告を作成するには、カスタム HTML ファイルを AdWords にアップロードします。

この記事では、カスタムの Gmail 広告を設定、アップロードする方法について説明します。

始める前に

重要: カスタム HTML を使用したGmail 広告では、リンク先 URL の形式が維持されるため、最終ページ URL とトラッキング テンプレートを利用できません。詳しくは、改良版 URL 管理システムについてをご覧ください。

 

ほぼすべてのお客様は、新しい Google 広告でのみアカウントを管理できます。Google 広告(AdWords)の従来版をご使用の場合は、下記で [従来版] をご選択ください。詳細

手順

Gmail カスタム HTML 広告では、折りたたみ広告とエキスパンド広告のすべてのファイルを ZIP フォルダに保存します。問題を回避できるように、以下で詳述する形式に関する厳格な仕様には細心の注意を払ってください。

広告の全体的なサイズ制限は次のとおりです。

  • ZIP フォルダの容量: 1.25 MB 未満
  • ファイル数: 100 個未満
  • ファイルサイズ: 500 KB 未満

折りたたみ広告を作成する方法

折りたたみ広告の場合は、ZIP フォルダに次の 2 つのファイルを追加します。

  • ロゴ画像(ファイル名は「logo.png」、「logo.jpg」、または「logo.gif」)
  • テキスト ファイル(ファイル名は「teaser.txt」)

ロゴ画像の仕様

ファイル名は必ず「logo.png」、「logo.jpg」、「logo.gif」のいずれか、ファイル形式は PNG、JPG、GIF のいずれかでなければなりません。

  • ロゴ画像サイズ: 144×144 ピクセル未満
  • ファイルサイズ: 500 KB 未満
  • ファイル形式: PNG、JPG、または GIF(アニメーションなし)

ロゴ画像には、小さいアイコン、グラフィック、またはブランドロゴを使用します。

この画像は、標準解像度の端末では 50×50 ピクセルの四角形として表示されますが、一部の端末では 144×144 ピクセルのサイズまで鮮明に表示できます。

テキスト ファイルの仕様

ファイル名は必ず「teaser.txt」、ファイル形式は TXT でなければなりません。正しい形式のテキスト ファイルの例を次に示します。

Advertiser: Business Name
Subject: Everything 20% Off at Business Name
Description: Buy new products at low prices!
Display Url: www.example.com
Landing Page: https://www.example.com/sale 

注: 上記の例に正確に従ってください。カテゴリ(「広告主」など)と広告主様固有の情報の両方を必ず含めてください。文字数制限と追加すべき要素の詳細を下の表にまとめます。

  文字数制限 追加すべき要素
Advertiser 半角 20 文字 広告主様の会社の名前またはドメイン。
Subject 半角 25 文字 見出しには、特典や割引率、お得な情報などを含めることが可能です。
Description 半角 100 文字 説明は、簡単な概要でも行動を促すフレーズでもかまいません。
Display URL 半角 32 文字 広告に表示される URL。
Landing page 制限なし ティーザー広告のリダイレクト URL: ユーザーが「送信者が表示された短縮 URL」をクリックしてエキスパンド広告を開いたときに、リンク先 URL として使用されます。このフィールドで静的なクリック トラッキング URL を指定することも可能です。このページは、表示 URL をクリックしたユーザーに表示されます。

 

エキスパンド広告を作成する方法

エキスパンド広告の場合は、ZIP フォルダに次の HTML ファイルと画像フォルダを 1 つずつ追加します。

  • エキスパンド広告の画像ファイルを含む画像フォルダ(フォルダ名は「Images」)
  • HTML ファイル(ファイル名は必ず「index.html」)

画像フォルダの仕様

  • 広告には画像を少なくとも 1 つ含める必要があり、最大で 100 個まで追加できます。エキスパンド広告に動画を埋め込むには、下の動画セクションをご覧ください。
  • 画像あたりの横幅の上限: 650 ピクセル
  • 画像あたりの高さの上限: 1,000 ピクセル(注: 広告の効果を最大限に高められるように、広告用の表示領域全体(テキストや画像も含めた状態)で 650 ピクセル以下にすることをおすすめします)。

HTML ファイルの仕様

技術情報

  • URL: 絶対 URL が 1 つ以上含まれており(URL の最大数は 15)、すべての特殊文字がエンコードされていること(スペース、# など)
  • 形式: 標準の HTML 表を使用してレイアウトを制御することで、端末の種類を問わず同じように表示できる
  • トラッキング: 外部クリックのトラッキングには静的なトラッキング URL を使用可能(インプレッション トラッキング ピクセルや動的トラッキング URL は使用不可)。「Gmail カスタム HTML 広告」のテンプレートを使用している場合は、使用したいトラッキング URL を「index.html」と「teaser.txt」のファイルに必ず追加すること
  • マークアップ: HTML(UTF8 エンコードを使用)と一部の HTML5 タグ(「ARTICLE」、「ASIDE」、「FIGCAPTION」、「FIGURE」、「FOOTER」、「HEADER」、「MARK」、「SECTION」、「TIME」、「WBR」)と一部の CSS(タグのスタイル属性のみ、例: <div style="color: black" >)をサポート

使用できないマークアップ

  • JavaScript: <script> タグは広告から自動的に削除される
  • スタイルシート: <link> タグは広告から自動的に削除される
  • Flash
  • HTML5: 「ARTICLE」、「ASIDE」、「FIGCAPTION」、「FIGURE」、「FOOTER」、「HEADER」、「MARK」、「SECTION」、「TIME」、「WBR」タグのみサポートされる
  • 音声
  • iFrame
  • アニメーション画像: GIF

サポートされている CSS

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin Pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

エキスパンド広告用の HTML ファイルに動画を追加する

  1. 動画を追加する方法

    プレビュー ウィンドウを使用して、広告に YouTube 動画を埋め込むことができます。ユーザーが動画の画像をクリックすると、その動画が Gmail 内のライトボックスで再生されます。動画を視聴し終わったユーザーには、Gmail のエキスパンド広告が表示されます。モバイルの場合は、ユーザーが指定した動画プレーヤー(YouTube アプリやブラウザなど)で動画が再生されます。

    指示: YouTube から動画を追加するには、広告に合うように YouTube リンクや画像ソース、表示テキストのコーディングを行います。次に例を示します。

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Gmail Video"></a>

    注: AdWords での広告のプレビュー時には、YouTube 動画はライトボックスに表示(再生)されません。

  2. 新しいタブで動画を追加する方法

    ライトボックスではなく、新しいタブを開き YouTube で動画を再生する場合は、「class」に「nonplayable」を設定してください。

    次に例を示します。

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Gmail Video"></a>

  3. 重要: プレビュー画像に「再生」ボタンを追加する

    画像をクリックすると動画が再生されることをユーザーに示す場合は、プレビュー画像になんらかの再生ボタンを追加する必要があります。動画であることを示す要素がプレビュー画像に自動的に挿入されることはありません。

  4. 埋め込み動画から広告オーバーレイを削除する方法

    ホスト YouTube アカウントでは、動画上の広告を無効にすることができます。詳細

エキスパンド広告用の HTML ファイルに埋め込みのフォームを追加する

注: この機能はホワイトリストに登録されたクライアントにのみご利用いただけます。

Gmail 広告に HTML フォームを追加すると、コンバージョンまでのステップ数が減少します。HTML とサポート対象の CSS を使ってフォームを作成します。その際には下記のリストの許可されたフォーム フィールドだけを使うようにしてください。

プライバシーに関する問題

広告にフォームが埋め込まれている場合は、必ずプライバシー ポリシーへのリンクを含め、AdWords の不当なデータの収集および使用に関するポリシーを遵守する必要があります。

フォームに入力された情報はすべて GET または POST メソッドを介して広告主の皆様に直接渡されます。Google のサーバーに渡されることも保存されることも一切ありません。また、データ処理はお客様の責任のもとで行っていただくようお願いいたします。

カスタム HTML 広告でフォームを作成する際、特にウェブサイトの外に情報を送るフォームの場合は、ユーザーが情報の入力を躊躇する(希望しない)可能性がありますのでご留意ください。

HTML フォームの作成にあたっては、以下に該当しないか事前にご確認ください。

  • 入力を求める情報として、ユーザーに関連する商品やサービスを提供するうえで必要のない情報が含まれているか。
  • 入力を求める情報は、間違った使い方をするとユーザーに害を与える可能性があるか。

上記のいずれか一方でも該当する場合は、広告に HTML フォームを含めないようにしてください。

ステップ 1: フォームを作成する

Gmail 広告で使う HTML フォームでは、次のフィールドの使用が許可されています。

基本情報 許可されているフォーム フィールド
カテゴリ 名前(姓名)
住所
市区町村
都道府県
郵便番号
メールアドレス
電話番号
年齢
13~18 歳
18~24 歳
25~34 歳
35~44 歳
45~54 歳
55~64 歳
65 歳以上
性別
ご連絡に適した時間
関心のあるプログラムやサービス
教育 卒業年
最終学歴
求人 ご希望の勤務地
職種
金融 / 保険
ローン額の範囲:
0~1,499,900 円
1,500,000~2,499,900 円
2,500,000~3,999,900 円
4,000,000~5,999,900 円
6,000,000~7,499,900 円
7,500,000~9,999,900 円
10,000,000 円以上
ローン額(金額の範囲)
通貨
融資の種類(ローン、住宅ローン、クレジット カード)
世帯収入(金額の範囲)
資産額(金額の範囲)
生命保険の保障額(金額の範囲)
軍隊経験
所有か賃貸か(車や家など)
金融機関からの信用度
非常に低い
低い
普通
高い
非常に高い
自宅の資産価値(金額の範囲)
自動車 車種、モデル
旅行 出発地、目的地
出発日、帰着日
企業間取引 会社
職務
役職
社員数
1~10 人
10~50 人
50~100 人
100~500 人
500 人超

ステップ 2: フォームの入力チェックを追加する

ユーザーが無効な情報を入力しないように、次のフォームの入力チェックを追加できます。

空のフィールド フィールドが空白でないことを確認するには、input に「required」を追加します。 <input required type="text" size="25">
電話番号の入力* 有効な電話番号形式であることを確認するには、属性 x-autocompletetype="phone-full" を追加します。10 桁の電話番号を入力できます。 <input type="text" x-autocompletetype="phone-full" size="25">
メールアドレスの入力* 有効なメール形式であることを確認するには、属性 x-autocompletetype="email" を追加します。xxx@xxx.xxx 形式の文字列を入力できます。 <input type="text" x-autocompletetype="email" size="25">
郵便番号の入力* 有効な郵便番号形式であることを確認するには、属性 x-autocompletetype="postal-code" を追加します。5 桁で始まる文字列を入力できます。 <input type="text" x-autocompletetype="postal-code" size="25">

*「必須」として設定されていないフィールドでは、値が含まれているかどうかのみ検証されます。

関連リンク

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。