Vue SPA架構下 Google Analytics 如何追蹤呢?

如果你也遇到了 Vue SPA架構下,Google Analytics報表只追蹤到首頁的情況,那麼你可以參考我下面的解決辦法。在新工作上遇到的問題,趁著還新鮮趕快把解決辦法給寫下來,也是第一次發現,原來 Google Tag Manager 還能這樣用!

如果你想要直接跳到解決方案,請往下拉找到標題的地方;如果你想要看我遇到了什麼情況,可以閱讀下面這段。

當我接手公司某個網站的數位行銷時,先來看看 GA分析一下過去網站的經營情況,這時卻發現不論瀏覽哪一個頁面,在 GA中永遠只顯示首頁路徑,而這個網站的目錄正好又有比較特殊的目錄架構 www.example.com/doc/#/ 網站在 doc目錄下就算了,後面還帶了一個 # 的目錄。

這時候我完全沒有想到和撰寫網頁框架有關(因為前人都離開了),所以沒有人了解關於這個網站會長這樣的原因。最開始我認為 GA只顯示首頁路徑的原因是 GA把 #及其後的內容當作頁面錨點(anchor),所以只留下首頁路徑,也在網路上找到一些關於如何追蹤錨點的方案,但並沒有解決我的問題。始終不解為什麼網址換了 GA就是抓不到資料的問題。

最後終於資訊室回覆我,這個網站的架構是 Vue…啊!我沒接觸過 Vue框架的 Single Page Application,雖然看起來網址換了,但其實對瀏覽端是在同個葉面上透過 js去替換頁面,搜尋 Vue+SPA+GA泰半都是教你如何在原始碼中引入 GA或是使用某些 Vue套件,不過目前所處的工作環境資安甚嚴,要動到原始碼幾乎不可能(也沒有多餘的時間了解 Vue架構),也才讓我發現了原來透過 GTM的 Trigger就可以解決這個問題。(還好前人已經放好 GTM碼,為我留下一條生路…)

如果你也遇到了這樣的問題而且時間緊迫沒有時間學習 Vue,來看看怎麼解決吧!

Vue SPA架構下 Google Analytics 如何追蹤呢? 1

一、準備項目

要開始解決這個問題,請先將你網站相應的 Google AnalyticsGoogle Tag Manager容器建立完成,並將 GTM代碼先部屬到你的網站中。

二、GTM設定

1.切換到 GTM的「變數」,在「內建」區塊的「設定」按一下開啟「設定內建變數」,找到「記錄」,你會看到有以下變數,請先將這些變數勾選起來,然後回到變數頁面。New History Fragment, Old History Fragment, New History State, Old History State, History Source

Vue SPA架構下 Google Analytics 如何追蹤呢? 2

發現了嗎?我們要透過網頁瀏覽時的瀏覽歷程(History)變換來記錄 GA資料。

2.進入 GTM「代碼」新增一個通用 GA代碼,然後將你的 GA編號填好後勾選「在這個代碼中啟用覆寫設定」

3.點開「更多設定」>「要設定的欄位」>「+新增欄位」

4.欄位的名稱選擇「page」,值的地方選擇變數「{{New History Fragment}}」

Vue SPA架構下 Google Analytics 如何追蹤呢? 3

5.接著在「觸發條件」的地方按下「+」,選擇「紀錄變更」

Vue SPA架構下 Google Analytics 如何追蹤呢? 4

6.回到「代碼」儲存

7.最後「提交」到你的正式發布環境即可。(單然這裡省略了「預覽」,如果需要,你可以先預覽看看代碼有沒有被 Fired)

三、查看 GA是否正確收到資料

1.當你完成部署後,回到你的 GA控制台,切換你的檢視到「即時」>「內容」

2.在你的 Vue SPA網站上隨意開始瀏覽頁面,等候幾秒鐘 GA應該會開始回傳你的即時資料(如果正好有其他人可以協助,也請他們開始瀏覽)

3.設定正確的話,在「內容」的「有效網頁」應該就會看見「網頁路徑」被顯示出來了,而不是集中在首頁根目錄中。

Vue SPA架構下 Google Analytics 如何追蹤呢? 5

如此一來,進入的流量就會開始依照網頁路徑分類記錄了,如同一般的網頁那樣。

如果還是追蹤不到呢?那麼很可能你遇到的 Vue SPA網站架構和我不同(原諒我還沒時間了解這麼多),不過下面這個參考資料有綜合了更多種的關於 Vue SPA在 GTM中設定追蹤的方法,也許其他的方案可以滿足你的需求。

參考資料:

How To Track Single Page Web App with Google Tag Manager By Julius Fedorovicius

留言

發佈留言必須填寫的電子郵件地址不會公開。

Scroll to Top