React-Router 용 Google Analytics를 설정하는 방법은 무엇입니까?

내 반응 사이트에서 Google Analytics를 설정하려고하는데 몇 가지 패키지를 발견했지만 그중 어느 것도 예제 측면에서 설정 한 종류가 없습니다. 누군가가 이것에 대해 밝힐 수 있기를 바랐습니다.

내가보고있는 패키지는 react-ga 입니다.

내 렌더링 방법은 index.js다음과 같습니다.

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'));

기록 개체에 대한 참조를 유지하십시오. 즉

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

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

그런 다음 리스너를 추가하여 각 페이지 뷰를 기록합니다. (이것은 window.ga일반적인 방식으로 이미 객체를 설정했다고 가정합니다 .)

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

Google 애널리틱스가로드되고 추적 ID로 초기화된다는 점을 감안할 때.

다음은 <Route>페이지 뷰를 추적하기 위해 구성 요소를 사용하는 react-router 버전 4에 대한 솔루션입니다 .

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

이 구성 요소를 내부에 렌더링하기 만하면 <Router>됩니다 (의 직계 자식이 <Switch>아님).

위치 소품이 변경 될 때마다 페이지 뷰를 발생시키는이 구성 요소 (실제로 아무것도 렌더링하지 않음)가 다시 렌더링됩니다.

저는 React Router v4와 Google Analytics 글로벌 사이트 태그를 사용 하고 있는데,이 글을 작성할 당시 권장되는 것으로 보입니다.

그리고 여기 내 해결책이 있습니다.

다음에서 withRouter 로 래핑 된 구성 요소를 만듭니다 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);

라우터 내에 구성 요소를 추가하기 만하면됩니다 (분석 기능이 사이트 렌더링보다 우선하지 않아야하기 때문에 일치 할 경로와 스위치 구성 요소 뒤에 이상적으로는 생각합니다).

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>
);

명시된 바와 같이 :

withRouter는 렌더 소품과 동일한 소품으로 경로가 변경 될 때마다 구성 요소를 다시 렌더링합니다.

그래서, 때 경로 변경 GoogleAnalytics구성 요소가 업데이트됩니다, 그것은 소품으로 새 위치를 받게됩니다, 그리고 history.action이 될 것이다 PUSH새로운 기록 항목에 대한 또는 POP내가 페이지 뷰를 트리거하지한다고 생각하는 (역사를 뒤로가는 신호를하지만, 당신은 경우를 조절할 수있는 문 componentWillUpdate당신이 적합을 참조로 (당신도 시도 할 수 componentDidUpdate로 this.props대신하지만, 내가 더 잘되는 확실 해요)).

react-router-dom패키지를 사용하는 경우 react-router-4다음과 같이 처리 할 수 ​​있습니다.

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>)
  }
}

이 경우 history패키지 ( npm install history) 를 설치해야합니다 . 이것은 이미 react-router-dom의 종속성이므로 여기에 페이지 가중치를 추가하지 않습니다.

또한 참고 : BrowserRouter 구성 요소를 사용하고 이러한 방식으로 GA 추적을 계측하는 것은 불가능합니다. BrowserRouter 구성 요소 는 Router 개체를 둘러싼 정말 얇은 래퍼 이기 때문에 괜찮습니다 . 우리와 함께 여기에 BrowserRouter 기능을 다시 <Router history={history}>곳 const history = createBrowserHistory();.

react-router-ga특히 BrowserRouter래퍼를 사용할 때 매우 가볍고 구성하기 쉬운 우수한 패키지를 사용하는 것이 좋습니다 .

구성 요소를 가져옵니다.

import Analytics from 'react-router-ga';

그런 다음 간단히 다음을 추가 <Analytics>하십시오 BrowserRouter.

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

Mark Thomas Müller가 여기에서 제안하는 방식이 마음에 듭니다 .

당신에 하는 index.js

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

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

경로 :

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>
        )
    }
}

짧고 확장 가능하며 간단합니다. :)

이후 react-router v5.1.0이 쉽게와 많이 해결 될 수있다 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 (...);
};

또한보십시오:

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

다음은 좀 더 스마트 한 버전입니다.

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;

항상 도서관의 권장 방법을 따르십시오.

React-GA 문서에서 React Router와 함께 사용하도록 권장되는 커뮤니티 구성 요소를 추가했습니다. https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

이행

import withTracker from './withTracker';

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

암호

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;

먼저 index.js에서 onUpdate 함수를 설정하여 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>
  );
}

그리고 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)};
}

다음은 몇 가지 해결 방법으로 모든 경로를 추적하는 가장 간단한 방법입니다.

npm i --save history react-ga

파일 생성 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

그런 다음 설정된 위치로 가져옵니다. 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

참조 :

구스타보 곤잘레스 | medium.com

역사 | GitHub

세그먼트 분석 라이브러리를 사용하고 React 빠른 시작 가이드 에 따라 react-router 라이브러리를 사용하여 페이지 호출을 추적 하는 것이 좋습니다 . <Route />페이지가 렌더링 될 때 구성 요소가 처리 하도록 허용하고 componentDidMount호출을 호출 하는 데 사용할 수 page있습니다. 아래 예는이를 수행 할 수있는 한 가지 방법을 보여줍니다.

    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>
        );
      }
    }

저는 https://github.com/segmentio/analytics-react 의 유지 관리자입니다 . Segment를 사용하면 추가 코드를 작성하지 않고도 여러 분석 도구 (250 개 이상의 대상 지원)를 사용하는 데 관심이있는 경우 스위치를 켜고 끌 수 있습니다. 🙂

해시 또는 브라우저 기록을 사용하는 경우 다음을 수행 할 수 있습니다.

import trackingHit from 'tracking';

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

여기서 ./tracking.es6

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

index.js를 사용한 기본 react-ga 구현

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'));

@ david-l-walsh 및 @bozdoz 제안을 기반으로 함

window.ga('set','page','{currentUrl})및 window.ga('send', 'pageview');기능 을 실행 하고 라우터 페이지에서 직접 쉽게 사용되는 HOC를 만들었습니다 .

이것은 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;

라우터 페이지에서 다음과 같이 사용됩니다.

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

일부 이벤트 (onClick 등)에서 동적으로 URL을 업데이트하려면 다음을 사용할 수 있습니다.

 //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);