使用自訂 HTML 製作 Gmail 廣告

自訂 HTML 適合進階的廣告客戶使用,可用以製作與現有 Gmail 廣告範本不同的廣告,當中可加入影片和多個呼籲字句。如要使用您自訂的版面配置製作 Gmail 廣告,請將自訂 HTML 檔案上載到 Google Ads。

本文會說明如何設定和上載自訂 Gmail 廣告。

開始之前

重要提示:請緊記,自訂 HTML Gmail 廣告沿用連結網址格式,與最終到達網址和追蹤範本並不兼容。進一步瞭解「升級版網址」。

 

全新 Google Ads 體驗現已成為大部分用戶管理帳戶的專有途徑。如果您仍在使用舊版 Google Ads 體驗,請在下方選擇 [舊版]。瞭解詳情

指示

自訂 HTML Gmail 廣告是一個 ZIP 資料夾,包含廣告在收合和展開狀態下的所有檔案。為免發生問題,請務必遵守下列嚴格限定的格式規格。

廣告的整體大小限制如下:

  • 整個 ZIP 資料夾:小於 1.25 MB
  • 檔案數目:少於 100 個檔案
  • 檔案大小:小於 500KB

如何製作收合狀態的廣告

收合狀態的廣告包含 2 個檔案,需要加入 ZIP 資料夾:

  • 標誌圖像 (名稱為「logo.png」、「logo.jpg」或「logo.gif」)
  • 文字檔案 (名稱為「teaser.txt」)

標誌圖像規格

檔案名稱必須為「logo.png」、「logo.jpg」或「logo.gif」,而檔案格式必須為 PNG、JPG 或 GIF。

  • 標誌圖像尺寸:小於 144 x 144
  • 檔案大小:小於 500KB
  • 檔案格式:PNG、JPG 或 GIF (非動畫)

標誌圖像為小圖示、圖像或品牌標誌。

圖像在一般解像度的裝置上將會顯示為 50 x 50 像素的正方形,但我們也接受在部分螢幕上以較清晰的最高 144 x 144 像素顯示。

文字檔案規格

檔案名稱必須為「teaser.txt」,而檔案格式必須為 TXT。以下為格式正確的文字檔案範例。

廣告客戶:商家名稱
主題:在商家名稱購物全線 8 折
描述:以至抵價購買新產品!
顯示網址:www.example.com
到達網頁:https://www.example.com/sale 

注意:請嚴格遵守範例的格式,並務必加入類別 (例如:「廣告客戶」) 和您的特定資料。下表列出字元限制和所需包含內容的詳細指引。

  字元限制 包含內容
廣告客戶 20 您公司的名稱或網域。
主旨 25 個 主旨可以包含優惠、折扣或引人注目的消息。
廣告描述 100 個 廣告描述可以是簡短摘要或呼籲字句。
顯示網址 32 個 在廣告中顯示的網址
到達網頁 沒有限制 宣傳短句的重新導向網址 - 作為「展開狀態的廣告」開啟後,用戶點擊「寄件者顯示的短網址」時的連結網址。您可在此欄位中加入靜態點擊追蹤網址。這是用戶點擊顯示網址後到達的網頁。

 

製作展開狀態的廣告的方式

展開狀態的廣告包含 1 個 HTML 檔案和 1 個圖像資料夾,需要加入 ZIP 資料夾:

  • 圖像資料夾 (名稱為「Images」) 包含展開狀態的廣告的圖像檔案
  • HTML 檔案的名稱必須為「index.html」

圖像資料夾規格

  • 廣告必須包含最少 1 個圖像,最多可包含 100 個圖像。如要在展開狀態的廣告中嵌入影片,請跳到下文的影片部分。
  • 每個圖像的寬度上限:650 像素
  • 每個圖像的高度上限:1000 像素 (注意:要廣告取得最佳成效,建議所有廣告範本 (包括所有文字和圖像) 的高度不超過 650 像素)。

HTML 檔案規格

技術詳情

  • 網址:必須包含最少 1 個絕對網址 (可包含最多 15 個),所有特殊字元必須編碼 (例如:空格、#)。
  • 格式:使用標準 HTML 表格控制版面配置,以確保在各種裝置上的外觀一致。
  • 追蹤:靜態追蹤網址可用來追蹤外部點擊。不得使用展示追蹤像素和動態追蹤網址。如果您使用「Gmail 自訂 HTML 廣告」範本,請務必在 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 影片"></a>

    注意:在 Google Ads 中預覽廣告時,YouTube 影片不會在燈箱顯示或播放。

  2. 在新標籤中加入影片的方式

    如果您希望影片在新標籤中以 YouTube (而不是在燈箱中) 播放,請將類別設定為「nonplayable」。

    例如:

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

  3. 重要提示:在預覽圖像中加入「播放」按鈕。

    如要讓用戶知道點擊圖像後會播放影片,您的預覽圖像應包含播放按鈕。Google Ads 不會在預覽圖像中加入任何影片提示。

相關連結

此內容對您有幫助嗎?
我們可以如何改善?
舊版 新版

需要更多協助?

登入以獲取其他支援選項,以便快捷解決您的問題