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

更新 發佈閱讀 3 分鐘

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


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


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



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

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

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

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


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


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


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

圖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






留言
avatar-img
爽閒妻愛七嘴八舌
6會員
64內容數
這裡是爽閒妻的小小天地,歡迎大家可以來這裡各種分享,不管是工作還是生活,親子教育還是夫妻關係~一起聊聊大家精采的生活吧!
2025/04/18
無堅不摧的小三,他們介入你的生活,支配著你的休閒遊樂、各種假日節日、洗腦著你的想法,用著親情友好的糖衣包裹著毒,讓人無法拒絕卻又同時那樣合情合理...
Thumbnail
2025/04/18
無堅不摧的小三,他們介入你的生活,支配著你的休閒遊樂、各種假日節日、洗腦著你的想法,用著親情友好的糖衣包裹著毒,讓人無法拒絕卻又同時那樣合情合理...
Thumbnail
2025/03/28
人人都高喊著個人與自我,只要一個一言不合,就直指人家情勒,給別人扣上一頂大帽子,但這些人真的明白情緒勒索嗎?
Thumbnail
2025/03/28
人人都高喊著個人與自我,只要一個一言不合,就直指人家情勒,給別人扣上一頂大帽子,但這些人真的明白情緒勒索嗎?
Thumbnail
2025/03/21
有時候我也會想,如果我是他,承受的了這樣的打擊嗎?會不會也從此一蹶不振了?還是能夠換一個全新樣貌的心態面對這個世界?
Thumbnail
2025/03/21
有時候我也會想,如果我是他,承受的了這樣的打擊嗎?會不會也從此一蹶不振了?還是能夠換一個全新樣貌的心態面對這個世界?
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
當你要開始進行公司的官網設計,一定會困惑哪些是自己要準備的?而哪些是需要網頁設計公司協助完成的?本文列出每個階段流程、需要注意的事項及簡單案例,讓您快速瞭解相關工作。
Thumbnail
當你要開始進行公司的官網設計,一定會困惑哪些是自己要準備的?而哪些是需要網頁設計公司協助完成的?本文列出每個階段流程、需要注意的事項及簡單案例,讓您快速瞭解相關工作。
Thumbnail
在內容行銷的世界中,找到適合又稱手的工具是每位行銷專員的快樂泉源之一,畢竟這代表能夠花費更少的時間,擁有更好的效率與產能(然後盡早下班XD)。幸運的是,現在有許多免費的創意工具可以幫助你快速製作引人入勝的視覺內容,從而提高品牌曝光和銷售業績。讓我們一起來看看幾個最受歡迎的平台吧!
Thumbnail
在內容行銷的世界中,找到適合又稱手的工具是每位行銷專員的快樂泉源之一,畢竟這代表能夠花費更少的時間,擁有更好的效率與產能(然後盡早下班XD)。幸運的是,現在有許多免費的創意工具可以幫助你快速製作引人入勝的視覺內容,從而提高品牌曝光和銷售業績。讓我們一起來看看幾個最受歡迎的平台吧!
Thumbnail
當使用Google架設網站時,請考慮以下幾點。 目標設定:明確網站目的,選擇適合模板。 設計一致性:統一色系、字體和風格。 內容優化:用吸引力的標題、圖片、影片增加內容價值。 響應式設計:確保內容在各設備良好呈現。 專業域名:購買並設定獨特網域。 SEO優化:優化標題、描述、關鍵字和內部
Thumbnail
當使用Google架設網站時,請考慮以下幾點。 目標設定:明確網站目的,選擇適合模板。 設計一致性:統一色系、字體和風格。 內容優化:用吸引力的標題、圖片、影片增加內容價值。 響應式設計:確保內容在各設備良好呈現。 專業域名:購買並設定獨特網域。 SEO優化:優化標題、描述、關鍵字和內部
Thumbnail
這篇文章介紹瞭如何自動匯出Google廣告名單,並在多種應用情境中促進跨部門的高效合作。文章分享了好處、流程和工具的詳細資訊,並提供相關教學與範本連結,讓讀者能夠直接套用自動化流程。此外,還探討了延伸應用,將Google廣告名單與行銷自動化工具結合的方法,以提高客戶參與度與轉換率。
Thumbnail
這篇文章介紹瞭如何自動匯出Google廣告名單,並在多種應用情境中促進跨部門的高效合作。文章分享了好處、流程和工具的詳細資訊,並提供相關教學與範本連結,讓讀者能夠直接套用自動化流程。此外,還探討了延伸應用,將Google廣告名單與行銷自動化工具結合的方法,以提高客戶參與度與轉換率。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
許多設計師們的優秀作品,常常敗在最後上架的那一個步驟,如果廣告無法順利上架,做得再美再炫也枉然。
Thumbnail
許多設計師們的優秀作品,常常敗在最後上架的那一個步驟,如果廣告無法順利上架,做得再美再炫也枉然。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News