Nuxt基礎教學：30秒學會如何加入GA與GTM

怎麼在Nuxt中使用GA？

網站上線後，安裝GA來了解使用者操作行為是很常見的事情，那麼Nuxt的GA要怎麼安裝呢？在開始之前，建議先申請一組GA code在github上作測試，如何申請請參考Analytics說明，在此就不贅述申請過程。申請完後會獲得一組code如下，而UA-xxxxxxxxx-x就是你的追蹤ID。

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-xxxxxxxxx-x');

安裝的方法有很多種，Nuxt本身也有提供安裝的方法，可以參考GA Plugin。而在此本文章要介紹另一種安裝方式，就是透過@nuxtjs/google-gtag套件來進行管理。

</br>

使用@nuxtjs/google-gtag套件來安裝GA

@nuxtjs/google-gtag的使用前顯易懂，你可以很容易就上手。首先，到專案中進行安裝。

npm i @nuxtjs/google-gtag

安裝好之後，要到nuxt.config.js中添加以下的code。config的部分，還有更多的設定可參考此份文件，可以在Advanced中看到以下設定。

{
  modules: [
    // 一般的使用方式
    '@nuxtjs/google-gtag',
    // 如果你想要自訂一些選項，就可以這樣寫
    ['@nuxtjs/google-gtag', { /* module options */ }],
 ]
 // 開始加入GA code
 'google-gtag':{
   id: 'UA-xxxxxxxxx-x', // 必填，請填寫剛申請到的追蹤碼ID
   config:{
     // 這裡是填寫對gtag的需求選項」
     anonymize_ip: true, 
     send_page_view: false, // 避免頁面刷新時後的重複追蹤
     linker:{ // 跨域追蹤，追蹤兩個相關但不同網域的頁面
       domains:['domain.com','domain.org']
     }
   },
   debug: true, // 允許在開發中進行追蹤
   disableAutoPageTrack: false // 關閉追蹤每個頁面路由
 }
}

以上寫入後，基本上就完成了在Nuxt中安裝GA。不過這個模組的預設就是對每頁進行追蹤。若特定頁面有特定的event，就在想要追蹤的components/functions/methods中，添加下句：

this.$gtag('event', 'your_event', { /* track something awesome */})

</br></br>

使用Tag Assistant來驗證GA是否正確安裝

下一步，就要檢查GA是否有安裝正確並正常執行。Tag Assistant (by Google) 是Google提供的Chrome擴充工具，能夠幫助我們來了解寫進去的GA是否有正常執行。安裝完後進入你的頁面，在chrome右邊看到一個標籤的小圖示，點擊後你會看到下圖。

</br>

點擊Enable開啟這項功能，然後刷新頁面，就會看到剛剛安裝的GA，綠色標籤是表示code有正常運行，而黃色標籤則是提醒追蹤碼可能有些問題。

</br>

不用擔心，點擊黃色標籤後，工具會建議你應該做哪些事情來進行優化。

關於Tag Assistant (by Google)的用法，可以詳見官方Tag Assistant Help的說明，或者網路上都有很多中文文章，像是使用Tag Assistant幫您驗證GA追蹤碼是否正確安裝，都清楚說明使用方法。

</br>

結語

以上這些步驟看起來好像有些難度，但實際上步驟就是進入專案安裝@nuxtjs/google-gtag、在nuxt.config.js中添加設定，依照需求追蹤不同頁面的event，操作起來時間是很快的，甚至不用5分鐘。不過重點在於GA是否有正常運行，大多時候GA code是由客戶提供，若是要檢查就能使用Tag Assistant來進行驗證。因此，自行申請一組進行嘗試會是比較安全的做法。