HTML5 廣告素材

HTML5 廣告素材是指使用 JavaScript、HTML 和 CSS 建立的廣告，可在網頁或行動應用程式中放送。這類廣告可以是多媒體廣告或互動式多媒體廣告。

多媒體廣告：點選後即可前往廣告主網站的圖像廣告
互動式多媒體廣告：內含互動元素的廣告，例如動畫、圖庫、遊戲或嵌入式影片

在 Display & Video 360 中，您可以直接上傳多媒體橫幅廣告和互動式多媒體橫幅廣告。不過，如要使用具有進階互動式多媒體功能的廣告素材 (包括可展開或插頁式格式)，請使用 Studio。您可以透過 Campaign Manager 360 投放 Studio 廣告素材，也可以將這類廣告素材同步到 Display & Video 360 帳戶。

HTML5 廣告素材可以指派給多媒體廣告委刊項。

支援 HTML5 廣告素材類型

Display & Video 360 支援下列 HTML5 廣告格式。如要參考各種廣告素材類型的範例，請前往互動式多媒體庫。

多媒體廣告

HTML5 廣告素材有一或多種固定大小，並且會放在網頁或行動應用程式中的固定位置。

支援的多媒體廣告功能：

點擊廣告代碼：點擊廣告代碼是一段程式碼，用於評估點選廣告後開啟廣告主到達網頁的點擊次數。
回應式廣告素材：您可以將同一個多媒體廣告橫幅的不同大小包裝成回應式廣告素材，以簡化廣告素材分配作業。

互動式多媒體廣告

互動式多媒體廣告是數位廣告術語，代表內含如影片、音訊或其他可吸引使用者互動的元素等進階功能的廣告。互動式多媒體廣告可支援更多指標，記錄各種互動情形，協助您更瞭解使用者如何與您的廣告互動。舉例來說，您可以為互動式多媒體廣告設定計數器和計時器，瞭解使用者在廣告中玩遊戲的次數或時間長度。

支援的互動式多媒體功能和格式：

互動式多媒體指標：使用互動式多媒體指標計算點擊次數、離開事件、互動次數、影片播放時間等等。
橫幅廣告內嵌影片：內嵌影片播放器的廣告。所有格式的互動式多媒體廣告素材都能使用影片，但以數據為準的廣告素材除外。
全螢幕展開式廣告：這種廣告可展開並填滿行動裝置螢幕，例如 3D Swirl 廣告素材。
以數據為準的廣告素材：以數據為準的廣告素材可以根據不同顧客區隔打造專屬廣告訊息。
視差廣告素材：視差是一種利用多層圖片產生深度錯覺的動畫效果，可用於互動式多媒體廣告素材。使用者在行動裝置上透過上下捲動的方式瀏覽頁面時，前景和背景圖片會以不同速度移動。

建立 HTML5 廣告素材

建立 HTML5 廣告素材時，您可以使用任何 HTML5 編輯器，也可以使用 Google Web Designer 這款免付費的網頁應用程式。廣告素材建立完成後，請將檔案包裝成一個 ZIP 檔案，然後上傳到 Display & Video 360。

附註：用於現有多媒體廣告活動的 HTML5 廣告也適用於最高成效零售廣告活動 (只要 HTML5 廣告採用回應式格式的話)。

建立 HTML5 多媒體橫幅廣告

建立 HTML5 多媒體橫幅廣告時，您可以使用 Google Web Designer 或任何 HTML5 編輯器。

為了避免廣告素材因遭到拒登而延遲放送，建立廣告素材時請遵循 HTML5 多媒體橫幅廣告規範。

Google Web Designer

您可以使用 Google Web Designer 這項免費的 HTML5 設計及開發工具製作所有類型的 HTML5 廣告素材。使用 Google Web Designer 時，您可以選擇從頭開始建立廣告，也可以透過內建的範本建立廣告。

如何使用 Google Web Designer 建立橫幅廣告

HTML5 編輯器

如果您想要自行編寫程式碼，可以使用任何的 HTML5 編輯器建立橫幅廣告。

下載 ZIP 檔案範例

(進階) 建立全新的 HTML5 橫幅廣告

