Làm cách nào để thiết lập Google Analytics cho React-Router?

Tôi đang cố gắng thiết lập Google Analytics trên trang web phản ứng của mình và đã gặp một vài gói, nhưng không có gói nào trong số đó có kiểu thiết lập mà tôi có về mặt ví dụ. Tôi hy vọng ai đó có thể làm sáng tỏ điều này.

Gói mà tôi đang xem là, react-ga .

Phương thức kết xuất của tôi trên của tôi index.jstrông như thế này.

React.render((
<Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));

Giữ một tham chiếu đến đối tượng lịch sử của bạn. I E

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

ReactDOM.render((
    <Router history={history}>
        [...]

Sau đó, thêm một người nghe để ghi lại mỗi lần xem trang. (Điều này giả sử bạn đã thiết lập window.gađối tượng theo cách thông thường.)

history.listen((location) => {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
});

Cho rằng google analytics được tải và khởi chạy bằng id theo dõi.

Đây là giải pháp cho phiên bản bộ định tuyến phản ứng 4 sử dụng <Route> thành phần để theo dõi lượt xem trang.

<Route path="/" render={({location}) => {
  if (typeof window.ga === 'function') {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
  }
  return null;
}} />

Bạn chỉ cần hiển thị thành phần này bên trong <Router> (nhưng không phải là con trực tiếp của a <Switch>).

Điều xảy ra là bất cứ khi nào vị trí hỗ trợ thay đổi, nó gây ra kết xuất lại thành phần này (không thực sự hiển thị bất kỳ thứ gì) kích hoạt một lần xem trang.

Tôi đang sử dụng Bộ định tuyến React v4 và Thẻ trang web toàn cầu của Google Analytics , này dường như được đề xuất tại thời điểm viết bài này.

Và đây là giải pháp của tôi:

Tạo một thành phần được bọc trong withRouter từ react-router-dom:

import React from 'react';
import { withRouter } from 'react-router-dom';
import { GA_TRACKING_ID } from '../config';

class GoogleAnalytics extends React.Component {
    componentWillUpdate ({ location, history }) {
        const gtag = window.gtag;

        if (location.pathname === this.props.location.pathname) {
            // don't log identical link clicks (nav links likely)
            return;
        }

        if (history.action === 'PUSH' &&
            typeof(gtag) === 'function') {
            gtag('config', GA_TRACKING_ID, {
                'page_title': document.title,
                'page_location': window.location.href,
                'page_path': location.pathname
            });
        }
    }

    render () {
        return null;
    }
}

export default withRouter(GoogleAnalytics);

Chỉ cần thêm thành phần bên trong bộ định tuyến của bạn (tôi tin rằng lý tưởng nhất là sau bất kỳ tuyến nào sẽ được khớp và bất kỳ thành phần Switch nào, bởi vì chức năng phân tích không được ưu tiên hơn so với kết xuất trang web của bạn):

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import IndexPage from './IndexPage';
import NotFoundPage from './NotFoundPage';
import GoogleAnalytics from './GoogleAnalytics';

const App = () => (
    <Router>
        <Switch>
            <Route exact path="/" component={IndexPage} />
            <Route component={NotFoundPage} />
        </Switch>
        <GoogleAnalytics />
    </Router>
);

Như đã nêu:

withRouter sẽ kết xuất lại thành phần của nó mỗi khi tuyến đường thay đổi với các đạo cụ giống như kết xuất đạo cụ

Vì vậy, khi tuyến đường thay đổi, GoogleAnalyticsthành phần sẽ cập nhật, nó sẽ nhận vị trí mới làm đạo cụ và history.actionsẽ PUSHdành cho một mục lịch sử mới hoặc POPđể báo hiệu việc đi ngược lại lịch sử (mà tôi nghĩ không nên kích hoạt lượt xem trang bạn có thể điều chỉnh nếu phát biểu trong componentWillUpdatekhi bạn thấy phù hợp (thậm chí bạn có thể thử componentDidUpdatevới this.propsthay vào đó, nhưng tôi không chắc chắn đó là tốt hơn)).

Lưu ý nếu bạn đang sử dụng react-router-domgói từ react-router-4bạn có thể xử lý như vậy:

import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
const initGA = (history) => {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'YOUR_IDENTIFIER_HERE', 'auto');
  ga('send', 'pageview');

  history.listen((location) => {
    console.log("tracking page view: " + location.pathname);
    ga('send', 'pageview', location.pathname);
  });
};

initGA(history);

class App extends Component { //eslint-disable-line
  render() {
    return
      (<Router history={history} >
         <Route exact path="/x" component={x} />
         <Route exact path="/y" component={y} />
       </Router>)
  }
}

Lưu ý rằng điều này yêu cầu bạn cài đặt historygói ( npm install history). Đây đã là một phần phụ thuộc của react-router-dom nên bạn sẽ không thêm bất kỳ trọng lượng trang nào ở đây.

Cũng lưu ý: Không thể sử dụng thành phần BrowserRouter VÀ công cụ theo dõi ga của bạn theo cách này. Điều này không sao vì thành phần BrowserRouter chỉ là một lớp bọc thực sự mỏng xung quanh đối tượng Router. Chúng tôi tạo lại chức năng BrowserRouter ở đây với <Router history={history}>đâu const history = createBrowserHistory();.

Tôi khuyên bạn nên sử dụng react-router-gagói tuyệt vời cực kỳ nhẹ và dễ cấu hình, đặc biệt là khi sử dụngBrowserRouter trình bao bọc.

Nhập thành phần:

import Analytics from 'react-router-ga';

Sau đó, chỉ cần thêm vào <Analytics>bên trong của bạn BrowserRouter:

<BrowserRouter>
    <Analytics id="UA-ANALYTICS-1">
        <Switch>
            <Route path="/somewhere" component={SomeComponent}/>
        </Switch>
    </Analytics>
</BrowserRouter>

Tôi thích cách Mark Thomas Müller đề xuất ở đây :

Trong index.js của bạn

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

ReactDOM.render(<App />, document.getElementById('root'))

Các tuyến đường của bạn ở đâu:

import React, { Component } from 'react'
import { Router, Route } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import ReactGA from 'react-ga'

const history = createHistory()
history.listen(location => {
    ReactGA.set({ page: location.pathname })
    ReactGA.pageview(location.pathname)
})

export default class AppRoutes extends Component {
    componentDidMount() {
        ReactGA.pageview(window.location.pathname)
    }

    render() {
        return (
            <Router history={history}>
                <div>
                    <Route path="/your" component={Your} />
                    <Route path="/pages" component={Pages} />
                    <Route path="/here" component={Here} />
                </div>
            </Router>
        )
    }
}

Ngắn gọn, có thể mở rộng và đơn giản :)

