Reduxビーコンを使用したReact/ReduxアプリでのGoogleAnalytics
Redux Beaconは、Reduxおよびngrxの分析ミドルウェアであり、ディスパッチされたアクションを追跡して、任意の数の分析プロバイダーに送信できます。 サポートされているプロバイダーには、Google Analytics、Segment、およびAmplitudeが含まれます。
この記事では、 Redux Beacon 、Google Analyticsを使用し、単一ページのReactアプリでページビューとイベントを追跡します。 始めましょう!
設定
まず、GoogleAnalyticsアカウントとAnalytics.jsをサイトに追加する必要があることに注意してください。 アナリティクススニペットが他のスクリプトの前に配置されていることを確認してから、スニペットのトラッキングIDをプロパティIDで更新してください。
GoogleAnalytics用のReduxBeaconをインストールするには、npmまたはYarnを使用して、redux-beacon
と@redux-beacon/google-analytics
をインストールします。
$ npm install —save redux-beacon @redux-beacon/google-analytics # or, using Yarn: $ yarn add redux-beacon @redux-beacon/google-analytics
Google Analyticsを使用して作業およびテストする場合は、インストールした可能性のある広告/トラッキングブロッカーでサイトをホワイトリストに登録してください。 私の痛みから学びましょう!
何を追跡するかを定義する
ページビューとイベントの追跡について説明しますが、ReduxBeacon用のGoogleAnalyticsプラグインは、タイミング、eコマース、ソーシャルインタラクション、エラーの追跡もサポートしています。 そのここに関する完全なドキュメントを見つけることができます。
Reduxビーコンは、ディスパッチするすべてのアクションを検査し、そのタイプをイベントマップのアクションタイプと比較することで機能します。 アクションが見つかると、そこで定義した追跡関数が呼び出されます。
const eventsMap = { MY_ACTION_ONE: someTrackingFn(…), MY_ACTION_TWO: someOtherTrackingFn(…) … }
MY_ACTION_ONE
がディスパッチされると、someTrackingFn
が呼び出されます。
ページビュー
Redux Beaconを使用してページビューを追跡するということは、ルートを変更するためのアクションタイプをページビュー機能にマッピングすることを意味します。 この例では、react-redux-router
のLOCATION_CHANGE
イベントを使用します。
import { LOCATION_CHANGE } from ‘react-router-redux’; const eventsMap = { [LOCATION_CHANGE]: ourPageViewFn() };
LOCATION_CHANGE
がディスパッチされるたびに、ページビュー関数が呼び出されます。 この関数を使用して、追跡するデータをアクションから引き出すことができます。
ページビュー関数はどのように見えますか? 完全な例:
import { LOCATION_CHANGE } from ‘react-router-redux’; import { trackPageView } from '@redux-beacon/google-analytics'; const eventsMap = { [LOCATION_CHANGE]: trackPageView(action => ({ page: action.payload.pathname, title: "My amazing page title" })) };
オプションで、trackPageView
関数に渡される矢印関数は、prevState
とnextState
の2つの追加パラメーターを受け取ることもできます。
trackPageView((action, prevState, nextState) => { … })
イベント
Google Analyticsの土地では、イベントはサイト/アプリでの追跡可能なユーザーインタラクションです。 ボタンのクリック、コンテンツのダウンロード、広告のクリックはすべて追跡可能なイベントです。
この追跡定義がどのように見えるか見てみましょう:
const eventsMap = { "DOWNLOAD_CLICKED": trackEvent(action => ({ category: "VideoFile", action: "download", value: action.videoId })) };
この場合、ユーザーがダウンロードボタンをクリックすると、videoId
がカテゴリとアクションとともに追跡されます。
value
は整数でなければならないことに注意してください。
最終ステップ
Reduxビーコンがアクションを読み取る前に、イベント定義をcreateMiddleware
関数でミドルウェアに変換し、reduxストアを作成するときにapplyMiddleware
関数に渡す必要があります。
import { createStore, applyMiddleware } from 'redux'; import { createMiddleware } from ‘redux-beacon’; import { LOCATION_CHANGE } from ‘react-router-redux’; import GoogleAnalytics, { trackPageView, trackEvent } from '@redux-beacon/google-analytics'; const ga = GoogleAnalytics(); const eventsMap = { [LOCATION_CHANGE]: trackPageView(/* ... */), "DOWNLOAD_CLICKED": trackEvent(/* ... */) }; const middleware = createMiddleware(eventsMap, ga) const myReducer = (state, action) => { ... } const myInitialState = {} const store = createStore(myReducer, myInitialState, applyMiddleware(middleware));
これで、ReduxアクションをGoogleAnalyticsで追跡できるようになりました。 ブラウザの検査ツールで[ネットワーク]タブを開いて、魔法が展開するのを確認できます。
要点をまとめると:
- ReduxビーコンとGoogleAnalyticsをサイトにインストールし、ブラウザで広告/追跡ブロッカーを無効にすることを忘れないでください
- イベントマップを定義します。これは、reduxアクションを追跡機能にマップします
- このイベントマップをミドルウェアに変換し、reduxストアに渡します
木が森の中に落ちて、Googleがそれを追跡しない場合、それは音を出しますか? 🕵