Reduxビーコンを使用したReact/ReduxアプリでのGoogleAnalytics

投稿日: 2022-04-20 2022-10-06
タグ: React

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を使用してページビューを追跡するということは、ルートを変更するためのアクションタイプをページビュー機能にマッピングすることを意味します。この例では、 LOCATION_CHANGE からのイベント react-redux-router.

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 関数は、2つの追加パラメーターを取ることもできます。 prevState と nextState.

trackPageView((action, prevState, nextState) => { … })

イベント

Google Analyticsの土地では、イベントはサイト/アプリでの追跡可能なユーザーインタラクションです。ボタンのクリック、コンテンツのダウンロード、広告のクリックはすべて追跡可能なイベントです。

この追跡定義がどのように見えるか見てみましょう：

const eventsMap = {
  "DOWNLOAD_CLICKED": trackEvent(action => ({
    category: "VideoFile",
    action: "download",
    value: action.videoId
  }))
};

この場合、ユーザーがダウンロードボタンをクリックすると、 videoId カテゴリとアクションとともに追跡されます。

ご了承ください value 整数である必要があります。

最終ステップ

Reduxビーコンがアクションを読み取る前に、イベント定義をミドルウェアに変換する必要があります。 createMiddleware 関数とに渡されます applyMiddleware reduxストアを作成するときの機能：

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がそれを追跡しない場合、それは音を出しますか？ 🕵

getdocs

13036