React.jsアプリケーションにおける、GoogleAnalyticsの組み込みについて ・react-ga等のコンポーネントを利用するより、従来の組み込み方法の方が柔軟 ・pageviewをsendするポイントはreact-router-reduxのlistenerより、react-routerのonEnterフックを利用した方がGAのレポートがうまく出せる

1. React.jsと
GoogleAnalytics
黒澤 直樹 (Bizer Inc.)
Twitter @naoki_kurosawa

2. 自己紹介
黒澤 直樹 (Bizer株式会社)
スモールビジネス向け
クラウド・バックオフィスサービス
「Bizer」
オンライン
顧問 税理士・社労士・弁理士・行政書士・司法書士

3. React.jsアプリケーションのアクセス解析について
1. react-ga とか react-google-analytics イマイチじゃね？
2. Reactアプリ内からsend pageviewするには、reduxより
react-routerから
お話ししたいこと まとめ

4. 1. GoogleAnalyticsの組み込み方
どうする？

5. 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>

6. • どちらもGAの薄いwrapper
 GAのAPIそのまま
react-ga
react-google-analytics とは

7. • ネットワークアクセス回数は減らない
 webpackやgulpでbundleしても、結局scriptタグが
appendChildされてjsがダウンロードされる動き
• 初期化タイミングが遅くなる
 そのうえ、初期化直後はまだAPIを呼べない
• Reactアプリ外からsendしたいときに対応できない
ポイント

8. 1. 従来通り headerにscriptタグを仕込む
結論：GAの組み込み方
<script type=“text/javascirpt>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject …
</script>
コンポーネントを使っても別に良いことがない

9. 2. アプリ内のどこでGAに
pageviewをsendしたらいい？

10. 1. コンストラクタ？
2. componentWillMount？ componentDidMount?
どこにsendするコードを書く？
画面表示用コンポーネントに
書いたらダメ

11. 例えばこんな画面遷移
なぜか？
path: /projects/1/tasks/12
/projects/1/tasks/13
↓
「同じ画面を別データで表示しなおし」

12. 起こるイベント
まったく同じコンポーネント
インスタンスが再利用される
1. componentWillReceiveProps
2. componentWillUpdate
3. render
4. componentDidUpdate
同じインスタンスにプロパティが再設定され、
renderingされるだけ

13. 正解：routingポイント
つまりreact-routerとか
描画されるコンポーネント側ではなく、
URLの変化に応じてコンポーネントを描画する側

14. • react-router-redux の readme
小さな罠
react-router-reduxをlistenしてGAにsendするといいよ
と言わんばかり
別に悪ではないですが…

15. react-router-reduxのlistener
location: {
$searchBase: { search: "", searchBase: "" },
action: "POP"
hash: ""
key: "05036w"
pathname: "/projects/1/tasks/12"
query: { }
search: "”
state: null
}
GAに渡す？
function listener( location )

16. GAのレポート
本来同じ画面のhit
URLにIDが入ってしまい
ばらけてよく分からない
こんなに画面数ないのに

17. 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? )
ルーティング定義ツリーのう
ち、マッチする物がルートか
ら順に配列になっている

18. routesのpathを連結すると
result = nextState.routes.map( e => e.path ).join( "" );
“/projects/:projectId/tasks/:taskId”
これをパスとしてGAにsendするとレポートがいい感じに

19. 1. GAの組み込みはコンポーネント使うより従来の方法がい
いのでは
2. Reactアプリ内からsend pageviewするには、reduxより
react-routerからやった方がレポートがいい感じに作れる
お話ししたこと まとめ

20. • Facebookピクセルはどうする？
 GAと大体同じ
• Google Tag Manager使える？
 使えない(たぶん)
• ネット広告のコンバージョントラッキングどうする？
 独自Tag Manager作る(そしてjQueryが必要…)
関連トピック
ご興味あったら懇親会の時にでも話しかけてください

21. ご静聴ありがとうございました