使用自訂 HTML 製作 Gmail 廣告

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

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

事前準備

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

 

大部分使用者現在完全只用全新 Google Ads 服務來管理帳戶。如果您仍在使用舊版 AdWords 服務,請在下方選擇「舊版」瞭解詳情

操作說明

自訂 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
  • 檔案大小:小於 500KB
  • 檔案格式:PNG、JPG 或 GIF (非動畫)

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

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

文字檔案規格

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

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

注意:請確實按照範例填寫,並確認沒有遺漏任何類別 (例如「廣告客戶」) 和特定資訊。下表提供字數限制和所填寫資訊的相關詳細說明。

  字數限制 填寫的資訊
廣告客戶 20 公司名稱或網域。
主旨 25 標題可包含優惠、折扣或具吸引力的消息。
說明 100 說明可以是短摘要或號召性文字。
顯示網址 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>

    注意事項:在 AdWords 中預覽廣告,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. 重要:在預覽圖片中加入「播放」按鈕。

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

  4. 如何從內嵌影片中移除廣告附加資訊

    您可以在 YouTube 代管帳戶中,於影片上方停用廣告。瞭解詳情

在展開廣告 HTML 檔案中加入內嵌表單

請注意:這項功能僅適用於許可清單中的客戶。

Gmail 廣告中的 HTML 表單簡化了轉換步驟。您也可以使用 HTML 和支援的 CSS 製作表單,但只能使用下列允許使用的表單欄位。

隱私權疑慮

若要在廣告中嵌入表單,請務必加入隱私權政策連結,並遵守 AdWords「不負責任地收集及使用資料」政策

所有表單中輸入的資訊都會透過 GET 或 POST 方法直接傳送給您,完全不會經過 Google 伺服器,也不會在 Google 伺服器上儲存任何資訊。您必須自行負責處理資料。

在自訂 HTML 廣告中製作表單時,請注意使用者可能會猶豫,或不願意提供某些資訊,尤其是資訊會發送到您網站之外的情況。

製作 HTML 表單前,請先考慮下列問題:

  • 您索取的資訊是否與提供優惠給使用者無關?
  • 這些資訊是否可能會落入他人手中,對使用者造成傷害?

如果您在上述任一問題中回答「是」,我們不建議您在宣傳內容中加入 HTML 表單。

步驟 1:製作表單

以下是 Gmail 廣告 HTML 表單中允許加入的表單欄位:

基本資訊 允許加入的表單欄位
類別 姓名 (名字、姓氏)
地址
鄉/鎮/市/區
州/省
郵遞區號
國家/地區
電子郵件地址
電話號碼
年齡
13-18 歲
18-24 歲
25-34 歲
35-44 歲
45-54 歲
55-64 歲
65 歲或以上
性別
方便聯絡時間
感興趣的計劃或產品
教育 畢業年份
最高學歷
當地和分類 所需服務地點
服務類型
金融/保險
金額欄位的範圍:
0 - 14999
15000 - 24999
25000 - 39999
40000 - 59999
60000 - 74999
75000 - 99999
十萬以上
貸款金額 (範圍)
幣別
融資類型 (貸款、抵押借款、信用卡)
家庭收入 (範圍)
可投資資產 (範圍)
人壽投保金額 (範圍)
從軍成員
自有或出租 (汽車、房屋等)
信用評價
非常差



您的房地產價值多少?(範圍)
汽車 汽車品牌/型號
旅遊 出發地或目的地
出發/返回日期
企業對企業 公司
職業
標題
員工人數
1-10 個
10-50 個
50-100 個
100-500 個
超過 500 個

步驟 2:新增表單驗證

若要確保使用者輸入有效資訊,您可以加入下列表單驗證。

非空白的輸入資料 若要確保欄位不會留白,請在輸入資料中加入「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">

*欄位若未加上「required」標記,則必須包含一個值才能通過驗證。

相關連結

這篇文章實用嗎?
我們應如何改進呢?
舊版 新版