如何用 GTM 設定「外部連結追蹤事件」追蹤離開網站的點擊?

追蹤網站外部連結(outbound link click),可以說是數位行銷中網站分析最常見也最需要的追蹤事件,更是很多剛開始使用 GTM 的朋友最先用到的設定,而使用情境通常會是這樣:

假設今天公司的網站與外部公司合作,由公司的網站(你可能是媒體、或是部落客)協助進行引流,引導進入公司網站的使用者前往合作夥伴(例如:某商品購買頁面、某銀行信用卡、保險業)的網站中進行下一步。

如:購買註冊開戶或是填寫資料等屬於轉換層級的動作 。

一般來說,我們不會知道網站使用者從網站離開之後,接下來在對方網站的行為(除非合作夥伴有開放給你他們網站 GA 權限或是願意讓你放置 GA4 評估 ID 在他們家網站,但基本上是不可能的,畢竟,誰會希望自家網站狀況被看光光呢!?)。

所以你只能透過觀察自家頁面有多少人點擊了「離開你家網站的外部連結」,接著與合作夥伴進行數據比對,在合作期間,自家公司的網站為合作夥伴網站帶來了多少流量。

為了達到上述目的,我們必須透過 GTM 設定一個 GA4 事件,將使用者點擊外部連結行為作為觸發條件,觸發後發送 GA4 事件代碼給 Google Analytic 4,同時將「點擊文字」還有「連結網址」參數一起傳送出去,便可以了解使用者是點擊的哪個外部連結以及觀察與合作夥伴的成效表現,情境如下:

  1. 當使用者點擊網站外部連結時
  2. 觸發 GTM 中的 GA4 事件代碼
  3. 傳送事件名稱+相關參數到 GA4
  4. GA4 接收資料以便用於日後分析

接下來的內容我們會介紹如何完成 GTM 事件代碼的設定,因此會不斷圍繞在代碼觸發條件以及變數,如果對這部分尚不熟悉的朋友,可以先閱讀這篇對於 GTM 這三大重點項目介紹的文章



我們再來定義一次需要追蹤的行為流程:
(BTW,在進行設定之前,做好流程定義並與團隊、主管以及合作夥伴確認是很重要的事情,以免設定半天,最後結果不是公司所需要的。)

當使用者在自家網站內點擊的外部網址時,觸發 GA4 事件,並將該事件名稱+相關參數傳送給 GA4。

觸發條件為:當點擊的 URL 非自家網域時

