【GTM進階教學】如何使用Google Tag Manager替網站建立Announcement Bar？

前言

當我們在逛某些電商網站時，通常都會看到網站最頂端有一列通知欄（或稱作通知橫幅），上面寫著一些如免運門檻、近期優惠活動、促銷活動等店家希望能夠被消費者優先注意到的資訊，因此也被稱作Announcement Bar（如下圖）。

如果你使用的Wordpress或Shopify等擁有豐富插件且自行編輯前端的架站平台，那麼你可以直接請工程師開發或是花錢購買插件就能夠安裝好Announcement Bar。

然而，如果你使用的是像Shopline這種不開放編輯前端程式碼且無法另外添購插件的平台，就像筆者當初所遇到的情況，我們又該如何替自家的網站建立Announcement Bar呢？

Google Tag Manager是解答！

Google Tag Manager是什麼？簡單來說，GTM是Google官方所提供的一項代碼管理工具，可以讓行銷相關人員只需透過「一個平台」輕鬆地安裝各種追蹤碼到網站並做管理，如Google Analytics、Google Ads追蹤碼；或第三方軟體，如Hotjar。而不必一直麻煩工程師特地打開後台來替你埋放各式各樣的程式碼。

因此，我們只需要寫好一段程式碼，或者說「參考」網路上大大所提供的Code，並套用在GTM上，就能夠輕輕鬆鬆替你的網站建立好Announcement Bar！

*GTM背後的邏輯還是替你把程式碼埋放在後台，只是因為是透過平台管理，所以讓你不會影響到工程師的開發。
*在開始以下教學之前，你還是需要請工程師幫你把GTM的code埋放在後台，如果你不知道該如何幫你的網站串接GTM，可以參考筆者之前所寫的文章：【GTM教學－初階班】如何使用Google Tag Manager串接網站與Google Analytics，除了串接GTM之外，還會教你怎麼透過GTM串接GA，你可以直接動手試試，或是把我的文章給你們家的工程師看。

Announcement Bar樣式

這個步驟，當然你可以直接請工程師幫你開發肯定是會最符合你需求的方式，但如果你不想麻煩他們，那你可以參考以下的教學，你不必要很精通各式各樣的程式語言，但至少能夠看懂基本的前端程式碼HTML、CSS與Javascript。

這邊我就不獻醜我寫的code給大家看了，大家可以到Codepen搜尋announcement bar，並挑一個你喜歡的樣式做爲「參考」。

在挑選樣式的時候，除了配色、動畫效果你喜不喜歡之外，筆者建議還有兩件事情必須特別注意：
*請找同時有PC與Mobile端的code，畢竟使用手機來瀏覽網站的使用者越來越多，如果你挑了一個只有PC端可以使用，但到了Mobile端卻嚴重跑版的樣式，對使用者體驗，絕對是相當扣分的
*通常官網的Announcement Bar都不會只有一則通知，所以也建議找可以顯示多則通知的code，尤其Mobile端的樣式因為網頁的「寬度」較PC端小上許多，該使用跑馬燈或者多行的方式呈現，才不會破壞使用者體驗，也是必須考量的一項重點。

如何透過GTM串接Announcement Bar至我的網站？

選擇好樣式之後，並按著下面的方式做設定，就算是完成囉。

如何測試？

最後，我們該如何測試我們的Announcement Bar是否有安裝成功呢？基本上，在GTM所安裝的任何代碼都會透過「預覽模式」來做最後的確認，所以我們需要點擊右上角的預覽 ➭ 輸入網站網址 ➭ 確認PC與Mobile端的樣式是否有如你所預期的顯示（如下圖），如果有的話，就代表你安裝成功了！

結語

最後，雖然我們能夠透過這樣的方式來替自家網站建立Announcement Bar，但如果每次需要更動Announcement Bar上頭資訊時，我們就必需打開GTM重新做調整，我必須承認並沒有那麼方便，就推薦給想要省省成本，也不想太麻煩工程師的行銷人參考囉。