諮詢熱線:02-2369-8858

【GTM入門教學 】學會Google Tag Manager,輕鬆管理網站追蹤碼!

【GTM入門教學 】學會Google Tag Manager,輕鬆管理網站追蹤碼!

最後更新:2021/11/19 作者:Selina
加入好友
學會GTM輕鬆管理網站追蹤碼

想知道網路行銷的成效表現,那就一定要透過埋設程式碼來追蹤網站的數據和流量。在埋碼的過程中,你是否有遇過以下困擾:

  • 看不懂程式碼,求助工程師但常花太多溝通的時間成本?

  • 網站被埋設了許多個追蹤碼,搞不清楚埋了哪些,也不清楚是哪個追蹤碼帶來轉換?

  • 追蹤碼埋得太多,導致網頁載入速度變慢,常常等到抓狂?

如果你有以上困擾,那麼今天要介紹的 Google Tag Manager (GTM) 將會是你最得力的助手!本篇文章將教導你如何輕鬆安裝和設定GTM,以及用簡單的例子帶領你了解 GTM 的觸發條件、代碼、變數等概念,讓不懂程式碼的行銷人也可以自行埋 code,輕鬆管理和追蹤網站數據!

GTM 是什麼?

Google 代碼管理工具 (Google Tag Manager,簡稱 GTM) 是一款強大且免費的代碼管理工具,你可以透過 GTM 集中管理埋在網站上的所有代碼。在安裝完 GTM 後,只要將你需要埋設或更新的代碼都上傳至 GTM,就能輕易地將各種追蹤碼及第三方應用工具安裝到網站中,如此一來,行銷人員或網站分析師可以不用去修改網站的原始碼,不僅減少人工操作的出錯率,也讓追蹤和管理代碼都可以在同個平台上完成,對於不會寫程式碼的行銷人而言可說是一大利器!

→ 透過 GTM 可以集中管理埋在網站上的所有代碼。

 

使用 Google Tag Manager 管理代碼的 3 大好處

前面我們提到,GTM 對於不會寫程式碼的人來說,是相當好用的工具,但我們建議不管會不會寫程式碼,都應該使用 GTM 來管理網站代碼,原因如下

一、GTM 能快速部署追蹤碼

簡單來說,GTM 就如同軍隊總司令一樣,可以一次看到目前所有代碼的運行狀態,讓我們能更輕鬆管理 Google Analytics、Google Ads、Facebook Pixel (像素) 或其他第三方工具等,不管是要更新還是建立代碼都只需要透過 GTM 完成,大幅降低我們需要將許多程式碼一一埋設在網站後台的時間成本,讓我們可以將主要心力投注在核心工作上。

二、GTM 能提升網站載入速度

網站載入速度是影響 seo 排名的重要因素之一,如果在網站上埋設大量的追蹤碼,會增加網頁讀取的時間,導致使用者體驗不佳,但透過 GTM 管理的代碼並不會被寫在網頁的 html 當中,因此不會拖累網站載入速度,也不用擔心會影響 seo 的成效。

三、GTM 能減少代碼埋錯的情況發生

如果是直接在網站後台埋碼,要想檢驗追蹤碼是否埋設成功,必須要先發布網站後才可以進行測試,但 GTM 有提供預覽模式,讓我們能在代碼發布前事先偵錯並即時調整。此外,GTM 會紀錄過去所發佈的所有版本,如果發現更新的代碼有誤,可以立即還原當初的版本,非常方便。

 

Google Tage Manager 架構組成元素介紹

→ Google Tag Manager 的基本組成元素包括:Accounts(帳戶)、Containers(容器)、Tag(代碼)、Triggers(觸發器)。

一、帳戶 Account

帳戶是 GTM 中最高的層級,公司或網站名稱就是一個帳戶,底下管理著一個或多個網站,通常情況下每間企業只需要一個帳戶即可管理旗下所有的網站。如果你有多個網站需要埋設各自的代碼,可以在帳戶底下創建多個容器(Container),這樣就可以同時追蹤不同網站的行銷成效。

