GTM 變數介紹:網址變數(URL Variable)

透過 GTM 網址變數從網址中擷取參數是相當方便且好用的工具,在無法透過 Data Layer 取得追蹤所需的資料時,可以先行觀察網址是否帶有相關參數,如果有,那就可以透過 GTM 的網址變數類型(URL Variable)來幫助我們獲得所需要的資料。(就不用麻煩工程師幫你推送參數到 Data Layer 了)

例如,假設今天我們的網站上有很多的表單供使用者填寫,在眾多的表單事件中,想要知道使用者是提交了哪個表單,而其中一個表單提交網址如下:

http://mktgholic.local/contact-us/?contact_form=maldive&contact_status=success

這個頁面在網址後面(?之後)帶了兩個參數,一個是表單的名稱「contact_form=maldive」,另一個則是表單是否提交成功「contact_status=success」,此時我們就可以使用 GTM 中的網址變數(URL Variables)來取得這些資料。



GTM 「網址變數」在哪裡?

GTM 左邊介面邊選擇「變數」 > 「新增」使用者自定義變數 > 選擇「網址」類型

在選擇網址變數之後,會看到以下的畫面,在下拉選單中,可以看到幾個不同的網址元件類型,分別是:完整網址(Full URL)、通訊協定(Protocol)、主機名稱(Host Name)、連接埠(Port)、路徑(Path)、副檔名(Filename extension)、查詢(Query)、片段(Fragment)。

這些分別是代表什麼意思?讓我們繼續看下去。


認識網址結構

接下來我們以上圖為例,逐一介紹各元件類型在一段完整網址中所代表的是哪一部分。

完整網址(Full URL)

完整網址代表的就是:http://marketingholic.com/maldive-diving-tour?query=33456,不包含「#」之後的片段(Fragment),因此如果想要取的「#」之後的參數,使用完整網址變數是行不通的。

(有些一頁式網站會以錨點文字的方式讓使用者在同一頁面上不同區塊移動,網址尾端通常也會帶有「#」,因為這樣的做法頁面沒有刷新,不會重新傳送 Page_view 事件給 GA4,所以儘管使用者眼前畫面有變化,但 GA4 並不會收到當前帶有「#」的網址,關於這部分的追蹤方式,可以參考這篇如何追蹤一頁式網站的追蹤方式。)

通訊協定(Protocol)

網址所使用的通訊協定,例如:「http:」或是「https:」,如今所有的網頁應該都是使用「https:」為主,除了安全性問題以外,對於 SEO 也是有相當的幫助。

主機名稱(Host name)

在我們的範例中,代表的是:marketingholic.com,也就是主網域名稱。

連接埠(Port)

在一般的網址中,不太會遇到帶有連接埠的網址,通常是在內部測試網站當中才會出現,網址會長這樣:「http://marketingholic.com:8000/maldive-diving-tour

副檔名(Filename extension)

假設今天要抓取的網址不是當前頁面的網址,而是點擊連結的網址,這條點擊連結網址可能是讓使用者下載 pdf 或是 docx 檔案,而網址可能長這樣:「http://marketingholic.com/maldive-diving-tour-intro.pdf」,那網址變數就會回傳「pdf」。

路徑(Path)

在主機名稱之後,但不包含連接埠、查詢以及片段的網址,在我們舉的例子中,就會是「/maldive-diving-tour」。像是在 GA4 的網頁和畫面報表中,如果選擇維度是「網頁路徑與畫面類別」,網址就會這樣呈現。

延伸閱讀:GA4 初學者指南:認識 GA4 前台介面以及基礎報表!

查詢(Query)

網址中,「?」之後的就是查詢(Query),最常見到的就是如果網址有建立 UTM 連結追蹤(?utm_source=Agroup)、透過 Google Ad 點擊過來的網址(?gclid=3345678)、使用網站的搜尋功能所查出來的結果頁面網址,都會帶有查詢(Query),僅包含「?」之後的但不包含「#」之後的網址,在這邊的範例中就是: 「query=33456

片段(Fragment)

「#」之後的部分就是片段(Fragment),在我們所舉的範例中,就是「wonderland-under-the-sea」。


如何運用網址變數(URL Variables)?

好,現在了解網址結構,也理解網址變數的各種類型代表什麼意思,那我可以如何運用到我的網站追蹤當中?

延續最開頭的範例,假設今天我們網站上有很多表單讓使用者填寫,如果想要知道使用者是提交了哪個表單,而其中一個表單提交網址如下:

http://mktgholic.local/contact-us/?contact_form=maldive&contact_status=success

我可以透過網址變數中的查詢(Query)類型來判斷,使用者是提交了哪份表單,該怎麼做呢?

回到上述新增網址變數的步驟,於下拉選單中選擇網址變數類型為「查詢」,並輸入「contact_form」,這部分必須跟網址「?」之後以及「=」之前的文字完全一樣,這樣才有辦法抓到我們要的表單名稱「maldive」。

完成之後按下儲存,打開預覽模式來到「http://mktgholic.local/contact-us/?contact_form=maldive&contact_status=success」確認剛剛設定的變數是否有抓取到「maldive」這個參數,如果有,即代表設定成功,我們可以變數應用於 GA4 事件當中,或是作為觸發條件。

帶入 GA4 事件當中

假設我們設定了一個提交表單的 GA4 事件,當使用者提交表單之後來到網址「http://mktgholic.local/contact-us/?contact_form=maldive&contact_status=success」,將會啟動 我們設定的「form_submit」GA4 事件,此時可以同時帶入前面設定的網址變數,就可以在 GA4 的報表中知道這個「form_submit」事件是發生在哪一份表單上面。

(關於表單提交事件的設定方式,如果不清楚怎麼做的朋友可以參考這篇文章:如何用 GTM 追蹤網站「表單提交」事件?

設定完成之後,透過預覽模式可以看到在我們提交表單之後「Form_submit」事件有被觸發,也戴上了前面設定的網址變數。

我們也可以更進一步來到 GA4 的 Debug View 中確認,也是得到一樣的結果,查詢(Query)類型的網址變數順利送入 GA4 當中。

最後,不要忘了要到 GA4 後台的自訂定義中去自訂維度,才能在報表中顯示「form_name」。

(這邊是為了示範,所以我們重新定義了表單提交事件以及參數名稱,一般來說,如果 GA4 已經有預設相關的事件以及參數名稱,在沒有特別需求的情況下,我們沿用就可以了)


總結

在這篇文章當中,我們介紹了 GTM 眾多變數類型的其中之一:「網址變數(Url Variables)」,並認識了各種不同的網址變數類型,最後告訴你可以如何運用網址變數來幫助你進行網站上的事件追蹤,例如:了解使用者是提交哪個表單,用來做進一步分析或是廣告活動成效追蹤。

了解網址變數的原理之後,未來如果看到網址中帶有許多你需要的參數,就不需要麻煩工程師幫你把資料推送到 Data Layer,直接透過網址抓取就可以囉!

延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎你看看其它文章,繼續探索(這坑?這地獄?這片樂土?)

同時,如果對於內容有疑問或是建議,也歡迎你留言告訴我們:)