為什麼要使用 First-Party Mode ？
相信不少人在串接 GA 時，都踩過這幾個大坑
- 因爲使用者瀏覽器有 ad blocker 所以沒有辦法載入第三方的資源包含廣告資訊和 GA 的 script，這也直接影響後續數據搜集行為。
- 因為 GA 來自第三方（Google）的請求，因而導致各種數據搜集失敗或是錯誤的問題（ 例如前陣子吵的很火熱說要淘汰的第三方 cookie ）。
只能無視這些問題了嗎？
也沒有那麼悲觀，這些坑也是有對應的 workaround，透過 Google Analytics Measurement Protocol 這個方案讓我們可以通過我們自己的伺服器將事件發給 GA 的伺服器，算是解決上述問題的方法之一。
但這時候可能會有一個疑問，原本只需要在前端放一個 script 就可以進行數據搜集，為了解決這幾個小問題，現在需要自己 host 一個 server 來處理數據搜集，是不是有點殺雞用牛刀？
如果你的心中也有這個疑問，我相信這篇文會有你想要的答案！
如果這是你的需求
- 不會因為 ad blocker 等類似的工具導致數據搜集行為被阻止
- 不想在程式碼中處理各種 GA 的第三方載入問題
- 不要自己 host 一個 server 處理數據搜集
並且你可以接受
- 這個網域下所有子網域（含根網域）不論要不要串接 GA 預設都會注入 GTM 初始化的程式碼（不會影響有串接 GA 的網站）。
- 這個網域下所有子網域（含根網域）如果要串接 GA 最好都使用同一個 GTM 來串接（ 這不是一個預期的行為，算是一個 bug，但 Cloudflare 尚未回覆具體原因，後面會更詳細解釋這個問題，相信未來 Cloudflare 會解決這個問題 ）
Cloudflare 搭配 GTM 的 Google Tag Gateway 來實現 First-Party Mode 數據搜集，這個方案是很好的選擇！
所以什麼是 First-Party Mode ?
First-Party Mode（FPM，第一方模式），讓 GTM 和 GA 可以從網站 (First-Party) 載入，而非使用 Google (Third-Party) 網域來載入。
為什麼這可以解決問題 ？
這方式解決了我們前面提到的問題，因為對於 ad blocker 這類的工具來說，我們要送給 GA 的網路請求經過這個方式的調整，已經沒辦法從我們網站的請求中分辨出來，也就不會被阻擋。
跟 Cloudflare 有什麼關係 ？
因為 Cloudflare 現在免費版就已經支援這個設定，只需要搭配 GTM 的 Google Tag Gateway 來配置就可以，當配置完成之後就可以直接運行，需求簡單的情況下，這個過程是完全不需要程式碼的配置。
背後是如何運作的 ？
Cloudflare 作為我們網站的 CDN 也是網站與用戶之間的 middleware，所有的流量都經過 Cloudflare，當用戶想要向 GA 進行任何互動時，只需要把這個請求發給我們網站，中間層的 Cloudflare 捕捉到這個請求之後就會代替我們網站去處理這個請求，再將結果回傳給用戶。
而這正實現了我們前面說到的 First-Party Mode，讓 Cloudflare 來代理我們處理這些行為，而不用我們自己去設定。
通過下面的時序圖我們可以更好地理解實際上這個模式運作時是如何跟用戶進行交互的。
實作
我們已經知道 Cloudflare 是如何在中間層協助我們運作 First-Party Mode 的數據搜集了，現在我們可以來實際把它配置在我們的網站中。
- 首先在 GTM 裡面我們可以找到要設定的 container ⇒ 管理 ⇒ Google 代碼閘道
- 點擊之後可以照著設定流程一步一步設定，這邊需要確定你的網域已經有使用 Cloudflare 作為網站的 CDN
- 點擊登入 Cloudflare，連結 GTM Container 跟 Cloudflare。
- 跳轉之後如果是第一次連結會詢問“Allow Google tag access to your Cloudflare account?” 同時會列出讓 Google Tag 拿到什麼權限，包含可以寫入First-party Tags 這個權限正是我們需要的。
- 點選 “Allow" 之後會自動關閉，並回到 GTM 頁面，這時候可以在第三步 『系統將啟用您的網站網域』這邊選擇剛剛通過 Cloudflare 設定之後拿到的網站網域，並點擊完成設定，看到以下顯示設定完成，到這邊 GTM 的設定基本上就結束了。
- 如果我們不想自己在網站中插入 GTM 的載入 script，可以點擊 『在 Cloudflare 中管理』，到 Cloudflare 那邊去設定。
- 點擊之後會跳轉到 Cloudflare 並看到以下的頁面，這時候可以點擊更新設定。
- 點擊之後可以在這邊看到相關的資訊，設定標籤預設應該會是關閉，預期行為是我們需要把它打開才會載入 Google Tag，會說這是預期行為是因為這個設定文章撰寫的當下沒有正常工作，而原因 Cloudflare 目前沒有給到答案，但我的想法認為還是應該按照預期來設定，以免這問題調整之後影響正常運作。
相關 Issue 可以參考：https://community.cloudflare.com/t/google-tag-gateway-in-configuration-rules/798993，而這個設定也關聯整個網域，所以前面才會提到前置條件。
驗證
前面的步驟完成之後，我們就可以到網站測試是否有串接成功，在上面實作的最後一張圖片中可以看到有一個『測量結果路徑』的參數，這個參數預設是一組隨機數，當然你也可以改成你認為好辨識的參數，而我們可以使用這個參數來驗證是否有正確串接，它會成為 Google Tag Gateway 在我們網域上的測量路徑（measurement path），瀏覽器對 GTM/GA 的請求都會先打到這個路徑，再由 Cloudflare 代理轉發到 Google 的 measurement 伺服器。
如果你已經完成到這邊了，恭喜你！這時候你的數據搜集已經通過網站傳遞到 GTM 容器了，再來只需要將 GTM 容器拿到的的數據正確轉發到你的目標 GA 資源，就可以在 GA 中查看完整的數據了～
關於如何進行 GTM 到 GA 的數據流轉設定，歡迎閱讀這篇文章。