Google Tag Manager 教學:如何追蹤按鈕點擊

上一篇介紹了如何透過Google Tag Manager設定Google Analytics,本篇 GTM教學 將深入淺出,從如何追蹤你網站上所有的訪客瀏覽,到如何追蹤網站上的事件以及點擊。在分析網站的訪客行為,我們可能會需要分析網站上的各種點擊,像是搜尋按鈕、加入購物車、註冊會員等等,這些都是我們想要知道的按鍵點擊,這些行為我們都將之稱為事件,現在就讓我們來看看,如何透過GTM將這些事件傳送到Google Analytics吧

本篇是假設你已經擁有Google Analytics和GTM帳戶,且相關設定都已經完成。如果你還不知道如何透過GTM設定Google Analytics,請參考CH1

GTM教學 :按鈕追蹤的步驟簡單說明

  • 首先,建立一個通用的點擊觸發條件
  • 接著回頭更明確地定義觸發條件,讓它可以只對我們要的button觸發
  • 接下來,建立用來傳送資料給Google Analytics的代碼
  • 最後就可以用上述觸發條件,觸發代碼

第一步、 建立觸發條件

gtm教學 - 建立觸發條件

先到GTM點選左欄觸發條件,新增一個觸發條件

這邊將之命名為Generic Click Trigger

因為一開始要設定的觸發條件是通用的,因此設定的條件越廣泛越好,所以選擇點擊的「所有元素」。

點擊則是一樣選擇比較廣泛的「所有點擊」

接著到變數的內建變數,確認在變數的設定部分,所有點擊是啟用的。

這個部分預設是沒有啟動的,所以點擊設定

勾選後就啟用了,這個部分的設定只要做一次

接著啟用預覽功能,並前往要追蹤的頁面,點擊要追蹤的按鈕

在網頁下方就可以看到,Google Tag Manager的左欄出現gtm.click,並顯示Tags Fired On This Event 是None,因為目前我們並未針對點擊設定任何事件。

查看變數的部分,可以看到有Click Classes、Click Element…,這些變數可以用來進階篩選到我們想要觸發的唯一條件。

你可以點擊頁面的不同按鍵,然後檢視gtm.click的變數,看哪些變數產生變化,在此範例我們要追蹤不同搜尋欄位的搜尋button點擊,因此選用click element

第二步、 設定篩選條件,更明確定義觸發條件

接著我們回到GTM重新設定剛剛設好的Generic Click Trigger

gtm教學 - 觸發條件的篩選條件

將tag 重新命名,然後將觸發條件設定為Some Clicks,在這邊我們設定的是Click Element,值要包含tab2

第三步、 新增代碼

接下來要將這個trigger連結到我們要的event,所以前往代碼,新增一個代碼

這邊將代碼命名為GA-Event-Homepage Search tab2,選擇代碼類型為通用Analytics(分析)

gtm教學 - 新增代碼

追蹤類型選擇「事件」,類別命名為Button Clicks,動作命名為Click,標籤為了讓他能夠動態自行抓取網頁的值,點選+符號選擇內建變數,因為我們要指定追蹤哪一個頁面的按鍵,所以選取page path

第四步、 使用剛剛設定好的觸發條件,觸發這個事件代碼

可以看到剛剛設定好的Homepage Search Tab2,選取後儲存代碼

接著啟動預覽功能,檢視網頁的設定狀況

可以看到,設定的事件 已經在這個頁面觸發。

接著到GA查看,即時事件

可以看到,即時報表的事件中,事件類別Button Clicks ,有一個事件動作Click

確認設定無誤後,就可以發布了。

Google Tag Manager 教學(一) :無縫接軌移轉GA到GTM
Google Tag manager 教學(二): WordPress追蹤輕鬆上手
Google Tag Manager 教學(三):如何追蹤按鈕點擊
Google Tag Manager 教學(四): GTM 加強電子商務 追蹤

Close Panel