七月 18, 2018 | 前端與Vue

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

網站上線後,安裝GA來了解使用者操作行為是很常見的事情,那麼Nuxt的GA要怎麼安裝呢?

怎麼在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來進行驗證。因此,自行申請一組進行嘗試會是比較安全的做法。

hashtags: