koodata

View Original

懶人包 - 數位小白兔變大神#03 告訴你 8 個步驟搞定 GTM

埋程式碼不再是噩夢!就跟著酷咖啡一步一步來吧

先前的文章替大家整理了現今臺灣熱門的數位廣告媒體外,也跟大家分享了數位廣告是如何追蹤官網成效的原理,並介紹了 Google Analytics 這個免費又好用的流量監測工具,也帶著大家完成初步的設定。但是還沒完!我們在上篇文章中提到,設定 Google Analytics 除了曾介紹過的「手動安裝」跟「透過網站製作工具或 CMS 置入」之外,私心還有第三種最好用的方法「使用 Google 代碼管理工具」。

koo.café 不藏私,將在這篇文章中補完如何使用 Google 代碼管理工具設定 Google Analytics 的方法。但在開始之前,先替自己泡杯咖啡,然後再跟我們一起看下去吧!

上篇回顧:懶人包 - 數位小白兔變大神#02 一分鐘學會設定 Google Analytics

Google Tag Manager?那是幹嘛的?能吃嗎?

別急,在介紹如何使用 Google代碼工具設定 Google Analytics 之前,我們覺得有必要讓你先好好認識它。這樣子你才會明白為何 Google 代碼工具是我們私心建議的最佳解決方案。事實上,「Google Tag Manager」或許才是它較廣為人知的名字,且更多人僅簡單地稱它做「GTM」。且它絕對是你成為數位大神一定要熟悉的工具。

還記得我們先前提到「數位廣告 / 工具監測成效」主要的做法是利用各媒體後臺所產生的程式碼埋在官網原始碼的特定部位嗎?

前情提要:懶人包 - 數位小白兔變大神#01 數位廣告都怎麽監測成效?

當你看完文章慢慢回憶起「什麼是埋 code 」以及「為什麼要埋 code 」之後,試想你可能會碰到以下的狀況:當好不容易網站管理人員埋設好「 Google 關鍵字廣告的 code 」,但過沒兩個月又要埋設「 Facebook 廣告像素」、再過沒多久可能又要埋設「 LINE 廣告的 code 」、接著可能是「領英廣告」,然後還有「 Google Analytics 」的程式碼.......

在古早時代,當我們要嘗試一些新媒體或新工具的時候,都要針對這些新平臺埋設不同的 code。這會發生兩個情況,其一是當官網埋設的 code 越多,整體網站原始碼就會更繁瑣雜遝、另外也增加與網站管理人員的溝通成本。而如果你有經歷過跨部門工作、或是跟客戶端的網站工程師信件往來,你應該非常瞭解整個過程與花費的時間都會讓人感到非常的不暢快(對方也有既定的工作要處理嘛)。

當然可能有少部分的專家同時身兼網站管理與廣告優化師,那溝通這塊就不會是你的痛點。但就算是如此厲害的你,應該也不會喜歡整個網站頁面被一堆「哩哩摳摳」的轉換 code 佔據,失去了你原先撰寫語言佈局的美感吧?

GTM 讓埋設、管理轉換碼變得更快速簡單

現在我們說回 GTM。它的誕生解決了先前所述的所有問題。我們能夠藉由 GTM 來管理跨平臺媒體的 code,同時也能夠不藉由他人之手,只需要用 GTM 就可隨時新增或調整目前既有的 code 與追蹤事件!只要我們先把 GTM 的 code 埋在官網,而後只要開啟 GTM 的管理平臺,就能隨時針對不同的廣告媒體做埋設code或是新增事件的動作了。

舉例來說,你可以想像現在正處在一個公共空間生活或辦公,這個空間就像你的官網原始碼。如果你想要在這個空間裡面新增一些私人物品或擺設(各平臺的 code ),你必須要經過房東(網站後臺管理人員)同意,且必須經過他親自幫你放置這些物品。而 GTM 就像是一個專屬於你的私人櫥櫃,當房東幫你把這個私人櫥櫃安裝好,之後你想要新增什麼物品或更動裡面的內容,全都由你自己處理。

