使用自訂 HTML 製作 Gmail 廣告

自訂 HTML 適合進階廣告客戶使用,不但能製作與現有 Gmail 廣告範本截然不同的廣告,還可在廣告中加入影片和多個行動號召。若要利用自訂版面配置製作 Gmail 廣告,請將自訂 HTML 檔案上傳至 Google Ads。

本文將說明如何設定並上傳自訂 Gmail 廣告。

事前準備

重要注意事項:請注意,自訂 HTML Gmail 廣告會保留到達網頁網址格式,且不適用最終到達網址和追蹤範本。進一步瞭解升級版網址

操作說明

自訂 HTML Gmail 廣告是一個 ZIP 資料夾,內含收合和展開式廣告的所有檔案。由於格式規格非常嚴格,為避免發生問題,請多加留意下列細節。

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

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

如何製作收合廣告

收合廣告的 ZIP 資料夾中需加入 2 個檔案:

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

標誌圖片規格

請務必將檔案命名為「logo.png」、「logo.jpg」或「logo.gif」,且檔案格式必須為 PNG、JPG 或 GIF。

  • 標誌圖片大小:最小 144 x 144 像素,長寬比為 1:1
  • 檔案大小上限:150KB
  • 檔案格式:PNG、JPG 或 GIF (非動畫)

標誌圖片可以是一個小型的圖示、圖形或品牌標誌。

圖片在解析度一般的裝置上會顯示為 50 x 50 的正方形圖片,但我們可接受最高達 150KB 大小的圖片,以在部分螢幕上提供更清晰的檢視品質。

文字檔案規格

請務必將檔案命名為「teaser.txt」,且檔案格式必須為 TXT。以下是正確格式的文字檔案範例。

廣告客戶:商家名稱
主旨:「商家名稱」所有商品全面八折
說明:新品上架,價格實惠!
廣告顯示網址:www.example.com
Landing Page:https://www.example.com/sale

注意事項:請確實按照範例進行,並確定輸入的標題與上述英文標題完全相同。此外,請務必納入類別 (例如「Advertiser」) 和您的特定資訊。下表提供字數限制和所填寫資訊的相關詳細說明。

標題 字數限制 填寫的資訊
廣告客戶 20 公司名稱或網域。
主旨 25 標題可包含優惠、折扣或具吸引力的消息。
說明 90 說明可以是短摘要或行動號召。
顯示網址 32 網址 (和廣告中顯示的網址相同)
到達網頁 沒有限制 前導廣告重新導向網址 - 開啟展開廣告時,在「表明寄件者身分的簡短網址」中可供點擊的實際連結網址。您可以在這個欄位中加入靜態點擊追蹤網址。這個網頁指的是使用者點擊顯示網址後會抵達的網頁。

 

如何製作展開廣告

展開廣告的 ZIP 資料夾中需加入 1 個 HTML 檔案和 1 個圖片資料夾:

  • 圖片資料夾 (命名為「Images」) 包含展開廣告所使用的圖片檔
  • HTML 檔案,命名為「index.html」

圖片資料夾規格

  • 廣告必須包含至少 1 張圖片,最多可容納 100 張圖片。如要在展開廣告中嵌入影片,請直接參考下方的影片部分。
  • 每張圖片寬度上限:650px
  • 每張圖片高度上限:1000px (請注意:為了達到最佳廣告效果,建議總廣告畫面包含所有文字和圖片,高度不要超過 650px。)

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 Video"></a>

    注意事項:在 Google Ads 中預覽廣告,YouTube 影片就不會以燈箱模式顯示或播放。

  2. 如何在新分頁中加入影片

    如果您想在新分頁 (而不是燈箱模式) 中播放影片,請將 class 設為「nonplayable」。

    例如:

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

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

    為了讓使用者知道點擊圖片後就會播放影片,預覽圖片必須包含某種形式的播放按鈕。Google Ads 不會在預覽圖片中加入任何元素,指出圖片為影片。

相關連結

這對您有幫助嗎?
我們應如何改進呢?

還有其他問題嗎?

登入即可獲得其他支援選項,快速解決您的問題