無論是哪種類型的網站，只要提供文章供使用者閱讀，通常都會在文章的開頭放上一個內容目錄，這樣做的目的是為了讓使用者能夠迅速定位到他們感興趣的段落，當使用者點擊這些目錄連結時，螢幕畫面會自動滾動至相應的段落位置，從而提供更加方便快捷的閱讀體驗。
假設老闆想了解使用者進入網站後點擊了哪些目錄主題，以此來判斷他們對哪些內容更感興趣，我們可以怎麼做？
首先，仔細觀察點擊後網頁的行為，會發現大部分的目錄在被點擊後，網頁本身都不會重新載入，但會在 網址尾端會多了一個 # 片段 。
例如：www.abc.com/#fragment
如果你曾經閱讀過我們的文章：「 如何用 GTM 追蹤一頁式網站？」，那麼這裡的內容可能會讓你覺得似曾相識，因為這種目錄點擊的網頁運作原理，其實就跟一頁是網站是一樣的，不同之處在於，在那篇文章中，我們專注於追蹤使用者的 網頁瀏覽行為（page view），而在這裡，我們的重點則是追蹤使用者對目錄連結的 點擊 行為。
（該文章中還解釋了如何判斷一個網頁是否為一頁式網站，以及如何追蹤頁面瀏覽，對此有興趣的朋友可以 先閱讀那篇文章 ，然後再回來繼續本文。）
用 CSS 選取器設定觸發條件
在這次的設定中，我們將利用「 CSS 選取器」功能來協助我們。首先，我們需要識別並定位目錄中的 <a></a> 元素，以確認其在網頁結構中的準確位置。
目錄連結上「 點擊右鍵」 > 選擇「 檢查 」> 找到該連結所在位置
進一步檢視後，我們發現所有的目錄連結都被包含在一個具有 class 屬性值為 “wp-block-yoast-seo-table-of-contents yoast-table-of-contents” 的 <div> 元素內。換句話說，所有的 <a></a> 標籤都是這個 <div> 元素的子元素。
（如果對於這部分還不是很熟悉的朋友，可以參考文章： 如何使用 GTM 的「CSS 選取器」 ？會有更深入的解釋與範例可以參考。）
確認該 <div> 的 Class 是否沒有重複
在檢查工具中，雙擊該 class 名稱並複製 > 於下方檢查工具使用「搜尋」功能（cmd+f 或是 ctrl+f）> 貼上該 class 名稱 > 確認結果是否為「 1 」，沒有重複
如果沒有其它 <div> 元素使用相同 class 名稱，代表我們可以透過「 CSS 選取器」來選取所有位於 <div class="wp-block-yoast-seo-table-of-contents yoast-table-of-contents"> 底下的 <a></a> 元素。
在這個例子中，雖然 <div> 的 class 屬性有兩個名稱，但在後續的設定中，我們將只使用其中的一個，即 “yoast-table-of-contents”，以簡化「 CSS 選取器 」的表達式，避免讓它看起來過於冗長。
設定觸發條件
GTM 左側面板選擇「 觸發條件」 > 右上角「 新增」 > 觸發條件類型選擇「 僅連結 」
於設定介面中，選擇「 部分連結點擊」 > 左側選擇變數「 Click Element」> 中間選擇「 符合 CSS 選取器」 > 右邊欄位輸入 div.yoast-table-of-contents a
我們於右邊欄位所輸入的這段，用中文解釋的話，意指，都會符合觸發條件（關於 CSS 選取器的語法解釋，可以參考 這邊 ）
設定「自動事件變數」取得完整連結
在這類文章目錄中，<a></a> 元素的 href 屬性通常不會是完整的網址，而是一個以 # 開頭的片段。如果你仔細觀察之前提供的檢查工具截圖，就會發現這些 href 屬性與我們平常看到的有所不同。舉例來說，這些 href 屬性可能類似 "#section1" 或 "#section2" 這樣的格式，如下圖所示。
這類格式的 href 屬性是用來連結到頁面上某特定部分的錨點，而不是連結到整個頁面的不同網址。
當我們設定了點擊追蹤事件之後，自然會想知道使用者 點擊的文字以及他們 點擊的連結，為此，我們會把這些資訊作為參數，一起傳送到 GA4。使用 GTM 內建變數「 Click Text」來抓取點擊的文字通常沒有問題，但 如果我們用內建變數「Click URL」來抓取點擊的連結，我們只能獲得像 #what-is-dom 這樣的片段，而不是完整的連結 。
此時就是「 自動變數事件」登場的時候了，我們必須用它來抓取使用者在點擊產生時的元素屬性值，也就是 href 的值， 最後在代碼的事件參數「值」欄位中將 {{page_url}}{{自動事件變數}} 合併，就會得到一條完整帶有 # 片段的網址，例如：https://www.abc.com/#fragment，而這種方法確保我們能夠追蹤到使用者實際點擊的完整 URL。
（接下來要做的設定，其實跟內建變數 Click URL 是一樣的，但我們習慣針對這種特殊情況分開管理，使用 內建變數 Click URL 時就是顯示完整網址，針對這種特殊的 href 值，則另外做一個變數給它。
但如果只抓取 # 這類型的網址就可以幫助你判斷是哪條連結，也可以不做「 自動事件變數」，直接使用 Click URL ，端看你的 GTM 管理方式。）
GTM 介面左側面板選擇「 變數」> 下方使用者自定是變數區塊選擇「 新增」> 變數類型選擇「 自動事件變數 」
變數類型選擇「 元素屬性」 > 屬性名稱填入 href > 命名後儲存
完成變數的設定之後，記得到 GTM 預覽模式確認該變數是否有在使用者點擊目錄連結時被正確抓取，如果想了解更多關於自動事件變數的介紹以及設定細節，可以參考文章： GTM 變數介紹：自動事件變數 。
設定點擊追蹤代碼，並置入參數
GTM 介面左側面板選擇「 代碼」 > 右上角「 新增」 > 「 Google Analytic(分析)」> 「 Google Analytic(分析)：GA4 事件 」
輸入「 事件名稱」> 事件參數與值分別輸入 link_url 搭配 {{Page URL}}{{AEV — Table’s a href}} 以及 link_text 搭配 {{Click Text}} > 命名後儲存
link_url 以及 link_text 為 GA4 預設的參數，對應的是 GA4 中的維度「 連結網址」以及「 連結 URL 」，我們選擇直接沿用，就不用再到 GA4 中 自訂維度 了。
為了讓 link_url 的「值」獲得帶有 # 片段的完整網址，我們需要結合兩個變數：一個是內建變數「Page URL」，另一個則是我們 剛剛建立的「自動事件變數」 。這樣一來，我們就能夠獲得完整且包含 # 片段的網址了。
你可能會疑惑，為什麼不直接使用「Page URL」呢？
原因在於我們追蹤的是點擊連結，而不是當前頁面的網址，如果僅使用「Page URL」，你只會獲得當前頁面的網址，如： https://www.abc.com，而無法獲得帶有 # 片段的完整網址，因此，結合使用這兩個變數對於準確追蹤點擊事件至關重要。
設定完畢之後，與剛剛 設定的觸發條件 綁定，就可以照慣例進入 GTM 預覽模式測試了。
預覽模式與 Debugview 測試
當我們點擊文章目錄連結時，應該要在 GTM 預覽模式 的左側介面看到 Link Click 資料層事件，點擊後會在右側面板看到 GA4 事件代碼被觸發，如下圖：
同樣也必須來到 GA4 Debug View 檢查資料是否正確送入。
上述的兩個地方確認都沒有問題之後，就可以發布 GTM 代碼，並且等待 24–48 小時，我們就可以建立一張屬於目錄點擊行為的專屬探索報表，透過每篇文章目錄點擊事件的成效表現，了解到使用者對什麼議題比較有興趣了。
總結一下
在這篇文章中，我們結合了「 CSS 選取器」以及「 自動事件變數」搭配「 GA4 事件 」代碼完成了文章目錄連結點擊的追蹤，協助我們更近一步了解使用者有興趣的項目，從而為行銷素材的規劃提供了寶貴的參考。
在獲取完整連結的過程中，儘管內建的 Click URL 變數也能達到相同的效果，但為了便於管理並減少後續接手人員的混淆，我們選擇創建一個專門的「自動事件變數」來捕捉點擊的連結。
希望這篇文章能對你的網站追蹤工作有所幫助。如果你有更佳的追蹤方法或建議，也歡迎留言與我們分享。