更棒的是,你不必懂什麼裝潢專業(撰寫網站語言),就能自由新增或調整櫃子裡的物件與擺設(code),是不是很方便呢?

圖片說明:Google Tag Manager 的代碼設定畫面

現在可以告訴我怎麽用 GTM 設定 Google Analytics 了嗎?

沒問題,現在你已經明瞭了 GTM 的好用之處,我們就拿 Google Analytics 作為範例,跟大家說明 GTM 實際的應用方式吧!

  • Step1. 先在官網埋設 GTM,主要做法是在主畫面的「管理」頁籤中,選擇「安裝代碼管理工具」,接着複製程式碼按照說明埋入到官網的每個網頁中

  • Step 2. 如果 GTM 的程式碼埋設好之後,我們就回到 GTM 的首頁來選擇「新增代碼」

  • Step3. 接下來你會看到設定代碼的畫面,首先我們先點擊 紅框 1「代碼設定」的按鈕,然後畫面右方會跳出一些選項供我們選擇想要設定的代碼類型,接着我們選擇 紅框 2「 Google Analytics (分析)」,最後在從子選項中選擇 紅框 3 「 Google Analytics (分析):GA4 事件 」

  • Step4. 選擇好代碼之後我們會需要填入「評估 ID 」,這個評估 ID 簡單講就是你 Google Analytics 串流網站的編號,接下來讓我們進入 GA 尋找「評估 ID 」吧!

  • Step5. 我們回到 Google Analytics 主頁。點擊左側功能表最下方的「齒輪」圖示,接著在下拉式選單中選擇「資料收集和修改」底下的「資料串流」。進入資料串流的頁面後,點擊右側「新增串流」的按鈕,接著選擇「網站」。

圖片說明:依序點擊紅框處,讓你的 Google Analytics 人生揭開精彩序幕。

接下來我們會進入到下圖這個頁面,基本上填入官網網址以及串流名稱,之後按下下方藍色的「建立串流」按鈕。

「建立串流」大功告成之後,你將會看到網頁串流的一些資訊。瞧!評估 ID 不就出現在這兒了嗎?快快把他複製起來。填入 Step4 欄位的空缺即可。至於另外一個名爲「事件名稱」的空格,因爲主要是網頁流量監測的部分,所以填入「 Pageview 」即可。

  • Step6. 「代碼設定」完成之後,我們趕緊來點擊下方的「觸發條件」。接下來選擇觸發條件選單裏面的「 All Page 」就搞定囉。

圖片說明:選擇 All Pages 的意思是只要瀏覽官網上的任何頁面,這個 Google Analytics 的代碼就會開始運作,設定完成後千萬記得儲存噢!

  • Step7. 然後回到主畫面右上角點擊「提交」(下圖紅框處),就大功告成了!

  • Step8. 最後我們可以回到 Google Analytics 的主畫面看下即時狀態分析,如果有抓到數據就代表埋設成功!真是太值得恭喜了!

GTM 的妙處不只如此 你還得知道更多......

至此,你已經對 GTM 有初步的瞭解了。雖然可能對上面設定的名詞與原理尚不太熟悉(例如那個 *「觸發條件」跟 **「代碼」)但起碼是知道 Google Analytics 如何埋設的程度。這下子你應該感覺到自己已經不是昨天還對這些知識一無所知的數位小白兔了,似乎人生都充滿了希望才對。

當然 GTM 可以設定的東西還有很多,包括 Google 、 Facebook 等廣告的轉換 code、以及 Google Analytics 記錄官網多種事件的程式碼,都可以利用 GTM 簡單完成。先別急,讓小編喘口氣,我們之後會針對 GTM 以及其他數位媒體有更多的教學與說明!如果你有什麼想要迫不及待想解密的工具,或是針對數位行銷的問題也歡迎留言跟我們分享。

記得持續關注 koo.café ,我們會讓你用一杯咖啡的時間,啓發你對數位領域的全新思考噢!

鎖定koo.café專欄,讓你從數位小白兔變大神!








• • •








Add us on LINE
官方帳號 →

Follow on Facebook
粉絲專頁 →