web-dev-qa-db-ja.com

React + Router + Google Tag Manager

Quickcypher.comでMVPの開発に少し時間を費やしてきました。私はいくつかの分析を開始したかったので、総訪問数を追跡するだけでうまくいきましたが、React Router。

私のアプローチは次のとおりです。カスタム「ページビュー」イベントのトリガーを使用して、一部のページで起動するGAタグを設定します。起動すると、フィールドページを「/ rap」に設定しますたとえば、各ビューの最上位コンポーネントの「componentDidMount」メソッドでイベントを発生させていました。デバッガを使用して、期待どおりにイベントが発生しましたが、私の人生では= GAイベントを確認するために。GAは、「すべてのページ」でタグを配信するように単純化すると、期待通りに動作します。 Reactで。

誰かがこれを正常に実装したか、同様の問題に遭遇しましたか？私のアプローチはすべて間違っていますか？いくつかのガイダンスを期待しています...乾杯！

google-analyticsreactjsanalyticsgoogle-tag-managerreact-router
19
SleepyProgrammer

ここでパーティーに少し遅れましたが、リアクティブルーターはGTMと統合するために特別なコードを必要としません。 GTMスクリプトをページにドロップするだけです（開始後すぐに<body>タグを推奨します）、アプリを通常どおり実行します。

GTMで、履歴変更のカスタムトリガーを作成します。

GTM Trigger Example

すべての履歴の変更で起動できます。

all history changes

またはそれらの一部のみ。たとえば、本番ホスト名のみ。

only on production

次に、Googleアナリティクス（またはその他）のタグを追加し、「Fire On」の下の「More」をクリックして上記で作成したトリガーを選択し、履歴変更イベ​​ントで起動するように設定します。

GA Example

また、タグの詳細設定を変更して、ページごとに1回ではなくイベントごとに1回呼び出すようにすることも重要です。これがないと、タグは最初のページの読み込み時にのみ起動します。

once per event

61
chrisguitarguy

これは、Googleアナリティクスアカウントの設定ミスが原因である可能性がありますが、最初のページビューイベントをGAに戻すことができると仮定すると、react-routerのwillTransitionToフックを利用するレシピがあります。 react-google-analytics も使用します。最初 npm install react-google-analytics。

次に、アプリを次のように構成します。

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