web-dev-qa-db-fra.com

React + Routeur + Google Tag Manager

J'ai passé un peu de temps à développer un MVP sur quickcypher.com. Je voulais commencer à intégrer des analyses, et cela fonctionnait très bien pour le suivi du nombre total de visites, mais les choses ont tourné au sud lorsque j'ai essayé de suivre différentes URL sur mon site qui utilise React Router.

Mon approche était la suivante: configurer une balise GA qui se déclenche sur certaines pages, en utilisant un déclencheur pour un événement "pageview" personnalisé. Lorsque les choses se déclenchaient, je définissais la page de champ sur "/ rap "par exemple. J'ai déclenché l'événement dans la méthode" componentDidMount "du composant de niveau supérieur pour chacune de mes vues. À l'aide du débogueur, j'ai vu l'événement se déclencher comme prévu, mais pour la vie de moi, je ne peux pas obtenir = GA pour reconnaître l'événement. GA fonctionne comme prévu lorsque je simplifie la balise pour qu'elle se déclenche sur "toutes les pages", donc je suppose qu'elle a quelque chose à voir) avec React.

Quelqu'un a-t-il réussi à mettre cela en œuvre ou a-t-il rencontré des problèmes similaires? Est-ce que mon approche est fausse? En espérant quelques conseils ... cheers!

google-analyticsreactjsanalyticsgoogle-tag-managerreact-router
19
SleepyProgrammer

Un peu tard pour la fête ici, mais le routeur de réaction ne devrait pas avoir besoin de code spécial pour s'intégrer à GTM. Déposez simplement le script GTM sur votre page (immédiatement après l'ouverture <body> tag comme recommandé) et laissez votre application s'exécuter normalement.

Dans GTM, créez un déclencheur personnalisé pour le changement d'historique.

GTM Trigger Example

Vous pouvez le déclencher sur tous les changements d'historique.

all history changes

Ou seulement sur certains d'entre eux. Uniquement sur votre nom d'hôte de production, par exemple.

only on production

Ensuite, ajoutez une balise pour votre analyse Google (ou autre) et configurez-la pour qu'elle se déclenche sur votre événement de changement d'historique en cliquant sur "Plus" sous "Déclencher" et en sélectionnant le déclencheur créé ci-dessus.

GA Example

Il est également important de modifier les Paramètres avancés de notre balise pour qu'elle se déclenche une fois par événement au lieu d'une fois par page. Sans cela, la balise ne se déclenchera qu'au chargement initial de la page.

once per event

61
chrisguitarguy

Cela peut être dû à une mauvaise configuration de votre compte Google Analytics, mais en supposant que vous pouvez renvoyer l'événement de pageview initial à GA, voici une recette qui s'appuie sur le crochet willTransitionTo de react-router. Il utilise également react-google-analytics . Premier npm install react-google-analytics.

Configurez ensuite votre application comme suit:

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var ga = require('react-google-analytics');
var GAInitiailizer = ga.Initializer;

// some components mapped to routes
var Home = require('./Home');
var Cypher = require('./Cypher');

var App = React.createClass({
  mixins: [Router.State],
  statics: {
    willTransitionTo: function(transition, params, query, props) {
      // log the route transition to google analytics
      ga('send', 'pageview', {'page': transition.path});
    }
  },
  componentDidMount: function() {
    var GA_TRACKING_CODE = 'UA-xxxxx';
    ga('create', GA_TRACKING_CODE);
    ga('send', 'pageview');
  },
  render: function() {
    return (
      <div>
        <RouteHandler />
        <GAInitiailizer />
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={App} >
    <DefaultRoute handler={Home} />
    <Route name="cypher" path="/cypher" handler={Cypher} />
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.body);
});

module.exports = App;
7
pxwise