點選 GTM 頁面右上的「建立帳戶」來創建新帳戶,如上圖。

二、容器 Container

容器就是你擁有的網站,一般來說一個容器會對應一個網域,對應的容器可以放置多組代碼 (Tag) 及觸發條件 (Trigger),這樣就不需要在每個網頁都放入程式碼追蹤,大幅節省埋設代碼的時間成本。

若要建立新容器,點選頁面上齒輪符號旁的選單,選擇「建立容器」,如上圖。

三、代碼 Tag

代碼 (Tag) 即為追蹤事件的程式碼片段,如 Google Analytics、Google Ads 的追蹤程式碼,或是第三方應用工具提供的 Javascript 程式碼片段,這些程式碼各自具有不同的用途,最常見的用途就是回傳訊息,你可以把代碼想成是分流器,想透過哪個行銷工具蒐集數據,就將其設為代碼。

若要新增代碼,請先選擇左欄的「總覽」,並點選「新增代碼」,如上圖。

四、觸發條件 Trigger

觸發條件用來定義代碼被觸發的規則,由變數 (Variables)運算符號 (Operators) 值 (Values) 所組成。

設定觸發條件第一步,要選擇觸發條件的類型,比較常用的例如:網頁瀏覽、網頁點擊、元素可見度、表單提交等,更詳細的觸發條件類型及定義可以參考Google官方說明

  • 變數 (Variables)

變數為定義觸發條件的執行準則,分為「內建變數」及「使用者自訂變數」兩種。「內建變數」是系統預設,例如點擊網址 (Click URL)、點擊類別 (Click Classes) 等,只要簡單點選便可啟用;如果內建變數當中沒有符合需求的變數,可以在「使用者自訂變數」區塊新增自己定義的變數。

  • 運算符號 (Variables)

運算符號用來定義變數與值之間的關係,兩者之間一定要對應得上才能確保觸發條件能順利運作,常見的運算符號如等於 (equals)、包含 (contains) 或未包含 (doesn’t contains)等。

  • 值 (Values)

具體定義出變數的內容,例如出現特定網址或是數字時,便會啟動這項觸發條件。

 

了解 GTM 的架構組成後,讓我們透過以下這個簡單的例子來說明會更有概念:

舉例來說,如果想要追蹤點擊「會員註冊」按鈕的事件,可以選擇「點擊-所有元素」作為觸發條件類型,詳細設定如下:

  • 觸發條件類型:點擊-所有元素

  • 這項觸發條件的啟動時機:部分點擊

  • 觸發條件:

這裡要設定兩個條件,如下

  • 變數 (Variables):Page URL (網頁網址)

  • 運算符號 (Operators):包含

  • 值 (Values):會員註冊的頁面網址,如 https://www.example.com/register

以及

  • 變數 (Variables):Click Text (點擊文字)

  • 運算符號 (Operators):包含

  • 值 (Values):行動呼籲按鈕的文字,如例為「Submit」(提交)

如果兩個條件同時符合,才會觸發此條件,也就是說,當網站訪客在會員註冊的頁面上點擊包含Submit的行動呼籲按鈕時,這個觸發條件就會被啟動,並回傳訊息到我們串接的行銷分析工具。

 

Google Tag Manager 如何安裝?簡單 3 步驟開始使用 GTM

將 GTM 安裝到我的網站會不會很困難?一點也不!只需 3 步驟便能簡單完成,讓你輕鬆就能開始使用這款強大的代碼管理工具,步驟如下:

步驟一、創建帳戶及容器

登入 GTM 後,要先創建帳戶,再來設定容器,並選擇目標廣告平台。輸入好資訊後點選建立,會跳出 Google 代碼管理工具服務合約條款的視窗,勾選接受服務條款,就會進到安裝 Google 代碼管理工具的介面。

