管理廣告素材

如何備妥 Campaign Manager 360 的 HTML5 多媒體素材資源

下一個: 從 Google Web Designer 取得廣告素材

本指南可協助您備妥要上傳至 Campaign Manager 360 的 HTML5 多媒體素材資源。

關於採用 HTML5 的廣告素材

HTML5 廣告素材可以是多媒體廣告素材或互動式多媒體廣告素材。如要進一步瞭解這兩種廣告素材類型，請參閱下文。

多媒體廣告素材

多媒體廣告素材：這類非互動式多媒體廣告素材可以使用圖片或 HTML5。多媒體廣告素材可提供下列功能：

個別離開事件的點擊廣告代碼報表
預載
支援 HTML5 回應式素材資源

互動式多媒體廣告素材

互動式多媒體廣告素材：這類 HTML5 廣告素材可能包含橫幅廣告內嵌影片 (可展開為更大尺寸) 或互動元素 (例如遊戲)。互動式多媒體廣告素材可提供下列功能：

針對離開事件、計數器和計時器產生報表，藉此取得互動資料
可展開為更大尺寸或全螢幕
支援橫幅廣告內嵌影片和音訊
預載

備妥並上傳 HTML5 多媒體廣告素材資源

如要設定內含 HTML5 的多媒體廣告素材，請將 HTML5 廣告素材壓縮成 .zip 檔案，再上傳到 Campaign Manager 360。.zip 檔案應包含 HTML 檔案，以及該 HTML 檔案所參照的所有檔案。

建立一個資料夾。
加入 HTML 檔案以及該檔案所參照的任何素材資源。請不要加入任何其他檔案。您可以將素材資源彙整到子資料夾中，但請勿壓縮這些子資料夾。
應加入 .zip 檔案中的檔案
應加入的檔案
- HTML 檔案：HTML 檔案是 HTML5 多媒體廣告素材的主要素材資源，也是著手製作廣告素材的起始點。HTML 檔案必須是完整的 HTML 文件，不僅要有至少一個點擊廣告代碼，還要能載入至 iframe。Campaign Manager 360 會將 iframe 與您的素材資源一併放送。詳情請參閱下文的點擊廣告代碼說明。
- 其他檔案：加入 HTML 檔案所參照的任何其他檔案，而不要加入沒有參照的檔案。
不應加入的檔案
- 請勿加入 .zip 檔案：請勿在 HTML5 .zip 檔案中加入任何 .zip 檔案。不過，如果您擁有多個 HTML5 廣告素材所需的數個不同 HTML5 .zip 檔案，可以將這些檔案壓縮成一個 .zip 檔案，以便批次上傳至 Campaign Manager 360。
- 請勿加入沒有參照的檔案：如上所述，請務必只加入 HTML 檔案所參照的檔案。
- 請勿加入本機或工作階段儲存空間：Campaign Manager 360 不接受使用本機儲存空間或工作階段儲存空間的 HTML5 素材資源。
- 請勿在名稱中加入「%」符號：請確認素材資源中的檔案名稱未包含百分比符號 (%)。
- 請勿加入備用素材資源
  - (選用) 廣告投放專員可以另行將備用圖片上傳至 Campaign Manager 360。只有在主要素材資源因系統不支援而無法使用時，Campaign Manager 360 才會使用備用圖片。請勿在 HTML5 .zip 檔案中加入備用圖片。
支援的檔案類型和 .zip 檔案的限制
- 支援的檔案類型：HTML、HTM、JS、CSS、JPG、JPEG、GIF、PNG、JSON、XML、SVG、EOT、OTF、TTF、WOFF、WOFF2
- .zip 檔案內的檔案數量上限：100 個
- 大小上限：10 MB
HTML5 .zip 檔案範例

下載 ZIP 檔案範例

.adz 檔案相關說明

Campaign Manager 360 也接受 .adz 檔案格式的 HTML5 廣告素材，只要把 .adz 檔案當做 .zip 檔案處理即可。對您來說，.adz 檔案和 .zip 檔案並沒有什麼差別，都能達到相同目的。
將資料夾壓縮成 .zip 檔案。如需壓縮資料夾的相關說明，請造訪 Windows 或 Apple 的說明中心。
廣告投放專員現可將這個 .zip 檔案上傳至 Campaign Manager 360。

