[筆記] 在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個禮拜了，雖然來的人不多但是感覺能看到實際的數字蠻有趣的。接下來的目標就是研究如何提升人數！

發表留言