步驟二、將 GTM 程式碼貼到網頁原始碼中

建立完成後,GTM 會提供一段程式碼,依照指示將程式碼埋入要追蹤的網站頁面原始碼中,就完成安裝 GTM 囉!

步驟三、檢查 GTM 是否安裝成功 - Google Tag Assistant

安裝完成後,記得要檢查 GTM 是否有安裝成功,這個步驟非常重要,可不能忽略了!這裡要介紹大家一個實用的 Chrome 擴充工具 - Google Tag Assisatnt,使用這項工具可以快速檢查網站上的各種代碼標籤是否正確且成功地安裝完成。

點選「Record」並重整頁面,就可以看到網站上安裝的所有代碼標籤,這時就可以檢查是否有抓到相對應的 GTM 代碼,如果代碼相符就代表順利安裝好 GTM 囉!

 

GTM 串接 Google Analytics - 以網頁瀏覽為例

每個網站幾乎都要安裝 Google Analytics 來分析行銷的成效,在過去,行銷人得在 GA 後台拿到追蹤碼,並且轉交給工程師進行安裝,不過現在你已經對 GTM 有了初步的概念,這些步驟你也可以自己輕鬆完成,以下我們將教你如何啟動 GTM 中 GA 最基本的網頁瀏覽 (Page View) 功能。

  • 快速瀏覽 GA 網頁瀏覽設定

       1. 代碼 (Tag):Google Analytics (分析):通用 Analytics (分析)

       2. 觸發條件 (Trigger):網頁瀏覽

       3. 變數 (Variable):建立新的 Google Analytics 設定變數

步驟一、新增代碼,選擇「網頁瀏覽」追蹤類型

因為我們想在 GA 報表當中得知使用者在我們整個網站的瀏覽情況,因此追蹤類型要選擇網頁瀏覽,接著在 Google Analytics (分析) 設定下拉選單選擇「新增變數」。

步驟二、建立新的 Google Analytics 設定變數

這個步驟是為了將 GA 和 GTM 綁定,因此需要先新增一個 GA 設定變數,將 GA 追蹤編號儲存到設定變數裡,這樣 GTM 才知道要把資料送到哪一個 GA 帳號

GA追蹤編號路徑:GA 後台 > 管理 > 資源 > 追蹤資訊 > 追蹤程式碼

複製追蹤 ID 後,貼到 GTM 變數設定的「追蹤編號」欄位中並儲存,即完成代碼設定,日後要選擇 GA 作為代碼時,可以直接套用這個設定變數,不用再重新輸入一次。

步驟三、設定觸發條件:All Pages

點擊下方觸發條件,然後選擇「All Pages」即可。這樣 GA 最基本的 PageView 功能就順利啟動啦!

步驟四、檢查 PageView 功能是否啟用成功

完成建立代碼後,一定要檢查代碼是否有埋設成功,可以利用上面提到的 Google Tag Assistant 做檢查,或是我們也可以到 Google Analytics 的即時報表裡來查看是否真的有收到數據,路徑: GA 後台 > 即時 > 總覽,如下圖所示,我們可以看到目前有 1 位活躍使用者,代表數據有抓成功。

現在你已經了解 Google Tag Manager 強大的功用,也學會 GTM 基本的安裝及串接 GA 流程,接下來就將所學應用到你的行銷專案裡吧!

 

 

KPN奇寶也將秉持著專注為你的精神,持續提供更健全完整的數位行銷服務,包含網站優化、SEO、Google 關鍵字廣告、FB 廣告成效優化等。 

若您已經在執行數位行銷,卻遲遲找不出成長的突破點?別擔心,歡迎聯繫我們,將會有專業人員與您探討如何應對!

 

還想了解更多各類數位行銷資訊的話,歡迎訂閱電子報、加入奇寶Line好友,第一時間接收最新資訊!

