HandsOn - Himenon/google-optimize-react-ssr-sample GitHub Wiki

準備

• ngrokが利用できるようにしておいてください https://dashboard.ngrok.com/
• Google Analyticsのアカウント <analytics.google.com/analytics/web/>
• Google Optimizeのアカウント https://optimize.google.com/optimize/home/

手順

git clone https://github.com/Himenon/google-optimize-react-ssr-sample.git
cd google-optimize-react-ssr-sample
yarn
yarn build

サーバーの起動

node ./lib/server.js

PORT 3000で起動します

ngrokと接続

ngrok http 3000

すると、localhost:3000に対するForwardingが貼られます。

https://[hash].ngrok.io

この値をGoogle Analyticsなどで利用します。

Google Analyticsの調整

• ビューの作成
  • 名前： ngrok-test-server
• Tracking IDを取得します

目標を作る

1. 目標設定

• カスタムを選択

2. 目標説明

• 名前：hogeボタンのクリック
• タイプ：イベント

3. 目標の詳細

• カテゴリ: UserInputEvent
• アクション: click
• ラベル: hoge
• すべて「等しい」

保存。hogeをfugaに置換してもう一つ作成

Google Optimize

1. アカウントを作成

• アカウント名: ngrok-test
• コンテナ名: ngrok.io

1. コンテナIDを取得

• アカウント作成後に https://optimize.google.com/optimize/home/#/accounts に訪れると発行されています

1. 開始を選択

• 名前: ボタンクリックのA/Bテスト
• 使用するURLを追加: https://[hash].ngrok.io
• テストタイプ：A/Bテスト

1. パターンの追加

• 空パターンを1つ追加
  • オリジナルとパターン１ができあがる

1. アナリティクスにリンク

• 前回作ったAnalyticsのView(ngrok-test-server)を指定
  • コンテナを削除しない限り後から変更できません
• 目標を指定
  • リストから選択
  • hogeボタンのクリック を追加
• 副目標を追加
  • リストから選択
  • fugaボタンのクリック を追加
• テストIDを取得
  • Analyticsとリンクすると発行されます

テストを開始します。

各種パラメータの埋め込み

• Google AnalyticsのTracking ID
• Google OptimizeのContainer ID
• A/BテストのテストID
• (fuga/hogeのクリック)目標のパラメータ