進一步瞭解廣告投放：
- 在 Campaign Manager 360 中新增廣告素材的步驟
- 多媒體廣告素材設定

上傳問題

使用 HTML5 驗證工具可檢查 Campaign Manager 360 是否接受您的 .zip 檔案。

為什麼無法選取要上傳至 Campaign Manager 360 的 HTML5 多媒體廣告素材？

問題的原因可能在於您的檔案並非 .zip 或 .adz 格式。請將 HTML 檔案及其參照的任何其他檔案壓縮成單一 .zip 檔案，然後再試一次。
如果您已確實建立 .zip 檔案，請檢查檔案的副檔名是否有誤，方法如下：在檔案上按一下滑鼠右鍵，然後查看檔案屬性，確定副檔名是否為 .zip。
如果仍然無法選取檔案，建議您與支援團隊聯絡。

為何我的上傳內容遭 Campaign Manager 360 拒絕？

如果無法順利上傳檔案，可能是因為檔案未包含有效的 HTML5 素材資源，或是內含超過 100 個檔案 (檔案數量上限為 100)。此外，也有可能是因為您的 HTML5 素材資源使用了本機儲存空間或工作階段儲存空間的 JavaScript API。為保護使用者的隱私，Campaign Manager 360 不允許使用這些 API。

為何 Campaign Manager 360 規定不得加入本機儲存空間或工作階段儲存空間的 JavaScript API？

為保護使用者的隱私，Campaign Manager 360 不接受使用本機儲存空間或工作階段儲存空間的 HTML5 素材資源。如果系統因此拒絕您上傳的內容，請與開發人員聯絡，要求對方移除禁止使用的 API，然後再次嘗試上傳素材資源。具體來說，您無法上傳含有以下 JavaScript API 的 HTML5 素材資源：

indexedDB
localStorage
openDatabase
sessionStorage

如果必須使用上述 API 才能達成您的廣告目標，請嘗試改用 Campaign Manager 360 設定。舉例來說，某些廣告客戶會使用這些 API 指定廣告目標以及設定展示頻率上限，但這些 API 並非必要：使用 Campaign Manager 360 就能設定各種指定目標以及展示頻率上限。請洽詢支援團隊，瞭解相關的變通方法 (提醒您，無論您設定素材資源的方式為何，都必須遵循您與 Google Marketing Platform 所簽署合約的隱私權規定，僅能嘗試擷取符合規定的資料)。

什麼是本機儲存空間與工作階段儲存空間？這些是兩種 HTML5 網路儲存空間。用來將資料儲存在瀏覽器中。本機儲存空間可讓任何瀏覽工作階段將檔案儲存在瀏覽器中。除非使用者清除瀏覽器快取或手動刪除檔案，否則儲存內容會永久保存在瀏覽器中。工作階段儲存空間則只會在特定瀏覽工作階段將資料儲存到瀏覽器中。只要關閉並重新啟動瀏覽器，系統就會清除在該工作階段儲存的所有資料。

系統規定不得使用這類儲存空間的原因為何？保存在這些儲存空間中的檔案可能含有一些程式碼，能夠擷取個人識別資訊 (PII)、追蹤瀏覽器各工作階段的活動，或將其他資料傳送給可能違反 Google Marketing Platform 合約條款的第三方。本機和工作階段儲存空間當然不是只能用於這類資料收集行為，不過儲存在這兩個儲存空間中的檔案可能含有任何類型的程式碼，因此有可能會用來收集上述資料。

開發人員規範

參考資源

IAB HTML5 規範

如何設定廣告素材尺寸

尺寸規範

與圖片或影片不同，HTML 文件本身並沒有設定尺寸，因此，請使用「大小中繼標記」來表示您所需的廣告素材大小。大小中繼標記是 HTML 文件中的選用參數，可協助您確認廣告素材顯示時的尺寸是否正確。您可以按照下方範例輸入尺寸：

<meta name="ad.size" content="width=300,height=250">

點擊廣告代碼

點擊廣告代碼指南

針對包含 HTML5 素材資源的廣告素材，點擊代碼能夠為其中的每個離開事件定義到達網頁。「離開事件」是指任何可點擊的區域，能夠將瀏覽器導向至某個到達網頁。每個點擊廣告代碼可定義一個不同離開事件的到達網頁。

當離開事件獲得點擊時，廣告素材就會呼叫 Campaign Manager 360，索取與該離開事件相關聯的到達網頁。視您的需求而定，您可以在廣告素材或廣告中設定這個到達網頁。