後續我們台北移動學苑還會陸續舉辦各類型的行銷課程,也歡迎有興趣的行銷人可以加入我們臉書粉絲團,在粉絲專頁上與我們討論喔!

Facebook粉絲專頁:

 

歡迎轉載KPN奇寶部落格相關文章,在轉載前請先詳閱著作權聲明轉載原則

 

圖片來源:Business photo created by jcomp - www.freepik.com

本文作者:Selina

責任編輯:Carol

你可能也會喜歡
熱門文章

行銷STP 品牌市場定位:報紙廣告實戰演練

先了解自己,才能步入正軌,成長茁壯,發揚光大。 你了解自己的產品服務嗎? 在艱難的行銷道路上,是否開始迷失方向? 好的定位讓您上天堂,沒有明確定位則會讓你陷入泥淖,越陷越深離目標越來越遠。   今日來分享KPN奇寶廣告優化績效師日常- ....

2021完整SEO教學,一篇就懂SEO搜尋引擎優化操....

SEO可以帶來什麼效益? 就是要讓顧客第一眼就看到你!因為您的顧客都在Google、Yahoo上,透過『關鍵字』搜尋產品,因此做好網站SEO帶來的好處有: 網站流量的增長 品牌、商品知名度的拓展與形象建立 因應搜尋意圖的資....

在你的FB粉絲專頁新增Instagram頁籤!

不知道你有沒有注意過,有些粉絲專頁上會有Instagram的應用程式。 如果你也是常使用Instagram分享圖片做行銷的廠商,可以一起看看究竟要如何連結這兩種社群平台喔! 目錄 登入FB 搜尋「Instatab」 新增粉絲專業 請點選「小齒輪圖示」 選擇「編輯設定....

描述標籤(Meta Description)的SEO優化

本文分四個段落加以介紹: 目錄 什麼是Meta Description? meta description是Google排名因素之一嗎? 網頁摘要是如何產生的 如何優化meta description 具備敘述性、吸引使用者 每頁使用獨特的meta description 關於社群分享有一點可以注....

延伸閱讀

如何將電子郵件營銷服務(Mailchimp)與Googl....

如何將電子郵件營銷服務(Mailchimp)與Google Analytics結合   鑒於下星期台北移動學苑的主題是「網路行銷入門必修」課程,其中會提到SEO、Google Analytics以及EDM經營的分享,所以破點梗,下星期EDM分享的部分,會推薦大家使用一款郵件營銷服務-....

利用Google Analytics追蹤電子商務報表

經營電子商務網站最重要的是績效追蹤,如何善用 Google Analytics(簡稱 GA)做績效追蹤?檢視網站的轉換率,並觀察重點指標的 KPI 數值,只要根據以下步驟設定,就可以完成電子商務網站追蹤!   GA 追蹤電子商務三步驟: 1. 交易幣值設定 ​因為 ....

優化廣告成效從Google Analytics歸因開始

一個成功的行銷策略,就是可以在對的點持續擴張放大,藉由 Google Analytics (GA) 與 Google Ads 歸因幫你看懂消費者的消費歷程及找到有效的轉換點,讓廣告用對的方式、放在對的位置,加強對的模式,達到更佳的成效,因此使用合適的歸因模式,可以幫助你有效找出關....

好還要更好!優化廣告成效從歸因找出加強點....

在上篇文章優化廣告成效從Google Analytics歸因開始中,我們可以了解歸因模式的概念,以及不同歸因模式的適用時機,及其計算功勞的比例,運用歸因模式的數據調整廣告,藉由機器學習的內容優化廣告,讓成效好還可以再更好!   轉換搜尋歸因模式的優化準則 ....

Copyright © KPN SEO 2020. All Rights Reserved / 台北市大安區羅斯福路三段301號8樓 02-23698858 service@kpnweb.com

線上客服