自製符合google廣告規範的 html 5 廣告素材

在我的工作上，滿常遇到需要幫忙客戶排除廣告上架google的問題，我發現客戶們的設計師都可以做出很優秀的作品，卻常常敗在最後上架的那一個步驟，不管設計的檔案是由哪個軟體製作的，在google的廣告系統當中，就是有幾項條件需要符合，才能夠將廣告素材順利上架，不然做得再美再炫也枉然。

目前常見製作動態廣告的軟體有GWD(Google Web Design)與Adobe Animate,以及真的實打實的coding動態特效，最後這種相信一般的網頁設計師是很難辦到，因為它需要堅實的JavaScript的功力與很厲害的運算，所以我想大多數的設計師都會選擇其他軟體製作。

Google Web Design是一款由google開發的免費軟體，有繁體中文版本，圖形介面，對於設計師友善，製作概念與Flash很雷同，內建有簡易的語法可以選擇，算是好入門的軟體，也因為是google開發的軟體，要透過這個軟體發布檔案​就必須符合google廣告的規範才能成功，所以軟體內會引導使用者完成條件，官網上也有官方教學文件和影片可以參考，所以用這套軟體來製作廣告素材，上架平台不會有問題。不過我個人滿少使用的，因為透過GWD發布過的檔案會被軟體重新編譯過，程式碼很複雜，對於沒有原始檔的人難以進行修改和維護。

檔案內的元件狀態都會有提示，不符合條件的也會給予警示

輕觸區塊是廣告最重要的設定，可以設定廣告將使用者導向指定網頁，也是google廣告重要的規範之一

Adobe Animate是Adobe的動畫軟體，跟Flash很像，會接觸它是因為我在客戶提供的檔案中，發現了關於這軟體的字樣，這才發現原來它也可以應用在html​，它也是圖形介面，使用上比GWD複雜，不過做出來的動態也更細緻，在事件指令中，它是需要比較熟悉JS的人會比較上手，製作的概念也是以時間軸來設計動態，但需特別注意這檔案如果是要應用在google廣告平台，需要特別注意檔案發布的條件，有時無法上架的問題原因，其實不是檔案有問題，只是因為它必須符合google規範，所以如果用GWD以外的軟體製作goolge廣告的話，大概都會遇到這個問題。

html 5 廣告素材規定中，常常出現錯誤的，主要就是缺少了使用啟用器追蹤事件(如下網址)。如網址中步驟2所述，所以我們只需要檢查步驟2的規定，並且引用啟用器所需要的JS加掛進html檔案中，並宣告廣告代碼，如下網址與圖1所示，就可以上架其他軟體製作的廣告素材了。

圖1 發布後的html檔案需要在引入一支js，並在檔案中設定廣告的url

這是我工作上常遇見的廣告上架問題，分享給需要的人。我參考的資料如下

https://support.google.com/displayvideo/answer/9452864?sjid=10870753000500774851-AP

https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html