在面對一頁式網站的時候，不管我們如何點擊頁面上的頁籤，網址(URL)往往都不會跳動或是只是在網址尾端多了一個 #（錨點）。
面對這樣的情況，代表整個頁面是沒有重新載入的，如此一來，除了第一次來到站上時的「page_view」事件會傳送到 GA4 當中以外（因為有載入頁面的動作，GTM 容器中 GA4 代碼便會啟動），之後的頁面「page_view」會因為沒有重新載入 GTM 容器，而無法記錄使用者觀看的頁面。（除非使用者刷新頁面）
我們可以用三種方式來解決。
- 使用 GA4 加強型評估中「網頁瀏覽」事件內建的「頁面根據瀏覽器記錄事件而變更」
- 用 GTM 「記錄變更（history change）」觸發條件類型傳送新的「page_view」事件
- 與網站開發人員合作，推送「page_view」或是相關事件到 Datalayer 資料層中，再利用 GTM 的「自訂事件」觸發條件去觸發相關代碼。
在這三種方式中，如果有資源 or 能力可以處理，建議採行第三種，「與網站開發人員合作推送資料到 datalayer 層中」會是最佳的做法，這樣的方法是最ㄧ勞永逸且只需要請網站開發人員進行一次工的任務即可，未來也都可以持續應用，且透過 Data Layer 中的事件所建立的 GTM 觸發條件也較不容易出錯。
但並不是每個人的網站背後都有網站開發人員可以協助進行，尤其是一頁式網站的使用者，可能都只是個人經營，並沒有撰寫程式碼能力或是研究的時間（將時間專注在自身產品開發會更有價值）。
此時就可以善用「GA4 加強型事件評估」以及 GTM 的預設觸發條件「記錄變更」來建置追蹤代碼，會是一個省時又省力的好方法。
本篇重點
如何確認是否為一頁式網站？
觀察頁面有無跳動
在點擊網站上的新連結時，觀察頁面有無跳動、重新載入了新的內容，如果沒有，那就可能是屬於一頁式網站。
觀察網址有無變化
除了觀察網站畫面有無跳動以外，我們可以看一下網址列中的網址有無改變，例如從 www.abc.com/product 變成 www.abc.com/product/thisisgood ，如果畫面跳動但網址沒有改變，依然維持為 www.abc.com/product，基本上就是屬於一頁式網站。
但如果畫面以及網址都有改變，像是在網址尾端加入了「#」，例如：www.abc.com/product/#agoodday，基本上是沒有重新載入的，也是屬於一頁式網站。
也有可能網址有改變，例如從 www.abc.com/product 變成 www.abc.com/contact，但是畫面沒有重新載入（跳動），只是像是翻數一樣翻了一樣，也可能是屬於一頁式網站。
另一個較為準確且方便的判斷方式，是我們可以透過 GTM 預覽模式來看。
用「預覽模式」觀察是否有新頁面
透過 GTM 預覽模式左側面版，我們可以看到每當開啟一個新的頁面，就會在左側出現該網頁的標題，代表這個頁面是有完整的重新載入且啟動 GTM 容器，並依條件觸發相關代碼，像是我們最在乎的「page_view」事件，就只會在網頁被載入的時候透過 GA4 代碼啟動。
（如果還沒安裝 GA4 代碼，請看這篇：如何用 GTM 安裝 GA4 評估 ID 以及 Meta(Facebook) Pixel？）
但如果你點擊網站上的連結後被帶去其它畫面，預覽模式左側「卻沒有」展開新的標題頁面，基本上就是屬於一頁式網站，後面的畫面變化都不會發送「page_view」事件，也就無從得知哪些頁面有被使用者觀看。
什麼是「記錄變更（history change）」？
在一頁式網站中，在點擊網站上某個按鈕或是連結之後，雖然畫面有變化但網址沒有更動或是頁面沒有重新載入，但其實背後有個東西在默默改變，也就是網頁的歷史紀錄。
可以先讓自己對網頁運作的觀念有初步的了解，未來在面對特殊網頁追蹤需求的時候，腦海中也可以馬上出現解決方法。
有兩個方式可以知道網頁背後是否有進行這些運作：
瀏覽器的上一頁按鈕
在頁面上執行連結點擊操作後，儘管頁面沒有重新載入，但畫面確實因為 js 在前端的運作了改變或是畫面移動到頁面錨點位置，此時可以觀察瀏覽器的「上一頁」按鈕是否有上一個頁面可以返回。
如果有，就代表可以透過 GTM 中的觸發條件「紀錄變更」來觸發想要追蹤的事件。
透過 GTM 「預覽模式」觀察
GTM 左側面板選擇「觸發條件」> 右上角選擇「新增」> 捲動到最下方選擇觸發條件類型「紀錄變更」
打開 GTM 預覽模式，當在網頁上進行操作時，觀察左邊列表是否有跑出 History 的事件，如果有，也就表示此頁面可以在 GTM 中運用觸發條件「紀錄變更」來作為觸發代碼。
延伸閱讀：如何用 GTM 「預覽模式」檢查代碼有無設定成功？
#方法1 – 用 GA4 的加強型評估來追蹤
在 GA4 當中的「加強型評估」 > 「網頁瀏覽」> 「顯示進階設定」中有一個「頁面根據瀏覽器記錄事件而變更」選項，預設是勾選，這個事件會根據網站的紀錄是否有變更，來觸發 「page_view」事件。
在過往的 GA3 中沒有這個功能，因此在一頁式網站中，不管使用者如何點擊網站上的連結然後變換畫面，都只會有一次瀏覽數（因為頁面沒有重新載入）。
而在以事件為基礎的 GA4 中，預設就會以當瀏覽器記錄事件變更時傳送新的「page_view」事件（只要有被勾選），因此儘管是一頁式網站，當瀏覽器紀錄變更，便會觸發新的「page_view」事件。
打開 GA4 網頁瀏覽進階設定
選擇 GA4 畫面左下角齒輪「管理」 > 「資料串流」
選擇網頁所屬資料串流 > 點選「加強型評估」齒輪 > 網頁瀏覽區塊中點擊「顯示進階設定」 > 確認是否勾選「頁面根據瀏覽器記錄事件而變更」選項
透過 GTM 預覽模式確認
在 GTM 預覽模式中，會看到左邊列表出現 History，點選之後可以看到如下圖的 API Call，推送了一個事件「gtm.historyChange-v2」來到 datalayer 中。
這就是官方預設的依據「頁面根據瀏覽器記錄事件而變更」所產生的事件，在設定完畢之後，當網頁歷史紀錄變更時，會有一個 page view 事件發送到 GA4。
如果有，就不用再做任何設定，如果沒有，那我們就要使用 GTM 來做進一步的設置。
（在我的截圖中，雖然「紀錄變更」有出現，但其實加強型評估事件並沒有推送新的「page view」事件，據網路上大家分享的情況皆表示此狀況時好時壞，判斷應為 GA4 尚不穩定，這邊就是讓大家認識 GA4 有此預設功能，建議可以的話，都採用 GTM 來進行設定，以確保資料正確傳送。）
#方法2 – 透過 GTM「記錄變更」觸發代碼
在一頁式網站中，雖然上方有導覽列可以點擊（如下圖），但其實這邊的按鈕並沒有帶你到其它頁面，而是「移動」到同一頁面的其它區塊，會讓人看起來似乎到了其它頁面，一般會稱作這樣的頁面為所謂的「虛擬頁面」。
的確看起來像一個新的頁面，但其實只是當前頁面的其中一個區塊。
這樣的作法，通常是利用錨點文字建立導覽列的連結，因此網址就會帶到 hashtag # 字符號，雖然網址改變了，因為網頁並沒有重新載入，所以這樣的改變依然不會送出新的「page_view」事件給 GA4，也就是說使用者雖然來到了「新」頁面，但並不會產生新的瀏覽數。
以上圖一頁式網站作為範例來說，網址結構如下：
首頁網址：mktgholic.local/maldive-diving-tour/
環境介紹：mktgholic.local/maldive-diving-tour/#wonderland-under-the-sea
潛水行程：mktgholic.local/maldive-diving-tour/#diving-environment
使用者來到環境介紹以及潛水行程頁面是不會有 page view 紀錄的，如果想知道使用者是否有看過這些虛擬頁面（區塊），就必須透過 GTM 觸發條件「記錄變更」來執行。
我們想透過 GTM 做到的是：
當使用者觀看一頁式網站中的「虛擬頁面（區塊）」時，傳送「page_view」事件給 GA4，並回傳當前的網址「page_location」。
首先關閉 GA4 預設「紀錄變更」事件
先回到 GA4 加強型評估的後台，關閉網頁瀏覽的進階設定「頁面根據瀏覽器記錄紀錄事件而變更」。
建立「記錄變更」觸發條件
GTM 介面 > 打開左側觸發條件面板 > 右上角選擇「新增」 > 選擇觸發條件類型「記錄變更」
選擇「所有記錄變更」，當網頁產生紀錄變更事件時，此觸發條件將被滿足，就可以去觸發 「page view」事件代碼，並將參數「page location」傳送給 GA4。
建立「當前網址」變數
點擊導覽列上的按鈕之後，因為頁面沒有重新載入，但網址有改變（多了 #），如果只是單純在事件中回傳「page location」的值，只會抓到 mktgholic.local/maldive-diving-tour/，但我們必須回傳最新帶有 # 的網址 ，如此一來才會知道使用者到底有看過哪些頁面。
因此必須自定一個 Javascript 變數，值為「window.location.href」，回傳當前的網址列給 GA4。
左側面板選擇「變數」> 「新增」自定義變數 > 選擇「JavaScript 變數」
在全域變數名稱的位置輸入 window.location.href，便會去抓取當前頁面的 URL，如此一來就可以把這個變數放在「page_view」事件中的參數「page_location」值的欄位中，獲得當前頁面最新的 URL。
建立 「page_view」 事件代碼
GA4 代碼預設就會在每個頁面載入時發送 page_view 事件，現在要利用前面建立的「記錄變更」觸發條件再度發送一次「page_view」事件並帶上新網址給 GA4。
左側面板選擇「代碼」 > 「新增」 > 選擇「Google Analytics（分析）」 > 「Google Analytics（分析）：GA4 事件」
這邊要注意，事件名稱需與 GA4 原先預設的「page_view」名稱完全相符，參數名稱 「page_location」也須注意命名一致（包含大小寫），參數值就選擇前面建立的變數即可。
觸發條件選擇前面建立的「紀錄變更」，完成 GA4 page_view 事件代碼的設定。
檢查代碼是否正常運作
透過 GTM 預覽模式，可以看到當點擊一頁式網站導覽列的按鈕之後，左邊面板出現 history 事件，觸發了剛剛設置的 GA4 事件代碼。
點開代碼之後，可以看到成功傳送相對應的值，當前帶有 # 的網址已經跟著「page_view」事件被傳送到 GA4，也可以看到這個代碼確實是透過「記錄變更」觸發條件類型觸發的。
再來到 GA4 的即時報表中，可以看到「page_view」事件中的「page_location」參數有一個帶有 # 的網址，也就是由我們設定的代碼傳送進來的，即便頁面沒有重新載入，我們依然可以知道使用者觀看特定的「虛擬頁面」多少次，方便作為未來頁面優化的參考數據。
總結
透過這樣的設定，我們便可以清楚知道自家網站哪些「虛擬頁面」是大家最有興趣的？是否有符合我們的預期？如果發現行程方案的「頁面」最多人關注，是否應對其投放廣告？在行程方案的頁面中，點擊了哪一套方案的使用者最多？如果使用者來到行程方案頁面卻沒有產生相對應的期待事件，是否該調整方案內容？
太多的問題可以思考，GTM 只是幫助我們完成優化目標的工具，設定出來的代碼如果無法幫助優化，並且立刻馬上確實執行測試，那就不需要浪費時間進行這些設定了，共勉之。
延伸閱讀：
如果你很喜歡這篇文章並且覺得內容有幫助到你，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
