React-Router için Google Analytics nasıl kurulur?

React sitemde Google Analytics'i kurmaya çalışıyorum ve birkaç paketle karşılaştım, ancak hiçbiri örnekler açısından sahip olduğum türden bir kuruluma sahip değil. Birinin buna biraz ışık tutmasını umuyordum.

Baktığım paket react-ga .

Benim render metodum index.jsbuna benziyor.

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

Geçmiş nesnenize bir referans tutun. yani

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

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

Ardından, her sayfa görüntülemeyi kaydetmek için bir dinleyici ekleyin. (Bu, window.ganesneyi zaten her zamanki şekilde ayarladığınızı varsayar .)

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

Google Analytics'in bir izleme kimliği ile yüklendiğini ve başlatıldığını göz önünde bulundurursak.

Burada, <Route>sayfa görünümlerini izlemek için bileşeni kullanan react-router sürüm 4 için bir çözüm bulunmaktadır .

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

Bu bileşeni basitçe <Router>(ancak a'nın doğrudan alt öğesi olarak değil) içinde işlersiniz <Switch>.

Olan şey, konum eğilimi her değiştiğinde, bu bileşenin bir sayfa görüntülemeyi tetikleyen (aslında hiçbir şeyi oluşturmayan) yeniden oluşturulmasına neden olmasıdır.

Bunu yazarken önerildiği görülen React Router v4 ve Google Analytics Global Site Etiketini kullanıyorum .

Ve işte benim çözümüm:

Sarılmış bir bileşeni oluşturma withRouter dan 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);

Bileşeni yönlendiricinize eklemeniz yeterlidir (ideal olarak eşleşecek herhangi bir rotadan ve herhangi bir Switch bileşeninden sonra inanıyorum, çünkü analitik işlevi site oluşturma işleminize göre öncelikli olmamalıdır):

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

Belirtildiği gibi:

withRouter, rota her değiştiğinde, render props ile aynı props ile bileşenini yeniden oluşturacaktır.

Dolayısıyla, rota değiştiğinde, GoogleAnalyticsbileşen güncellenecek, yeni konumu sahne olarak history.actionalacak ve ya PUSHyeni bir geçmiş öğesi için ya POPda geçmişte geriye doğru giden sinyal olacak (ki bu bir sayfa görünümünü tetiklememeli, ancak if ifadelerini componentWillUpdateuygun gördüğünüz şekilde componentDidUpdatedüzenleyebilirsiniz ( this.propsbunun yerine deneyebilirsiniz , ancak hangisinin daha iyi olduğundan emin değilim).

react-router-domPaketi sizden kullanıyorsanız, react-router-4bunu şu şekilde halledebileceğinizi unutmayın:

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

Bunun, historypaketi ( npm install history) yüklemenizi gerektirdiğini unutmayın . Bu zaten bir react-router-dom bağımlılığıdır, bu yüzden buraya herhangi bir sayfa ağırlığı eklemiyorsunuz.

Ayrıca unutmayın: BrowserRouter bileşenini kullanmak VE ga izlemenizi bu şekilde araç olarak kullanmak mümkün değildir. Bu sorun değil çünkü BrowserRouter bileşeni , Router nesnesinin etrafında gerçekten ince bir sarmalayıcıdır. Biz burada BrowserRouter işlevselliği yeniden <Router history={history}>nerede const history = createBrowserHistory();.

react-router-gaÖzellikle BrowserRouterambalajı kullanırken son derece hafif ve yapılandırması kolay olan mükemmel paketi kullanmanızı öneririm .

Bileşeni içe aktarın:

import Analytics from 'react-router-ga';

Ardından şunları <Analytics>ekleyin BrowserRouter:

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

Mark Thomas Müller'in burada önerdiği şekli beğendim :

Senin içinde index.js

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

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

Rotalarınız nerede:

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

Kısa, ölçeklenebilir ve basit :)

Çünkü react-router v5.1.0bu çok daha kolay çözülebilir 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 (...);
};

Ayrıca bakınız:

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

İşte biraz daha akıllı bir versiyon:

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;

Her zaman kitaplığın önerdiği yolu izleyin

React-GA belgelerine, React Router ile kullanılması önerilen bir topluluk bileşeni eklediler: https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

Uygulama

import withTracker from './withTracker';

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

Kod

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;

Öncelikle, index.js'de ga'yı çağırmak için onUpdate işlevini ayarlayın

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

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

İşte bazı çözümlerle tüm yolları izlemenin en basit yolu:

npm i --save history react-ga

bir dosya oluştur 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

ve sonra ayarladığınız yere aktarın 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

Referanslar:

Gustavo Gonzalez | medium.com

Tarih | GitHub

React -router kitaplığını kullanarak sayfa çağrılarını izlemek için Segment analiz kitaplığını kullanmanızı ve React hızlı başlangıç ​​kılavuzunu izlemenizi öneririm . <Route />Bileşenin, sayfa oluşturulduğunda işlemesine ve çağrıları componentDidMountçağırmak için kullanmasına izin verebilirsiniz page. Aşağıdaki örnek, bunu yapabileceğiniz bir yolu göstermektedir:

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

Ben devam ettiren olduğum https://github.com/segmentio/analytics-react . Segment ile, herhangi bir ek kod yazmak zorunda kalmadan birden fazla analiz aracını (250'den fazla hedefi destekliyoruz) denemekle ilgileniyorsanız, bir düğmeyi çevirerek farklı hedefleri açıp kapatabilirsiniz. 🙂

Karma veya tarayıcı geçmişi kullanıyorsanız şunları yapabilirsiniz:

import trackingHit from 'tracking';

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

nerede ./tracking.es6

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

index.js ile temel react-ga uygulaması

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 ve @bozdoz önerilerine göre

Ben yürütmek bir HOC yarattı window.ga('set','page','{currentUrl})vewindow.ga('send', 'pageview'); işlevini doğrudan yönlendirici sayfasında kolayca kullanılan ...

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

ve yönlendirici sayfasında bu şekilde kullanılır:

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

Bazı etkinliklerde (onClick vb. Gibi) url'yi dinamik olarak güncellemek için aşağıdakiler kullanılabilir:

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