Download - 20160927 reactmeetup
React.js とGoogleAnalytics
黒澤 直樹 (Bizer Inc.)
Twitter @naoki_kurosawa
自己紹介黒澤 直樹 (Bizer 株式会社 )スモールビジネス向けクラウド・バックオフィスサービス「 Bizer 」
オンライン顧問 税理士・社労士・弁理士・行政書士・司法書士
月額 2,980 円
React.js アプリケーションのアクセス解析について1. react-ga とか react-google-analytics イマイチじゃね?2. React アプリ内から send pageview するには、 reduxより react-router から
お話ししたいこと まとめ
1. GoogleAnalytics の組み込み方どうする?
1. 従来通り header に script タグを仕込む
2. react-ga コンポーネントを使う3. react-google-analytics コンポーネントを使う
analytics.js をどう読み込むか<script type=“text/javascirpt> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject …</script>
• どちらも GA の薄い wrapper GA の API そのまま
react-gareact-google-analytics とは
• ネットワークアクセス回数は減らない webpack や gulp で bundle しても、結局 script タグがappendChild されて js がダウンロードされる動き
• 初期化タイミングが遅くなる そのうえ、初期化直後はまだ API を呼べない
• React アプリ外から send したいときに対応できない
ポイント
1. 従来通り header に script タグを仕込む
結論: GA の組み込み方
<script type=“text/javascirpt> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject …</script>
コンポーネントを使っても別に良いことがない
2. アプリ内のどこで GA に pageview を send したらいい?
1. コンストラクタ?2. componentWillMount ? componentDidMount?
どこに send するコードを書く?
画面表示用コンポーネントに書いたらダメ
例えばこんな画面遷移なぜか?
path: /projects/1/tasks/12/projects/1/tasks/13
↓「同じ画面を別データで表示しなおし」
起こるイベント
まったく同じコンポーネントインスタンスが再利用される
1. componentWillReceiveProps2. componentWillUpdate3. render4. componentDidUpdate
同じインスタンスにプロパティが再設定され、 rendering されるだけ
正解: routing ポイント
つまり react-router とか
描画されるコンポーネント側ではなく、URL の変化に応じてコンポーネントを描画する側
• react-router-redux の readme小さな罠
react-router-redux を listen して GA に send するといいよと言わんばかり
別に悪ではないですが…
react-router-redux の listenerlocation: { $searchBase: { search: "", searchBase: "" }, action: "POP" hash: "" key: "05036w" pathname: "/projects/1/tasks/12" query: { } search: "” state: null}
GA に渡す?
function listener( location )
GA のレポート本来同じ画面の hitURL に ID が入ってしまいばらけてよく分からない
こんなに画面数ないのに
react-router の onEnter フックnextState: { location: { react-router-redux と同じ location 構造 } params: { projectId: "1", taskId: "12" } routes: [ { component: App, ... path: "/" }, { indexRoute: ... path: "projects/" }, { ... path: ":projectId/" }, { indexRoute: ... path: ”tasks/" }, {component: TaskDetail, ... path: ":taskId" } ]}
function onEnter( nextState, replace, callback? )
ルーティング定義ツリーのうち、マッチする物がルートから順に配列になっている
routes の path を連結するとresult = nextState.routes.map( e => e.path ).join( "" );
“/projects/:projectId/tasks/:taskId”
これをパスとして GA に send するとレポートがいい感じに
1. GA の組み込みはコンポーネント使うより従来の方法がいいのでは2. React アプリ内から send pageview するには、 reduxより react-router からやった方がレポートがいい感じに作れる
お話ししたこと まとめ
• Facebook ピクセルはどうする? GA と大体同じ
• Google Tag Manager 使える? 使えない ( たぶん )
• ネット広告のコンバージョントラッキングどうする?独自 Tag Manager 作る ( そして jQuery が必要… )
関連トピック
ご興味あったら懇親会の時にでも話しかけてください
ご静聴ありがとうございました