相關參數:「點擊時的文字」以及「點擊時的 URL 網址
(可視追蹤需求調整)。

  1. 首先於 GTM 變數介面新增一個「使用者定義的變數」


  2. 選擇變數類型為「自動事件變數」


  3. 於變數類型的下拉選單中,選擇「元素網址」,元件類型選擇「出站」

    下方聯盟網域的部分,是當你有特定的合作夥伴連結如果不想被視為外部連結,在這邊填入該合作夥伴網址。

    接著為此變數命名,取名字很重要,這部分請將其命名為可以一目了然的名稱,未來接手的人也方便閱讀。(這可是積陰德啊,命名不好,未來接手的人心情可能也會不好,尤其是當你沒親手交接的話)


  4. 接著前往代碼設定介面,新增一個 GA4 事件代碼來追蹤出站連結點擊的行為。

    代碼類型:選擇 GA4 事件,畢竟我們要傳送事件與參數去 GA4。

    設定代碼:這應該不用多說,選你要送去的那個 GA4 評估 ID。(如果是不知道如何安裝 GA4 評估ID 的新朋友,可以參考這篇文章

    事件名稱:取個簡單易讀的,英文最好,這是會在 GA4 報告中出現的名稱。(當然你也可以俏皮一點,命名為:「有人點擊外部連結,離開你的網站啦!」)

    事件參數:依你的業務需求設定,這邊的「值」選擇內建變數點擊按鈕的文字(Click Text)以及該點擊按鈕連結網址(Click URL)

    參數名稱也請好好命名,這也是會出現在 GA4 報告當中的,未來在看 GA4 報告時,只要依序展開事件,就可以知道是點擊了哪個按鈕與網址連結。

    (GA4 有針對連結網址以及連結文字預設了參數名稱,分別是 link_url 以及 link_text,如果這個命名與你的需求是相同的,建議沿用該參數名稱就可以,就不需要另外自定義維度,直接找到 GA4 報表中的維度「連結網址」以及「連結文字」就可以。)



  5. 設定該代碼觸發條件,就是用我們 Step 1 設定的自動事件變數「aev – outboundlink -tracker」來觸發上面設定的代碼,當此變數為 true 時,代碼啟動,發送事件到 GA4。

    觸發條件類型:點擊 – 僅連結
    啟動時機:部分的連結點擊
    觸發條件:選擇剛剛的自動事件變數「aev – outboundlink tracker」,當偵測到點擊的連結為外站連結時,此變數的「值」就會為 true,當變數的「值」為 true 時,代表條件符合。


  6. 搞定,接著使用預覽模式進行測試,確認點擊外部連結網站時,是否有啟動設定的 GA4 事件代碼,並前往 GA4 的即時報表或是 Debug View 中,觀看事件名稱「Outbound_link_click」是否有顯示,並且帶出 Click_Url 以及 Click Text 的參數。

    延伸閱讀 >> 如何用 GTM 「預覽模式」檢查代碼有無設定成功?





  7. GA4 即時報表中,出現了剛剛設定的事件名稱以及參數名稱。

用 GTM 「點擊元素」作為觸發條件

如果你覺得設定變數很麻煩(其實也才多幾個步驟),還有另一種簡單的做法,我們可以直接透過該連結上面的點擊元素,來進行事件觸發。

  1. 省略上一段步驟 1 到步驟 3 的部分,直接用 GTM 內建的變數「Click URL」「Click Text 」「Click Element」或是「Click Classes」等作為觸發條件的判斷即可。

    下圖都是可以作為觸發條件的變數,請找出屬於該點擊連結的專屬元素

    何謂專屬元素?

    只要是要追蹤項目的 Class、ID、Text 或是 Element 為該頁面上獨一無二的存在,就是專屬元素,即可作為該連結的觸發條件。


    假設我們今天要追蹤下圖中的社群媒體 Instagram 按鈕連結,我們可以在該按鈕(也就是 Instagram Logo)上點擊右鍵,選擇「檢查」,之後從右邊的 Html 代碼找到屬於該按鈕獨一無二的元素,通常會是該按鈕所屬連結,也就是 href 後面所帶的那條連結。

  2. 一樣來到觸發條件設定的地方,選擇「僅連結」的觸發條件類型,下方啟動時機選擇「部分的點擊連結」,並選擇「Click URL」「包含」「你的外部連結網址」。

  3. 接著就跟之前的設定(上面的步驟 4)一樣,我們來到代碼設定的地方做一個專門追蹤 Instagram Social Logo 事件的新代碼,並將觸發條件設定為剛剛設定的「IG Logo Trigger」。

  4. 透過預覽模式打開網站,點擊網站中的 IG Logo 確認這個代碼有無觸發,並到 GA4 當中觀察是否有收到本次的事件「有人點擊你的IG-Logo啦-!」(建議還是設定英文,我這麼做只是因為好玩)

  5. 最後一個動作,雖然在預覽模式以及 GA4 即時事件都有看到參數進來,但要記得,必須要到 GA4 後台自訂維度,未來我們在報表中才可以取用資料,否則是看不到「Click_Url」以及「Click_Text」兩個參數值的喔!

「自動事件變數」v.s 「點擊元素」

要追蹤外部連結的方法很多,用「自動事件變數」偵測非本網站連結的方法,是最為一勞永逸的方式,只要設定一個代碼、一個觸發條件、一個變數即可完成。

但如果你今天是用「點擊元素」作為觸發條件,就必須要針對每個按鈕設定一個觸發條件,外部連結少的時候,這樣做沒有問題,但當要追蹤的連結變多的時候,代碼跟觸發條件的數量就會變得非常龐大且複雜,未來在管理上會非常麻煩

善用自動事件變數,透過一個代碼攜帶不同的參數值來判斷所被點擊的外部連結,是較為經濟實惠的做法,未來接手 GTM 帳戶的夥伴,也會在螢幕前感激你的。


用 GTM 取代 GA4 加強型事件評估

如果你原本是用 GA4 的加強型事件評估「外連點擊」事件來追蹤外部連結點擊的話,現在想用 GTM 完全取代 GA4 加強型事件評估中的「外連點擊」,你可以這麼做。

(因為 GA4 中的「外連點擊」,給不了你「連結文字(link_text)」這個參數)

Google 官方文件

GA4 左下角「齒輪」 > 「資料收集和修改」> 「資料串流」 > 點選「加強型評估」區塊的齒輪 > 關閉「外連點擊

設定 GTM 代碼事件參數

在設定 GTM 代碼時,我們可以將事件名稱以及參數設定成跟 GA4 加強型事件評估中的「外連點擊」一樣,而 GA4「外連點擊」的參數預設如下圖,可參考官方文件

因此稍後透過 GTM 設定的 GA4 事件代碼需放上:

事件名稱為:「click」
參預設數為:「link_calsses」、「link_domain」、「link_id」、「link_url」以及「outbound」

接下來,讓我們先啟動所有 GTM 內的「點擊」相關變數。

GTM 變數介面 > 右上角「設定」> 勾選「點擊」相關內建變數

代碼設定步驟都跟之前的教學一樣,只是事件名稱與參數需調整成下圖的樣子:

因為在內建的「點擊」變數中,沒有 Click domain 這種東西,如果需要 link_domain 的值,必須要去新增一個「自動事件變數」

(如果不需要知道連結主網域的話,這部分的動作就可以跳過,畢竟連結網址(link_url)中,已經可以看到網域了。)

GTM 變數介面 > 左下「新增使用者自定義變數」> 選擇「自動事件變數」類型

設定完成之後,我們就有 link_domain 的值可以使用了。

測試

將代碼與觸發條件綁定之後,可以用前面說的「自動事件變數」或是「點擊元素」作為觸發條,接著一樣來到 GTM 預覽模式、即時事件報表以及 Debug View 中測試,確保沒問題之後,就可以將代碼上線囉!

(BTW,記得去關掉 GA4 加強型事件評估中的「外連點擊」事件。)


題外話:建立 UTM 參數追蹤流量

如果今天與媒體網站合作,想要提供連結給該媒體公司,將該連結放到他們的網站,透過他們引導流量至公司的網站,我們通常會與對方洽談,買下該媒體特定版位用來放置一個「 Banner+連結」。

請記得一定要規劃好你的 UTM 設定,否則很難透過自家的 GA4 知道在該媒體網站哪個版位的成效表現比較好,這點需要非常注意。(當然,對方應該也要提供給你各版位的廣告表現,儘管如此,你還是必須要有自己的數據,以便用來對照,萬一出現數據落差時,可以找出問題在哪裡。)

舉例來說,假設你買下了版位A、版位B以及版位C,那連結應該會有三種:

www.abc.com/my-product?utm_source=合作媒體名稱&utm_medium=版位A&utm_campaign=Happy-new-year-sale

www.abc.com/my-product?utm_source=合作媒體名稱&utm_medium=版位B&utm_campaign=Happy-new-year-sale

www.abc.com/my-product?utm_source=合作媒體名稱&utm_medium=版位C&utm_campaign=Happy-new-year-sale

如此一來,透過 GA4 的流量來源(souce/medium)篩選時,就會很容易找到與該網站合作的成效,了解到是哪個版位帶來的流量比較好。

而關於 UTM 的故事,我們會再另外做一期為大家解說。


延伸閱讀

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

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