Google OptimizeでNuxtにA/Bテストする

テスト側の準備の話

今回は、Googleの用意しているツールで以下の3つで準備を行いました。

・Google Optimize

ウェブサイト、A/B テスト、パーソナライズのソリューション - Google オプティマイズ

・Google Analytics

お客様のビジネスに適した分析ツールとソリューション - Google アナリティクス

・Google TagManager

ウェブとモバイル用のタグ管理ソリューション - Google タグ マネージャー

Google Optimize

エクスペリエンスなるものを作成していきます。

任意の名前、テストしたいページのURL、テストのタイプを選んでいきます。

作成したら、パターンを作成していきます。

また、Googleアナリティクスと連携する必要があるので設定していきます。

また今回SPAを扱うので、アクティベーションイベントを設定していきます。

デフォルトだと下記のように、読み込み時のみとなっています。

カスタムイベントを追加しておきます。

これは任意のタイミングで発火させることでA/Bテストを有効化する設定のようです。これをvueのルーティングに合わせて設定しておきます。

この設定が抜けていると、遷移し、コンポーネントの再描画した際にA/Bテストが適用されません。

例えば

↓こんな感じで、最初は作ったパターンがでますが

↓他のページへ遷移すると（コンポーネントが変わると）

↓元のページに戻ると設定したテストの反映が抜けてしまいますのでご注意を。（SPAの性質上）

Google TagManager

タグマネージャーではコンテナを作成していきます。

コンテナにタグを作成します。

Google Optimizeを選択し、オプティマイズのコンテナIDと紐付けます。

また環境変数の登録等も行います。

アナリティクス、タグマネージャーの設定を終え、オプティマイズとの紐付けを完了させておきましょう。

続いて、実際にテストを行うページに各設定で発行したタグを紐づけていきます。

Nuxt側の準備の話

プロジェクト作成

まずは、プロジェクト作成。

$ yarn create nuxt-app OptimizeTest

GTMの追加

今回は、GTMを使ってみた。

ちなみにGTMを使わずに設定することもできるらしい。

nuxt-community/gtm-module

上記のモジュールを導入。

SetUpを参考に導入していく。

GTM-XXXXXXX

ここに作成したGTMのコンテナIDを入れる。

Google アナリティクスの追加

nuxt-community/analytics-module

上記参考に導入。

ちなみにNuxt公式にも記述がある。 -> Google アナリティクスを使うには？

こちらもSetUpを参考に導入していく。

UA-XXXXX-X

ここもGTMのように作成したアナリティクスのトラッキング IDを入れる。

Google Optimizeの追加

index.vueへGoogleOptimizeが発行しているscriptをheadに埋め込む。

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
 head () {
   return {
     script: [
       { src: 'https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXX' }
     ]
   }
 }
})
</script>

↓ ちなみにこういうのもある。

nuxt-community/google-optimize

なぜindex.vueにしたかというと特に意味はないが、/pages配下のコンポーネントに記載すると、ページが切り替わるたびにコンポーネントの作成と廃棄が繰り返されるので、リクエスト数的な意味だとあまりよろしくはないと思うw

なのでnuxtconfigへ書くとかそこらへんはどうぞご自由に。

ちなみにページ単位でA/Bテストしたい場合、おそらくGoogle Optimize側でURLを指定することができるのでNuxt側では特に設定とかを気にする必要はないと思われる。（間違ってたら教えてください）

カスタムイベントの設定

カスタムイベントを入れておきます。

今回はindex.vueにのみ適用なので下記のように、index.vueのmountedに入れておきます。tsを使っている場合はwidnowの型定義に変更を加えておきましょう。(一旦anyにしてます)

// tsであればこんな感じで型拡張する
declare global {
 interface Window {
     dataLayer: any
 }
}

・・・

mounted () {
   if (window.dataLayer) {
     window.dataLayer.push({ event: 'optimize.activate' })
   }
}

デプロイ

今回は、netlifyにデプロイしました。

SPAモードです。

build周りの設定はこんな感じです。Nuxt公式通り。

無事A/Bテスト導入できました。

テストパターンにはGoogle Optimize側で仕込んだalertが出るようになってます。

終わり。