使用自訂 HTML 製作 Gmail 廣告

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

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

開始之前

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

指示

自訂 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 像素，長寬比：1:1
檔案大小上限： 150KB
檔案格式：PNG、JPG 或 GIF (非動畫)

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

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

文字檔案規格

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

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

注意事項：請嚴格按照範例操作，並務必輸入如下所示完全一樣的英文標題。此外，您亦必須加入類別 (例如：「廣告客戶」) 和您的特定資料。下表列出字元限制和所需包含內容的詳細指引。

標題	字元限制	包含內容
廣告客戶	20	您公司的名稱或網域。
主旨	25	主旨可以包含優惠、折扣或引人注目的消息。
廣告描述	90	廣告描述可以是簡短摘要或呼籲字句。
顯示網址	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 檔案

加入影片的方式

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 影片不會在燈箱顯示或播放。
在新標籤中加入影片的方式

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

例如：

<a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Gmail Video"></a>
重要提示：在預覽圖像中加入「播放」按鈕。

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