ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  DevOps 投稿者:mori-dev

React.js/redux アプリでの Google Analytics のイベントトラッキングの設定

です。

React.js/redux アプリでの Google Analytics のイベントトラッキング用の設定を紹介します。

ライブラリ

以下のライブラリを用います。

他に開発用に Google Analytics Debugger を導入するとよいかもしれません。

実装

パターン1: 直接タグの属性として設定する

eventTracker のオプション attributePrefix を index.html で以下のように指定しています。こうすることで、接頭辞を ga- から data- に変更しています。ga- だと React.js が Warning: Unknown prop といったワーニングを出すからです。

ga(‘require’, ‘eventTracker’, {
attributePrefix: ‘data-‘,
});

もっともよくある設定の例です。

<NFloatingButton
className={className}
onClick={redirectToOrderPage}
data-on=”click”
data-event-category=”Request”
data-event-action=”Request”
data-event-label=””
>

onTouchTap をつけたタグの場合は、data-on=”click” ではなく data-on=”touchstart” と指定することで、動作します。

<NPrimaryButtonHalfWidth
styleName=”button”
onTouchTap={HogeAction}
label=”ほげほげ”
data-on=”touchstart”
data-event-category=”C1″
data-event-action=”A1″
data-event-label=”L1″
/>

touchstart に対応させるため、eventTracker のオプションを追加しています。

ga(‘require’, ‘eventTracker’, {
attributePrefix: ‘data-‘,
events: [‘click’, ‘touchstart’],
});

パターン2: アクションに対して設定する

一つの UI、たとえばボタンが、複数の用途で使われることがあります。その場合、その UI のタグに、直接 GA の属性を指定するわけにはゆきません。redux-beacon を使うことで、React.js のアクションに、GA の指定を対応づけることができます。

GA_FOO というアクションに対し、GA のカテゴリ C1、GA のアクション A1、GA のラベル L1 を対応づけてみましょう。

まずはアクションを定義します。

import * as ActionTypes from ‘./action_types’;
import { createAction } from ‘redux-actions’;

export const gaFoo = createAction(ActionTypes.GA_FOO);

ミドルウェアを書きます。

あとは、他のミドルウェアと同様に、この googleAnalytics ミドルウェアを applyMiddleware() して createStore() します。

結果の閲覧

Google アナリティクス の Web サイトの以下のページから、結果を閲覧できます。

  • リアルタイムデータ: リアルタイム > イベント
  • 過去データ: 行動 > イベント

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

gyazo_logo
[Gyazo] 今更聞けない?簡単画像共有アプリ Gyazo のプライベート環境構築方法

こんにちわ!ランサーズのsatoshiです。 今回は、ランサーズの開発メンバーがスクリーンショットの共有に利用している Gyazo という技術についてご紹介したいと思います。 Gyazo とは? Gyazo とはもともと、「スクリーンショットの瞬間共有」という …

thumbnail
API仕様書をMarkDownで書き、GitHubをつかって運用する方法

追記 2018/06/05 すぐに試せるサンプルリポジトリ作ったので、使って見てください。 https://github.com/TsuyoshiNumano/api_document_sample 生成されるドキュメント 開発サーバーを立ててリクエストする例 …

thumbnail
Digdagを導入した結果得られたもの

こんにちは、ランサーズ Advent Calendar 2017の14日目を担当します、Digdag大好きなameshoです。 以前の発表では、Digdagの主な機能などを紹介致しました。 今回は、実際にDigdagを導入した結果得られたものは何かをお伝えした …