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 が必要… )

関連トピック

ご興味あったら懇親会の時にでも話しかけてください

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