---
# System prepended metadata

title: 【GTM 行為追蹤】

---

# **【GTM 行為追蹤】**

:::info
- 創建練習網站
- 建立GTM帳戶，設置連接GA4
- 總覽
- 代碼
- 觸發條件
- 變數
:::

<br/>

# 創建練習網站

這次我使用 [localwp](https://localwp.com/)，wordpress的地端
按下載
![螢幕擷取畫面 2024-07-07 153414](https://hackmd.io/_uploads/BkXfSTwPA.png)

安裝好後打開，點「Create a new website」
![螢幕擷取畫面 2024-07-07 154839](https://hackmd.io/_uploads/B1oPupvDA.png)

![螢幕擷取畫面 2024-07-07 154914](https://hackmd.io/_uploads/HkFyKTvv0.png)

![螢幕擷取畫面 2024-07-07 154935](https://hackmd.io/_uploads/ryn1YawvA.png)

![螢幕擷取畫面 2024-07-07 154940](https://hackmd.io/_uploads/SyMgtavvA.png)

![1720338631460](https://hackmd.io/_uploads/HJ_etTvPA.jpg)

等待下載wordpress後，會出現下面的畫面，點 「WpAdmin」會跳到網頁，輸入剛剛設定的帳密，就會進到後臺
![螢幕擷取畫面 2024-07-07 155350](https://hackmd.io/_uploads/HyLCFavDC.png)

![螢幕擷取畫面 2024-07-07 155507](https://hackmd.io/_uploads/rk3gc6PPR.png)

> 我使用別人的網站資料檔來改，需要使用外掛的搬家插件
All-in-One WP Migration and Backup
![螢幕擷取畫面 2024-07-07 160004](https://hackmd.io/_uploads/HyOMjpPPR.png)
> 後臺「外掛」-「安裝外掛」-「上傳外掛」，把插件檔案上傳並啟用
![螢幕擷取畫面 2024-07-07 160104](https://hackmd.io/_uploads/Syz7hTDwR.png)
![螢幕擷取畫面 2024-07-07 160353](https://hackmd.io/_uploads/r1EMhaDPC.png)
![螢幕擷取畫面 2024-07-07 160412](https://hackmd.io/_uploads/r1uz3pvDC.png)
> 匯入網站資料檔，再重整重新登入就成功了~
![螢幕擷取畫面 2024-07-07 160901](https://hackmd.io/_uploads/BkPUa6vPA.png)

>安裝WP CODE外掛，之後要放置全域代碼
![螢幕擷取畫面 2024-07-07 161751](https://hackmd.io/_uploads/r1oUyRwwR.png)
![螢幕擷取畫面 2024-07-07 162026](https://hackmd.io/_uploads/ryO1eAwDC.png)


>假設只要設置ga串流
![螢幕擷取畫面 2024-07-07 162230](https://hackmd.io/_uploads/rJSwlAww0.png)
![1720340639322](https://hackmd.io/_uploads/r152xAwPR.jpg)
![1720340738602](https://hackmd.io/_uploads/S1cGZCDvR.jpg)

但因為我想用GTM裝，因此下面先建立一個GTM帳戶

<br/>

# 建立GTM帳戶，設置連接GA4

![螢幕擷取畫面 2024-07-07 173205](https://hackmd.io/_uploads/B1EAgkdP0.png)

![螢幕擷取畫面 2024-07-07 173355](https://hackmd.io/_uploads/H1gQ-1_P0.png)

進到Google Tag Manager建立帳戶後，會出現代碼，要埋進網頁head、body，儲存，這樣之後就可以直接用GTM安裝所有代碼了
![1720281671885](https://hackmd.io/_uploads/HyB55kPPC.jpg)

![1720345034388](https://hackmd.io/_uploads/r1WJM1uvC.jpg)

回到GTM，點右上「預覽」
![螢幕擷取畫面 2024-07-07 183103](https://hackmd.io/_uploads/Hy55RJ_vR.png)

如果有安裝成功，會跳出網站及下面的畫面，有做任何的操作，左方都會即時顯示
![螢幕擷取畫面 2024-07-07 183055](https://hackmd.io/_uploads/HJziA1dwR.png)

回到GA4，「資料串流」，複製評估ID
![1720348541493](https://hackmd.io/_uploads/HJ6j1eOPA.jpg)

再回到GTM，點「新增代碼」
![螢幕擷取畫面 2024-07-07 183721](https://hackmd.io/_uploads/rJnjle_vC.png)

儲存
![1720348778196](https://hackmd.io/_uploads/rk6yWg_D0.jpg)

![螢幕擷取畫面 2024-07-07 184019](https://hackmd.io/_uploads/Syle-luDA.png)

再點選一次「預覽」
有出現剛剛設定的tag就代表GTM有成功連結到GA4，就可以發布了
![1720349137788](https://hackmd.io/_uploads/B1NJMxOPA.jpg)

<br/>

# 總覽

如果我想追蹤網頁某一顆按鈕，在js找到id
「新增代碼」- 設置觸發條件、代碼設定
![螢幕擷取畫面 2024-07-07 191423](https://hackmd.io/_uploads/HkzeYedD0.png)

![1720350892666](https://hackmd.io/_uploads/B1UAOeuDC.jpg)

![螢幕擷取畫面 2024-07-07 191506](https://hackmd.io/_uploads/BkcA_gdPC.png)

之後「預覽」，可以看到有成功被偵測到
![螢幕擷取畫面 2024-07-07 194538](https://hackmd.io/_uploads/ryreeZ_DR.png)

如果我想知道使用者離開網站會去哪(也許是廣告、別的網頁快捷鍵)
「新增代碼」- 設置觸發條件、代碼設定

下面要多設置「事件參數」，可以參考 [Google Workspace 管理員說明_規則運算式的語法](https://support.google.com/a/answer/1371415?hl=zh-Hant)
![螢幕擷取畫面 2024-07-07 205134](https://hackmd.io/_uploads/HJnklMdvR.png)

![螢幕擷取畫面 2024-07-07 205256](https://hackmd.io/_uploads/BkUyxGODR.png)

可以看到點出去的路徑
![1720357085851](https://hackmd.io/_uploads/S1mbWMuwA.jpg)

可以回到GA4 【Admin 管理】#「資源設定 Property settings」-「資料顯示 Data display」-「自訂定義 Custom definition」，把設置好的事件參數加到自訂維度(維持永久)中

![螢幕擷取畫面 2024-07-07 210142](https://hackmd.io/_uploads/B1O2zGuwC.png)

<br/>

# 觸發條件
上面設置過的代碼、出發條件，都會出現在這
![螢幕擷取畫面 2024-07-07 194716](https://hackmd.io/_uploads/ryV8xWOv0.png)

<br/>

# 代碼
上面設置過的代碼、出發條件，都會出現在這
![螢幕擷取畫面 2024-07-07 194708](https://hackmd.io/_uploads/SJ_8xZuPC.png)


<br/>

# 變數
![螢幕擷取畫面 2024-07-07 180620](https://hackmd.io/_uploads/rkRjOkdDR.png)

每次都要設置觸發條件滿麻煩的，因此使用變數，一次勾選多種類型
![螢幕擷取畫面 2024-07-07 195459](https://hackmd.io/_uploads/H187f-_DA.png)

「預覽」-「Virable」可以看到click text 會顯示我按的按鈕名稱
![螢幕擷取畫面 2024-07-07 195705](https://hackmd.io/_uploads/HkqpGZOP0.png)


