GTM 變數介紹：參照網址 (Referrer)
這是一個每個中文字你都懂，但是放在一起你就看不懂的變數，GTM 內建的變數「 參照網址（Referrer） 」是什麼？
（上圖為官方文件中的解釋，恩…聽君一席話，如聽一席話。）
簡單來說，「 參照網址（Referrer）」能夠告訴我們，使用者來到當前正在瀏覽或是產生轉換的頁面之前，先拜訪過哪一個頁面，也就是透過哪個頁面而來到當前正在瀏覽或是產生轉換的頁面。
舉例來說，如果使用者從網頁 A （www.abc.com/A）進入到網頁 B（www.abc.com/B），那麼查看網頁 B 的「 參照網址 」，就會顯示網頁 A 的網址（www.abc.com/A）。
因此，在 Google Tag Manager（GTM）中，「 參照網址 （Referrer）」 是用來抓取當前頁面的前一個頁面的 URL 網址，透過這個功能，我們可以更清楚地了解使用者是從哪個頁面進入我們的網站，進而更好地理解使用者行為，優化行銷策略，並做出相應的決策。
不過呢，值得注意的是，隨著隱私保護意識的提升，現在已經無法完整地看到前一頁的網址了，大部分情況下，如果前一頁來源不是自家網域，而是第三方網域的話，只會顯示前一頁網域名稱，而非完整的網址。
此外，我們也可以在 GTM 中運用「 參照網址 （Referrer）」作為觸發條件，協助讓追蹤數據更準確，怎麼做呢？讓我們繼續看下去。
為什麼「參照網址」的「值」是空的？
儘管我們沒有透過 GTM 設定，於事件中放上「 參照網址（referrer）」變數，我們依然可以在 GA4 的報表當中，看到「 參照網址」的資料，這是因為 GA4 的自動收集事件「 page_view 」預設就有傳送這個參數到 GA4 當中。
從下圖 GA4 的 DebugView 可以看到，由於我們是從 GTM 的「 預覽模式」打開網站，所以維度「 page_referrer 」回傳了 GTM 預覽模式的網址。
在每個瀏覽器當中，都會紀錄參照連結的網址，你可以在網頁上 「點選右鍵」 > 選單中選擇「檢查」> 於檢查工具頁籤中選擇「console」> 下方輸入 document.referrer ，就可以看到使用者來到當前頁面的前一頁網址為何。
我們可以透過這樣的方式取得網址是因為瀏覽器會自動將前一個頁面的網址儲存在 document.referrer 的屬性中，這樣就可以讓我們透過 Javascript 直接取得使用。
（在 GTM 中，許多內建變數都是依據這個原理取得瀏覽器中保存的值，GTM 讓操作界面更加簡易，因此即使你不懂 Javascript，也可以輕鬆透過點擊幾個按鈕取得我們需要的變數值。）
瀏覽器限制了參照網址屬性
雖然瀏覽器會儲存這些資料，但隨著隱私意識的抬頭，像 Safari、Brave 和 Chrome 等瀏覽器開始限制許多資料的儲存方式，更加嚴格地保護用戶的隱私資料。因此，過往我們可以輕易取得完整「 參照網址 」的情況，已不復存在。
這也是為什麼許多 Google Analytics 使用者會有疑問說：「為什麼我的參照網址都看不到網址了？以前不是都看得到嗎？參照網址怎麼只剩自己家的網址是完整的？」，現在你應該知道原因了，這不是 GA4 的問題，而是瀏覽器為了保護隱私所做的限制。
想要了解各瀏覽器的限制，你可以參考 網站 Cookie Status ，詳列了各瀏覽器的追蹤保護方式，讓你可以清楚了解不同瀏覽器在隱私保護方面的限制。
根據上圖，我們可以看到大部分瀏覽器在參照連結的預設設定為 strict-origin-when-cross-origin，這代表：「如果是前一個頁面來自相同網域，那就會保留包含網頁路徑以及參數的完整網址。但如果是跨網域的情況，在兩個網頁通訊協定（protocol）都是使用 Https 的狀態下，則只會保留網域名稱，但如果通訊協定是從 Https > Http （通訊協定降級），則不會傳送參照連結的值」
（關於 網域、 網址路徑、 網址參數以及 網址片段等網址結構名稱不清楚的朋友，可以參考這篇文章： 認識網址結構 ）
除了大部分瀏覽器預設的 strict-origin-when-cross-origin 以外，還有許多其他的格式，更多細節可以參考 Mozilla 官方文件 的解釋。
no-referrer：完全不會傳送參照網址，你的 referrer 變數將會是空值。no-referrer-when-downgrade：如果通訊協定等級降級的話，將不會傳送參照網址，例如：Https > Http，但如果是同一等級或是更高一級，例如：Http > Https 的話，就不會受到影響。origin：只會傳送通訊協定＋網域名稱，不包括路徑、參數等資訊，如果前一頁是 https://www.abc.com/A/B/C，將只會傳送 https://www.abc.com。origin-when-cross-origin：不管通訊協定等級，只要是跨網域，只傳送網域名稱。same-origin：只有前一頁是同網域時，才會傳送完整參照網址，一但是跨網域，就完全不傳送 Referrer。strict-origin：唯有通訊協定是同等級時，才會傳送參照網址，例如 Https > Https。unsafe-url： 傳送完整的參照網址，不考慮是否跨網域或通訊協定，也就是不管任何安全限制。（設定這個要注意，網址中是否有敏感資訊，如使用者 email、電話等可以識別的資訊。）
這些不需要特別記住，只要知道當你的參照網址為空白時，可能是由於上述原因造成的。遇到問題時，知道去哪裡找答案就足夠了。
除了瀏覽器本身的限制以外，我們也可以透過在連結內或是網頁的 <head> 中放置參數，來限制 referrer 的傳送。
例如，我們可以在連結中加入 rel="noreferrer" （下圖），如此一來，當使用者點擊該連結時，就不會帶上 referrer。
或是在網頁的 <head></head> 區塊中，你可以找到 referrer 的 meta 標籤，看看該網頁是否對於 referrer 的傳送定義了特殊的設定。
如何用 GTM 設定 Referrer 變數？
GTM 內建變數中的 Referrer
GTM 的內建變數中，已經有預設了「 Referrer」變數，如果你在「 變數 」介面中沒看到的話，依照下方步驟勾選即可。
GTM 左側面板選擇「 變數」> 右上角點擊「 設定」 > 在網頁瀏覽區塊，勾選「 Referrer 」
使用者定義的 Referrer（HTTP 參照網址）
GTM 左側面板選擇「 變數」> 下方使用者定義的變數區塊選擇右上角「 新增」> 新增變數類型 > 選擇導覽區塊中的「 HTTP 參照網址 」
這邊的概念其實與內建變數的「 Referrer 」是一樣的，差別只有在於，你可以選擇「只」抓取網址列中的哪一部分，例如：完整網址、通訊協定、路徑或是查詢（query）等。
不過呢，就如同前面所說的，除了自家網域有辦法讓你取得這麼完整的網址資訊以外，在現行的規範下，很多元件類型其實都無法取得了。
（若需要更多關於這些名詞的解釋，可以參考文章： 認識網址結構 ）
使用者定義的 JavaScript 變數
GTM 左側面板選擇「 變數」> 下方使用者定義的變數區塊選擇右上角「 新增」> 新增變數類型 > 選擇網頁變數區塊中的「 JavaScript 變數」> 於「 全域變數名稱」欄位中輸入「 document.referrer 」
有沒有覺得似曾相似？
沒錯，這邊在做的，就跟我們 開頭透過瀏覽器檢查工具 做的是一樣的事情，只是我們透過 GTM 去完成，並且將其應用在觸發條件或是代碼的參數設定上。
雖然方法很多，但其實我們只要用內建的「 Referrer 」變數就可以了，畢竟有條最短且達到一樣效果的路徑可以選，為什麼我們要去繞遠路呢？
我可以如何運用 Referrer 變數？
假設公司的電商網站有一個訂單完成頁面。
當使用者完成購買來到這個頁面時，會觸發已經設定好的 電子商務「購買事件」，傳送事件與參數到 GA4。
為了要避免使用者「不小心」在未來的日子裡點到頁面的歷史紀錄或是因為頁面沒有關掉，被 Chrome 的記憶體節省模式給冷凍起來，過不久之後「不小心」被使用者點開，使得頁面重新載入，導致「 購買事件」重複觸發。
我們就可以運用「 Referrer 」變數來防範這樣的情況，該怎麼做呢？
從上圖中我們可以看到， 在來到購物完成頁面之前，前一頁一定會是結帳頁面，因此我們就可以在「 購物事件」的觸發條件中加入「 Referrer」變數作為條件之一來限制「 購物事件 」的觸發。
下圖我們以之前 電子商務事件設定文章 中的觸發條件為範例。
上圖翻譯成中文就是：
當資料層出現 purchase 事件，同時 參照網址（Referrer）的網址包含 payment/checkout 時，觸發條件才會符合，相對應代碼才可以啟動。
如果你是用「 網頁瀏覽 」觸發條件，設定畫面會如下圖：
透過這樣的方式，我們就可以減少「 購買 」事件被錯誤的觸發，使 GA4 接收到的資料更加正確。
補充一下
善用 GA4 的「網頁參照網址」維度
在 GA4 的網頁類別維度中，較過去的 Universal Analytic(GA3)多了一個「 網頁參照網址 」維度。
儘管我們沒有透過 GTM 做任何的 Referrer 變數設定，GA4 本身就已經有在各種事件帶上 page_referrer 這個參數，因此我們可以透過維度名稱「 網頁參照網址 」查看當前頁面的前一頁網址來源為何。
（參數 page_referrer 對應到的維度名稱就是「 網頁參照網址 」）
幾個應用方式可以給大家參考。
修復站上損壞的連結
舉例來說，假設你的網站有設置 404 頁面，你可以在探索報表中，將主維度設定為「網頁位置」 > 篩選出 404 頁面的網址 > 在次要維度選擇「網頁參照網址」，就能找到網站上面哪些頁面的連結可能已經失效，進而進行修復。
觀察活動頁面成效
想像一下，假設你們正在舉辦一場行銷活動，為了推廣活動，你們設計了 10 個不同風格的活動頁面，希望能吸引更多使用者參與並完成轉換。同時，你們也想要測試哪一個頁面的表現最好，這樣就可以把更多資源投注在效果最好的那個頁面上，以達到最大的效益。
我們可以透過觀察這些活動完成頁面的「 網頁參照網址」來了解它們的成效，在探索報表中的主維度選擇「網頁位置」 > 篩選網頁網址為包含 order-success 的頁面 > 次要維度選擇「網頁參照網址」，這樣就能快速了解每個活動頁面的表現了。
總結一下
隨著瀏覽器對於隱私保護的要求不斷提高，將來可能會面臨無法獲取非自家網域來源的情況。這將對 Referrer 變數的應用造成更大的限制。只要是非自家網域的來源，可能都拿不到了。
因此 Referrer 變數的應用也將越來越受到限制，除了上述幾個應用場景以外，你們還會如何運用 GTM 的 Referrer 變數呢？ 如果你有任何其他想法或是經驗，歡迎在下方留言與我們分享！