當您上傳素材資源時，Campaign Manager 360 會偵測點擊廣告代碼。您隨時可以變更點擊廣告代碼所使用的到達網頁 (即使在您匯出代碼後)。這是因為點擊代碼是標準的變數，亦即到達網頁的預留位置，而非以硬式編碼方式寫入的值。

基於多媒體廣告素材中廣告層級的設定會覆寫廣告素材層級的設定，以下提供幾個設定點擊代碼的最佳做法：

確認廣告素材把點擊代碼變數當做點擊目標網址使用。
點擊廣告代碼應該要方便廣告伺服器讀取，因此請勿使用縮寫或難以辨識的名稱。不過，您可以在程式碼的其餘部分和其他檔案中使用縮寫。
如果在素材資源中以硬式編碼的方式寫入網址，會導致 Campaign Manager 360 無法追蹤點擊，也會讓廣告投放專員無法更新網址，因此我們不建議您這樣做。在您上傳素材資源之後，如果 Campaign Manager 360 發現當中有以硬式編碼方式寫入的網址，就會向您發出警告訊息。

插入點擊廣告代碼的範例

以下是在 HTML 文件中插入點擊廣告代碼的範例：

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[在此插入其餘的廣告素材程式碼。] </html>

請務必讓廣告素材使用點擊廣告代碼變數做為到達網頁網址：

使用 Google Web Designer 處理離開事件

Google Web Designer 的輕觸區域元件與 Campaign Manager 360 完全相容，您不必自訂任何程式碼。

如何利用輕觸區域新增點擊廣告代碼：

確認您的廣告具有按鈕或其他清楚可見的行動號召元素，可讓使用者點選或輕觸。
將「輕觸區域」元件從「元件」面板的「互動」資料夾拖曳至中心區域，並放置在行動號召元素上面。
按一下「事件」面板中的「新事件」按鈕。

在事件對話方塊中選取以下選項：

目標	輕觸區域元件 (`gwd-taparea_1`)
事件	[輕觸區域] > [輕觸/點擊]
動作	[Google 廣告] > [結束廣告] _{注意：類似動作 [結束廣告 (覆寫網址)] 只能用於動態廣告，且不允許您在廣告素材外 (例如在 Studio 或 Campaign Manager 360 中) 修改網址。}
接收端	`gwd-ad`
設定	指標 ID：讓報告更簡潔易懂的標籤 (例如「CTA」)。網址：離開網址。結束時收合：如為可展開式廣告，勾選這個選項即可在使用者關閉廣告時收合廣告。結束時暫停媒體：勾選這個選項即可在使用者關閉廣告時停止播放視訊或音訊。結束時收合頁面：如為可展開式廣告，當使用者關閉廣告時會顯示的頁面。

範例檔案

HTML 文件範例

以下是 HTML5 廣告素材的完整 HTML 文件範例。點擊代碼和大小中繼標記會以粗體顯示。

由於這個廣告素材的結構相當單純，因此不需要任何其他素材資源。如果這是您的 HTML5 廣告素材，您只要將其壓縮成 .zip 或 .adz 檔案，然後將壓縮檔傳送給 Campaign Manager 360 廣告投放專員即可。

文件

<html>
  <head>
    <title>sample html page</title>
    <meta name="ad.size" content="width=300,height=250">
    <style>
      html, body {background-color: blue;}
      p { color:white; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var clickTag = "http://www.google.org";
      function resizeWindow()
      {
        $('p').css({ 'width':'100%', 'text-align':'center' });
        var h1 = $('h1').height();
        var h = h1/2;
        var WinHeight = $(window).height();
        var w = WinHeight/2;
        var m = w - h;
        var WinWidth=$(window).width();
        $('p').css("margin-top",m + "px");
        $("p").text("Size="+WinWidth+"x"+WinHeight);
      }
      $(document).ready(function () {
        resizeWindow();
      });
      $(window).resize(function () {
        resizeWindow();
      });
     </script>
  </head>
<body>
    <a href="javascript:window.open(window.clickTag)"><p>Page loading...</p></a> </body> </html>

含有點擊廣告代碼的 HTML5 檔案

這些 HTML5 檔案是用於動態變更網址，以及透過 Campaign Manager 360 廣告伺服器記錄點擊。