建立有效的 HTML 檔案 (必須含有 <html>、<head>、<title> 和 <body> 標記)。
新增 <meta> 標記指定廣告素材大小：
<meta name="ad.size" content="width=[x],height=[y]">
新增點擊廣告代碼：
1. 新增以下指令碼標記，並將 https://www.google.com 改成廣告主的到達網頁網址：
  
  <script type="text/javascript"> var clickTag = "https://www.google.com"; </script>
2. 使用 <a> 標記包住主要圖片或廣告容器的 <div> 標記，觀看廣告者才能點選主要圖片或廣告容器：
  <a href="javascript:window.open(window.clickTag)"> <div id="container"> <img src="image.png" /> </div> </a>

建立互動式多媒體橫幅廣告

您可以使用任何 HTML5 編輯器或 Google Web Designer 建立互動式多媒體橫幅廣告。您可以先建立橫幅廣告，然後再新增影片、YouTube 影片或音訊等媒體元件。

互動式多媒體橫幅廣告必須要有 Studio 的啟用器，其用途如下：

透過 Enabler.getUrl() 安全地載入影片和圖片。
透過 Enabler.exit() 開啟廣告主到達網頁。在互動式多媒體橫幅廣告中使用離開事件，而非點擊廣告代碼。

為了避免廣告素材因遭到拒登而延遲放送，建立廣告素材時請遵循互動式多媒體廣告素材規範。

哪些檔案可以加入 HTML5 ZIP 檔案

HTML5 ZIP 檔案最多可以包含 100 個檔案，且沒有大小限制。不過，為了配合發布商的規定，請盡可能縮減 ZIP 檔案大小。

下載 ZIP 檔案範例

輸入 ZIP 檔案的名稱

HTML5 ZIP 檔案的名稱長度不得超過 50 個半形字元 (包括「.zip」這幾個字元)。如果檔案名稱超過長度上限，就無法上傳。

支援的檔案類型

HTML/純文字：HTML、HTM、CSS、JS
圖片：JPG、JPEG、GIF、PNG、SVG
字型：DFONT、EOT、OTF、TTE、TTF、WOFF、WOFF2

哪些檔案可以加入 HTML5 ZIP 檔案

HTML 檔案：HTML 檔案是 HTML5 廣告素材的主要素材資源，檔案必須包含至少 1 個離開事件或點擊廣告代碼，且可以載入至 iframe。Display & Video 360 會將 iframe 與您的素材資源一併放送。
其他檔案：HTML 檔案中使用的圖片、CSS 和 JavaScript 檔案。互動式多媒體廣告素材也支援以下檔案類型 (影片必須由外部伺服器代管，或者廣告素材必須使用 Studio 建立)：
.avi、.mov、.mp4、.m4v、.mpeg、.mpg、.oga、.ogg、.ogv、.webm、.wmv

哪些檔案不可加入 HTML5 ZIP 檔案

其他 ZIP 檔案：請勿在 HTML5 ZIP 檔案中加入其他 ZIP 檔案。
未使用的檔案：請勿加入 HTML 檔案未使用的檔案，以及任何來源檔案或創作檔案。
本機或工作階段儲存空間：Display & Video 360 不接受使用本機儲存空間或工作階段儲存空間的 HTML5 素材資源。
備用圖片：請勿在 HTML5 ZIP 檔案中加入備用圖片。如要上傳備用圖片，請另行在「備用圖片」部分中上傳。
名稱過長的檔案：影片和音訊檔案的名稱長度不得超過 50 個半形字元，其他檔案的名稱則不得超過 200 個半形字元 (舉例來說，日文、中文和韓文使用全形字元，因此使用這些語言的檔案名稱長度上限會是 25 和 100 個字元)。

(選用) 備用圖片

備用圖片並非必要，且只有在廣告素材資源不受觀眾的瀏覽器或平台支援時才會放送。舉例來說，當使用者透過 Internet Explorer 8 瀏覽網頁，而您的廣告素材使用的是 CSS 動畫時，系統就會放送備用圖片。

請分開上傳備用圖片和廣告素材 ZIP 檔案。如果您未上傳備用圖片，系統會改為放送自動產生的空白圖片。

上傳 HTML5 廣告素材

開始之前，請確認您已將廣告素材資源壓縮成 ZIP 檔案。瞭解要在 HTML5 .zip 檔案中加入哪些檔案。