Vì react-router v5.1.0điều này có thể được giải quyết dễ dàng hơn rất nhiều với useLocation.

usePageTracking.js

import { useEffect} from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.initialize("UA-000000000-0");
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

App.js

const App = () => {
  usePageTracking();

  return (...);
};

Xem thêm:

• https://reactrouter.com/web/api/Hooks/uselocation
• https://github.com/react-ga/react-ga/issues/122

Đây là một phiên bản thông minh hơn một chút:

usePageTracking.js

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (!window.location.href.includes("localhost")) {
      ReactGA.initialize("UA-000000000-0");
    }
    setInitialized(true);
  }, []);

  useEffect(() => {
    if (initialized) {
      ReactGA.pageview(location.pathname + location.search);
    }
  }, [initialized, location]);
};

export default usePageTracking;

Luôn đi theo cách đề xuất của thư viện

Trong tài liệu React-GA, họ đã thêm một thành phần cộng đồng được khuyến nghị sử dụng với React Router: https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

Thực hiện

import withTracker from './withTracker';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route component={withTracker(App, { /* additional attributes */ } )} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

Mã

import React, { Component, } from "react";
import GoogleAnalytics from "react-ga";

GoogleAnalytics.initialize("UA-0000000-0");

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

  // eslint-disable-next-line
  const HOC = class extends Component {
    componentDidMount() {
      // eslint-disable-next-line
      const page = this.props.location.pathname + this.props.location.search;
      trackPage(page);
    }

    componentDidUpdate(prevProps) {
      const currentPage =
        prevProps.location.pathname + prevProps.location.search;
      const nextPage =
        this.props.location.pathname + this.props.location.search;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

  return HOC;
};

export default withTracker;

Đầu tiên, trong index.js của bạn, hãy đặt hàm onUpdate để gọi ga

import ga from 'ga.js';
onUpdate() {
  console.log('=====GA=====>', location.pathname);
  console.log('=====GA_TRACKING_CODE=====>', GA_TRACKING_CODE);
  ga("send", "pageview", location.pathname);
}

render() {
  return (
    <Router onUpdate={this.onUpdate.bind(this)}>...</Router>
  );
}

Và ga.js:

'use strict';
if(typeof window !== 'undefined' && typeof GA_TRACKING_CODE !== 'undefined') {
  (function(window, document, script, url, r, tag, firstScriptTag) {
    window['GoogleAnalyticsObject']=r;
    window[r] = window[r] || function() {
      (window[r].q = window[r].q || []).push(arguments)
    };
    window[r].l = 1*new Date();
    tag = document.createElement(script),
    firstScriptTag = document.getElementsByTagName(script)[0];
    tag.async = 1;
    tag.src = url;
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  })(
    window,
    document,
    'script',
    '//www.google-analytics.com/analytics.js',
    'ga'
  );

  var ga = window.ga;

  ga('create', GA_TRACKING_CODE, 'auto');

  module.exports = function() {
    return window.ga.apply(window.ga, arguments);
  };
} else {
  module.exports = function() {console.log(arguments)};
}

đây là một cách đơn giản nhất để theo dõi tất cả các đường dẫn với một số cách giải quyết:

npm i --save history react-ga

tạo một tập tin history.js

import { createBrowserHistory } from "history"
import ReactGA from "react-ga"

ReactGA.initialize(process.env.REACT_APP_GA)

const history = createBrowserHistory()
history.listen((location) => {
    ReactGA.pageview(location.pathname)
})

// workaround for initial visit
if (window.performance && (performance.navigation.type === performance.navigation.TYPE_NAVIGATE)) {
    ReactGA.pageview("/")
}

export default history

và sau đó nhập nó vào nơi được đặt Router

import history from "./history"

...

class Route extends Component {
render() {
    return (
        <Router history={history}>
            <Switch>
              <Route path="/" exact component={HomePage} />
              ...
            </Switch>
        </Router>
    )
}

export default Route

Người giới thiệu:

Gustavo Gonzalez | medium.com

Lịch sử | GitHub

Tôi khuyên bạn nên sử dụng thư viện phân tích Phân đoạn và làm theo hướng dẫn bắt đầu nhanh React để theo dõi các lệnh gọi trang bằng thư viện bộ định tuyến phản ứng . Bạn có thể cho phép <Route />thành phần xử lý khi trang hiển thị và sử dụng componentDidMountđể gọi pagecác cuộc gọi. Ví dụ dưới đây cho thấy một cách bạn có thể làm điều này:

    const App = () => (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    );

    export default App;

    export default class Home extends Component {
      componentDidMount() {
        window.analytics.page('Home');
      }

      render() {
        return (
          <h1>
            Home page.
          </h1>
        );
      }
    }

Tôi là người duy trì https://github.com/segmentio/analytics-react . Với Phân đoạn, bạn sẽ có thể bật và tắt các điểm đến khác nhau bằng cách lật nút nếu bạn muốn thử nhiều công cụ phân tích (chúng tôi hỗ trợ hơn 250 điểm đến) mà không cần phải viết thêm bất kỳ mã nào. 🙂

Nếu bạn sử dụng băm hoặc lịch sử trình duyệt, bạn có thể làm:

import trackingHit from 'tracking';

import { Router, browserHistory } from 'react-router';
browserHistory.listen(trackingHit);
// OR
import { Router, hashHistory } from 'react-router';
hashHistory.listen(trackingHit);

ở đâu ./tracking.es6

export default function(location) {
    console.log('New page hit', location.pathname);
    // Do your shizzle here
}

triển khai react-ga cơ bản với index.js của bạn

var ReactGA = require('react-ga'); // require the react-ga module
ReactGA.initialize('Your-UA-ID-HERE'); // add your UA code 

function logPageView() { // add this function to your component
  ReactGA.set({ page: window.location.pathname + window.location.search });
  ReactGA.pageview(window.location.pathname + window.location.search);
}

React.render((
<Router history={createBrowserHistory()} onUpdate={logPageView} > // insert onUpdate props here
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader} />
</Router>), document.getElementById('root'));

Dựa trên đề xuất @ david-l-walsh và @bozdoz

Tôi tạo ra một HOC rằng thực hiện window.ga('set','page','{currentUrl})và window.ga('send', 'pageview');chức năng và được easly sử dụng trực tiếp trong trang router ...

đây là HOC:

import React from 'react';
import { history } from '../../store'; // or wherever you createBrowserHistory(); invokation is

function withGAHistoryTrack(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
      const { location } = history;
      const page = location.pathname + location.search;

      if (typeof window.ga === 'function') {
        window.ga('set', 'page', page);
        window.ga('send', 'pageview');
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default withGAHistoryTrack;

và được sử dụng theo cách này trong trang bộ định tuyến:

<Route
 path={'yourPath'}
 component={withGAHistoryTrack(yourComponent)}
 exact
/>

Để cập nhật động url trên một số sự kiện (như onClick, v.v.), bạn có thể sử dụng cách sau:

 //Imports
 import ReactGA from "react-ga";
 import { createBrowserHistory } from "history";

 // Add following on some event, like onClick (depends on your requirement)
 const history = createBrowserHistory();
 ReactGA.initialize("<Your-UA-ID-HERE>");
 ReactGA.pageview(history.location.pathname);