单页应用接入 Google Analytics 跟踪笔记

2018-02-22

前言

统计是网站的基础功能，通过统计我们可以了解用户对网站、产品的使用情况，进而进行更好的运营。对于传统网站，只需要在网页中插入一段 JavaScript 脚本，即可实现统计。对于单页应用（SPA），该如何做统计呢？Google Analytics 提供了一套 API 进行了支持。

本文中介绍如何在 React SPA 中进行统计。

analytics.js

analytics.js 是一个库, 通过与 Google Analytics 通信, 实现跟踪.

react-ga/react-ga

这个库是对 analytics.js 的 React 封装. 有了这个库, 就可以方便地在 React 单页应用中进行跟踪埋点了.

依赖安装：

npm install react-ga --save

初始化

通过下面代码进行初始化:

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');

记录一次访问

通过 pageview 方法记录一次页面访问：

ReactGA.pageview(window.location.pathname + window.location.search);

ReactGA API

除了 pageview，ReactGA 提供了很丰富的功能：

方法功能
pageview统计页面访问（URL 变了）
modalview统计弹层访问（URL 没变）
event统计交互事件
timing统计时长

react-ga 与 React Router v4 整合

我在项目中使用 React Router v4 进行路由, 如何实现路径跟踪呢?我的第一想法是将 react-ga 与 React Router v4 整合.

参考文献 5 已经实现了这一整合的方案.

具体实现方法是创建一个响应所有 route 的组件:

class Analytics extends React.Component<RouteComponentProps<any>> {
    componentDidMount() {
      this.sendPageChange(
        this.props.location.pathname,
        this.props.location.search)
    }
  
    componentDidUpdate(prevProps: RouteComponentProps<any>) {
      if (this.props.location.pathname
        !== prevProps.location.pathname
        || this.props.location.search !== prevProps.location.search) {
        this.sendPageChange(
          this.props.location.pathname,
          this.props.location.search)
      }
    }
  
    sendPageChange(pathname: string, search: string = "") {
      const page = pathname + search
      ReactGA.set({page});
      ReactGA.pageview(page);
    }
  
    render() {
      return null
    }
  }
  
  const AnalyticsTracker = () => {
    return <Route component={Analytics} />
  }
  
  // ...further down the file:
  <BrowserRouter>
    <AnalyticsTracker />
    <Switch>
    <Route exact={true} path="/" component={HomePage} />
    // ...

这样, 每次路由跳转到一个新的页面, 都会进行 Google Analytics 路径跟踪.

参考文献