開啟廣告主頁面，然後在左選單中按一下「廣告素材」。
依序按一下「新增」、「上傳」和「HTML5 或圖片」。
輸入廣告素材在 Display & Video 360 中的名稱。
如要新增廣告素材檔案，請將電腦中的 .zip 檔案拖曳到「將檔案拖曳到這裡」的位置，或者點按「瀏覽」，然後選取所需 .zip 檔案。

如果系統拒絕您的 HTML5 上傳作業，請按照這些疑難排解步驟操作。
選取一或多個要放送的廣告素材尺寸。Display & Video 360 支援採用單一大小的廣告素材，以及採用多種大小的 HTML5 回應式廣告素材。
在「事件」部分中，檢查及編輯系統在廣告素材中偵測到的離開事件。您可以編輯每個離開事件 (或點擊廣告代碼) 的到達網頁網址 (開頭必須為 http:// 或 https://)。如要編輯報表標籤或網址，請將滑鼠游標指向所需資料列，然後按一下「編輯」圖示。
注意：儲存廣告素材之後，系統可能需要幾分鐘的時間，才會在預覽畫面或已同步的 Campaign Manager 360 廣告主中顯示更新過的到達網頁。
按一下「儲存」即可儲存廣告素材。

Display & Video 360 會對廣告素材進行人工審核及自動審核，確保廣告素材能夠正常顯示。系統也會檢查廣告素材，確定廣告素材遵守 Google 的廣告政策，以及其放送所在廣告交易平台的政策。如要查看廣告素材狀態，請前往「廣告素材狀態」分頁。

進階設定

以下是選用設定。

如果插頁式廣告與行動裝置的螢幕尺寸不符，Display & Video 360 會調整其大小。假如不希望系統調整廣告大小，請開啟「不要依據裝置寬度調整大小」。
新增備用圖片和備用報表標籤。如果您上傳的是回應式廣告素材，可以為每個大小上傳一個備用圖片。
上傳友善載入圖片。如果主要廣告素材檔案載入延遲或網路連線速度緩慢，系統就會顯示這張圖片。
假如 Display & Video 360 廣告主已連結至 Campaign Manager 360 帳戶，請新增追蹤廣告，以便在連結的 Campaign Manager 360 廣告主中取得報表。注意：這個選項僅適用於互動式多媒體廣告素材、Swirl 廣告素材和以數據為準的自訂廣告素材。
1. 按一下「放送屬性」。
2. 搜尋現有的 Campaign Manager 360 追蹤廣告。為了讓系統有時間進行同步處理，在 Display & Video 360 中建立廣告素材之前，請先在 Campaign Manager 360 中建立追蹤廣告。
  
  提示：如要輕鬆找出正確的追蹤廣告，只要在 Campaign Manager 360 中為每個廣告和刊登位置指派 1 個追蹤廣告即可。
如要加入追蹤代碼、整合代碼或相關附註，請按一下「其他詳細資料」。

分享預覽

您可以透過預覽連結分享廣告素材預覽畫面，方便其他人審查或簽核。這個連結的所有分享對象都可以查看預覽畫面，且無須登入帳戶。

常見問題

為什麼在檔案上傳完成之後，系統顯示錯誤的廣告素材大小？

廣告素材大小取決於廣告素材或備用圖片，因此請務必讓備用圖片的尺寸與主要廣告素材相符。您也可以在「尺寸」下拉式選單選取正確的廣告大小。

為什麼我無法上傳廣告素材？

無法上傳廣告素材資源的常見問題包括：

檔案名稱過長：多數檔案類型的名稱長度上限為 200 個半形字元或 100 個全形字元；音訊和影片檔案的名稱長度上限則為 50 個半形字元或 25 個全形字元。
ZIP 檔案內有 ZIP 檔案：系統不允許將壓縮過的 ZIP 檔案加入另一個 ZIP 檔案中。
廣告素材不含點閱元素：所有廣告素材都必須包含至少 1 個連往廣告主到達網頁的離開事件。
Google Web Designer 廣告素材需要更新：如果廣告素材是透過 Google Web Designer 所建立，您會收到以下錯誤訊息：「Google Web Designer HTML 的中繼資料無效」。這表示廣告素材是利用過期版本的 Web Designer 所建立，因此需要更新。請將 Web Designer 升級為最新版本，然後開啟這個廣告素材並重新發布。

詳情請參閱「廣告素材上傳問題疑難排解」一文。

這對您有幫助嗎？

我們應如何改進呢？