使用 Google 代碼管理工具評估單頁應用程式

本教學課程說明如何使用 Google 代碼管理工具，為單頁應用程式 (SPA) 設定 Google Analytics 評估功能。您將瞭解如何設定 Google Analytics 資源、啟用必要的 Google 代碼管理工具變數，以及建立在歷來變更時觸發的代碼。

事前準備

本教學課程假設您已具備下列條件：

• Google Analytics 帳戶和資源。
• 網站已加入 Google 代碼管理工具容器。
• Google Analytics 和 Google 代碼管理工具的「編輯者」(或更高層級) 角色。

步驟 1：準備 GA4 資料串流

如要在 SPA 中手動追蹤 page_view 事件，請先在 GA4 中停用自動追蹤的網頁瀏覽記錄，以免重複計算。

1. 開啟 Google Analytics。
2. 在「管理」頁面的「資料收集和修改」下方，點選「資料串流」。
3. 選取網站資料串流。
4. 在「加強型評估」下方，按一下設定圖示 。
5. 依序點選「網頁瀏覽」>「顯示進階設定」，然後取消勾選「根據瀏覽器記錄事件評估網頁變更」。
6. 按一下 [儲存]。

步驟 2：在代碼管理工具中啟用內建的「記錄」變數

如要在 GTM 中使用以記錄為準的觸發條件或變數，請先啟用內建的記錄變數。

1. 開啟 Google 代碼管理工具。
2. 在工作區中前往「變數」。
3. 按一下「內建變數」下方的「設定」。
4. 在「記錄」部分，啟用下列變數：
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. 關閉設定面板。

注意： 這些變數並非基本網頁瀏覽設定的必要條件。 只有在您想篩選觸發條件或實作自訂邏輯時，才會使用這些參數，例如本頁最後附註中提及的上一頁邏輯。

注意： 部分舊版文件可能會提及 Old History URL 或 New History URL。這些並非標準內建變數。請改用列出的變數。

步驟 3：建立「記錄變更」觸發條件

接著，請建立觸發條件，在 SPA 中發生記錄變更事件 (例如 pushState 或 replaceState) 時觸發。

1. 在代碼管理工具工作區中，前往「觸發條件」選單。
2. 按一下 [新增]。
3. 在「觸發條件設定」中，選擇「記錄變更」觸發條件。
4. (選用) 如果只想追蹤特定畫面變更，請更新觸發條件，在「部分記錄變更」時觸發。
5. 為觸發條件命名 (例如「記錄變更」)，然後按一下「儲存」。

步驟 4：建立 Google 代碼

現在，請建立 Google 代碼，在發生記錄變更時更新 page_location 參數。

1. 在「代碼」選單中，按一下「新增」。
2. 在「代碼設定」部分，選擇「Google 代碼」。
3. 輸入代碼 ID (與初始 Google 代碼使用的 ID 相同)。

4. 在「設定」下方，新增下列參數：

   • page_location：{{Page URL}}
   • page_title：{{Page Title}}
   • update：true
   注意： update 參數會將設定值合併至現有代碼設定，並禁止立即重複的 page_view 事件。page_referrer 不會納入此處，因為 Google Analytics 會在初始載入網頁時自動追蹤原始外部參照網址，而省略此網址可讓 Google Analytics 自動將先前的虛擬網頁網址填入報表中的導覽路徑參照網址。

5. 為代碼命名 (例如「Google 代碼 - SPA 更新」)，然後按一下「儲存」。

   注意： 請勿在這個 Google 代碼的「觸發條件」部分新增觸發條件。系統會在步驟 5 中，使用代碼觸發順序觸發這個設定代碼。

步驟 5：傳送虛擬 page_view 活動

最後，建立 GA4 事件代碼，針對每個虛擬網頁載入傳送實際的 page_view 事件。

1. 按一下「代碼」選單中的「新增」。
2. 在「代碼設定」中，選擇「Google Analytics：GA4 事件」。
3. 輸入評估 ID。
4. 將「事件名稱」設為 page_view。
5. 前往「進階設定」>「代碼觸發順序」，選取「在 GA4 事件 - 虛擬網頁瀏覽觸發前先觸發一個代碼」，然後選取您在步驟 4 建立的「Google 代碼 - SPA 更新」代碼。
6. 在「觸發條件」下方，選取您在步驟 3 建立的「記錄變更」觸發條件。
7. 為代碼命名 (例如「GA4 事件 - 虛擬網頁瀏覽」)，然後按一下「儲存」。

步驟 6：驗證設定

如要確保系統正確記錄虛擬網頁瀏覽次數，請採取下列行動：

1. 在代碼管理工具中，按一下「預覽」進入預覽模式。
2. 瀏覽 SPA。
3. 在 Google Analytics DebugView 中，確認每次畫面變更時，都會顯示新的 page_view 事件。
4. 確認 page_location 值符合預期。

注意： 使用標準 {{Referrer}} 可擷取引導使用者前往網站的初始來源。如要在 SPA 中將先前的虛擬網頁做為參照網址進行追蹤，您需要導入自訂 GTM 變數來儲存先前的網頁位置。