web-dev-qa-db-fra.com

Ajout de Google Analytics à React

J'essaie d'ajouter Google Analytics à une application Web React.

Je sais comment le faire dans les sites HTML/CSS/JS et je l’ai également intégré à une application AngularJS. Mais, je ne sais pas trop comment s'y prendre quand il s'agit de réagir.

Avec HTML/CSS/JS, je venais de l'ajouter à chaque page.

Ce que j’avais fait avec AngularJS, c’est d’ajouter GTL et le script GA à index.html et d’ajouter des étiquettes UA aux libellés HTML (et boutons) pour obtenir des clics. 

Comment puis-je faire cela avec React?

S'il vous plaît aider!

reactjsgoogle-analyticsreact-ga
8
Raj

Mise à jour: février 2019
Voyant que cette question faisait l'objet de nombreuses recherches, j'ai décidé d'élargir mon explication.
Pour ajouter Google Analytics à React, je vous recommande d’utiliser React-GA.
Ajouter en exécutant:
npm install react-ga --save 

Initialisation:
Dans un composant racine, initialisez en exécutant:

import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');

Pour signaler une page vue: 

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

Pour signaler un événement personnalisé: 

ReactGA.event({
  category: 'User',
  action: 'Sent message'
});

Plus d'instructions peuvent être trouvées dans github repo

La meilleure pratique pour cette OMI consiste à réagir-ga . Consultez le github rep

12
Matan Bobi

Sans utiliser un paquet, voici comment je le ferais:

Dans votre index.js (dans la méthode render):

    {/* Global site tag (gtag.js) - Google Analytics */}
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
    />
    <script>{injectGA()}</script>

Et en dehors de la classe:

const injectGA = () => {
  if (typeof window == 'undefined') {
    return;
  }
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.Push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
};
2
cameck

Une autre excellente bibliothèque que vous pouvez vérifier est redux-beacon .

Il s’intègre très facilement à l’application react/redux et dispose d’une excellente documentation. ReactGA est également utile, mais avec redux-beacon, vous n'encombrerez pas le code de votre application avec le code Google Analytics car il fonctionne via son propre middleware. 

2
utkarsh

Je suggère d’incorporer le script Segment dans votre index.html, d’utiliser la bibliothèque d’analyses accessible sur l’objet window et d’ajouter des appels de suivi aux gestionnaires d’événements de React:

export default class SignupButton extends Component {
  trackEvent() {
    window.analytics.track('User Signup');
  }

  render() {
    return (
      <button onClick={this.trackEvent}>
        Signup with Segment today!
      </button>
    );
  }
}

Je suis le responsable de https://github.com/segmentio/analytics-react . Je vous recommande de vérifier si vous souhaitez résoudre ce problème en utilisant une API unique pour gérer les données de vos clients et pouvoir l'intégrer à tout autre outil d'analyse (nous prenons en charge plus de 250 destinations) sans écrire de code supplémentaire. ???? 

0
William