標籤: GA

[筆記] 在React上設定GA – Part 2

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/ga2

在上一篇文章中已經設定好可以在GA dashboard上看總覽人數了,  但由於我是使用react-router，在沒有多做一些處理的前提下只能抓到index的路徑。

目前只能抓到/MyTechBlog

今天這邊文章會紀錄如何讓GA能讀取react-router的路徑！

第一步：實作withTracker

react: ^16.8.5

react-router: ^4.0.0

以下code是使用react hook實作：

import React, { useEffect } from "react";

import ReactGA from "react-ga";

const withTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    ReactGA.set({
      page,
      ...options
    });
    ReactGA.pageview(page);
  };

  const HOC = props => {
     useEffect(() => trackPage(`MyTechBlog${props.location.pathname}`), [
      props.location.pathname
    ]);

    return <WrappedComponent {...props} />;
  };

  return HOC;
};

export default withTracker;

如果你的domain有多個page的話，為了較好地在GA上區分user瀏覽的頁面，你可以在trackPage這邊加入上一層的路徑（粗體+底線的部分）。

以上是react-ga提供的方法，可以在這邊看更多資訊：

https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

第二步：在router中導入withTracker

首先在App.js 中import withTracker (或者是你的index container)

import withTracker from './withTracker';

然後在route的component中把要導的頁面用withTracker包起來

<Router>
  <Route path="/" exact component={withTracker(this.index)} />
  <Route path="/ga1/" component={withTracker(this.ga1)} />
</Router>

第三步：在Dashboard上看結果

接下來開啟隨便一個router的路徑，然後到google analytics的dashboard，就可以看到成果了喔～！

出現了/MyTechBlog/ga1

從上圖我們可以看到原本顯示的是‘/MyTechBlog’，現在則是直接顯示我們在react-router中設定的路徑。如此以來我們就可以很清楚的查看user到底在瀏覽哪一頁。

設定好GA也過了3個禮拜了，雖然來的人不多但是感覺能看到實際的數字蠻有趣的。接下來的目標就是研究如何提升人數！

[筆記] 在React上設定GA – Part 1

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/ga1

開始在github page上建自己的blog有一小段時間了，

雖然沒幾篇文章，但是還是蠻好奇到底有沒有人來看。

第一步：GA資源設定

可以看到下圖紅色框框的地方，

追蹤ID是之後我們在code裡面初始化GA需要用的，

預設網址就輸入你要監控的website就好了。

第二步：載入react-ga

詳細的資訊可以看這邊：https://github.com/react-ga/react-ga

在你的project中加入react-ga

npm install react-ga --save

第三步：初始化GA

首先在App.js 中import react-ga (或者是你的index container)

import ReactGA from 'react-ga';

然後再初始化，記得換成自己的追蹤ID

// GA
ReactGA.initialize('追蹤ID');
ReactGA.pageview(window.location.pathname + window.location.search);

第四步：在Dashboard上看結果

接下來先開啟你剛剛設定要監控的網址，

然後到google analytics的dashboard，

選擇“即時 > 總覽”，你就可以驗證有沒有設定成功了～

果然只有我自己QQ

目前測試下來這個設定方法只能抓到第一層路徑 (/XXX)，如果有多層的話似乎是需要更多的設定。

我的blog是用react router來做分頁的，大致上看了一下react-ga是有支援router的，就等下次再研究吧～～