f:id:chuck0523:20190730222918p:plain

Google Optimize を React アプリケーションで使う

概要

AB テストツールである Google Optimize を React.js で作るアプリケーションで使う。

React アプリケーション作成

簡単に React アプリケーションを作成できる create-react-app を使う。

$ npx create-react-app APPLICATION_NAME
$ cd APPLICATION_NAME
$ npm start

APPLICATION_NAME は何でもよい。

Optimize

アカウントが未作成の場合、 Google Optimize にて作成する。

アカウントを作成したら、コンテナを１つ作成し、名前をつける。

コンテナを作成したら、エクスペリエンスを作成する。

名前: My first experience
エディタページ: http://localhost.domain:3000

とする。名前は何でも良い。 Optimize はローカル環境で動かないので、hosts ファイルに編集を加える。

# /etc/hosts
127.0.0.1 localhost.domain

なぜ、ローカル環境で Optimize が動かないかの理由はこちら。

エクスペリエンスを作成したら、パターン(variant) を作成する。パターンのデフォルト名は パターン 1。

パターンを作成したら、Google Analytic のプロパティと連携する。

f:id:chuck0523:20190730212730p:plain

連携ボタンは↑のような感じ。（2019/07/30時点）

連携が完了すると、以下のスニペットがモーダル表示される。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_PROPERTY_ID></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_PROPERTY_ID', { 'optimize_id': 'OPTIMIZE_ID'});
</script>

各 ID はぼかして書いていることに留意。

コードベースに戻り、上記のスニペットを index.html の <head /> 内に貼り付ける。

Google Optimize のダッシュボードに戻り、メインの目標をページビュー数として設定する。

f:id:chuck0523:20190730214010p:plain

「設定」の項目までスクロールダウンして、「オプティマイズのインストール」を実行する。この時、Chrome 拡張のインストールをオススメされる。

「オプティマイズのインストール」が成功すると、遷移先にて以下のようなモーダルが表示される。

f:id:chuck0523:20190730214347p:plain

エクスペリエンスを実行する

ダッシュボードにて、「パターン１」を編集する。

編集ボタンを押すと、localhost.domain:3000 が表示され、編集可能状態に入る。

UI 要素に hover すると、以下のように選択される。

f:id:chuck0523:20190730214829p:plain

p タグ内のテキストを Google Optimize on React! のように編集する。編集が完了したら、保存を選択して、ダッシュボードに戻る。

エクスペリエンスの実行準備が整ったので、「開始」ボタンを押す。シークレットブラウザで localhost.domain:3000 を開くと、ABテストが実行されていることが確認できる。

自前実装する場合

これまでは、Google Optimize のダッシュボードからエクスペリエンスを作成した。

より複雑なテストには自前で実装することもできる。

エクスペリエンスを新規作成し、ダッシュボードの最下部にある「アクティベーションイベント」を選択。すると、右側のモーダルメニューとして「評価するイベント」を選択することができる。

f:id:chuck0523:20190730215948p:plain

これを「カスタムイベント」に設定し、エクスペリエンスを開始する。

すると、コード側からパターン情報を取得できる。

  async componentDidMount() {
    if (window.dataLayer) {
      await window.dataLayer.push({ event: "optimize.activate" });
    }
    this.intervalId = setInterval(() => {
      if (window.google_optimize !== undefined) {
        const variant = window.google_optimize.get("EXPERIENCE_ID");
        this.setState({ variant });
        clearInterval(this.intervalId);
      }
    }, 200);
  }