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

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

この記事では、カスタムの 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>

    注: Google 広告での広告のプレビュー時には、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. 重要: プレビュー画像に「再生」ボタンを追加する

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

関連リンク

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

さらにサポートが必要な場合

問題を迅速に解決できるよう、ログインして追加のサポート オプションをご利用ください。