KOBITブログ

Single Page ApplicationでGoogleオプティマイズを使ったABテストを行う

この記事は約 5分 で読めます。


SPA(Single Page Application)というと管理画面などの複雑なページに使われるイメージがありますが、最近はVue.jsベースのフレームワーク『Nuxt.js』やReactベースの静的サイトジェネレーター『Gatsby.js』の普及に伴い、コーポレートサイトやブログなどの実装にもSPAが使われるようになってきました。
ただし、従来のトラッキングコードはページ読み込み時に処理が開始される前提になっているため、SPAでページ遷移した時にコードが動かない場合があります。今回は『Googleオプティマイズ』というA/Bテストを行うサービスをSPAで動作させる方法を紹介します。

Googleオプティマイズとは?

GoogleオプティマイズはA/Bテストを行うサービスです。事前に管理画面でA/Bテストのパターンを設定し、ページが読み込まれた時に、ユーザーごとにパターンを割り当てて表示を行います。
通常、A/Bテストを行おうとすると、アプリケーションのコード中にA/Bパターンを設定し、ユーザーごとにパターンを割り当て、コンバージョンに至ったかを記録する必要がありました。しかし、Googleオプティマイズを利用すると、管理画面が事前に用意されており、Google Analyticsと連携してコンバージョンに至ったかを記録、どのパターンが優れていたかをひと目で確認できます。

オプティマイズを利用するには、A/Bテストを利用したいサイトに対してトラッキングタグを配置します。[^1] タグを設置した上で、A/Bテストを有効化すると、ページが読み込まれたタイミングで要素の置き換えを行います。

[^1]: Google Analyticsに対してコードを追加または、Google Tag Managerを利用して設置します。

SPAでの導入方法

通常のサイトはページが読み込まれたタイミングに実行されれば問題はありませんが、SPAでは訪問ページのみページが読み込まれたと判断されるため、ページ遷移を伴って対象ページに訪問してもA/Bテストは動作しません。
しかし、GoogleオプティマイズにはA/Bテストの起動タイミングを変更できる「アクティベーション イベント」という設定項目が用意されています。この設定を変更することでSPAでも動作させられます。

Googleオプティマイズ側の対応

Googleオプティマイズを開き、対象のエクスペリエンス(A/Bテスト)を開きます。
ページ下部の「設定」欄に「アクティベーション イベント」という項目があるので、鉛筆マークの編集ボタンをクリックします。

編集ボタンを押すと、編集フォームが表示されるので、「評価するイベント」から「カスタムイベント」を選択し、「イベント名」には「optimize.activate」と入力しましょう。

この項目はエクスペリエンスごとに設定する必要があるので、忘れないようにしましょう。

アプリケーション側の対応(初回のみ)


先程設定した、アクティベーションイベントを発生させるための実装を行います。
実装としてはSPAで遷移が起こるタイミングで次のコードを実行するだけです。

※ dataLayerはGoogle Tag Manager(GTM)タグを有効にした際に設定されるグローバル変数です。dataLayerでエラーが起こった際はGTMの設定がうまくいってないかもしれません。

以下、Reactの実装例です。

これはアプリケーションに一回実装すればいいので、エンジニアの方は自分で実装を、ビジネスの方はエンジニアにお願いしてみてください。

デバッグ

エクスペリエンス詳細画面のパターンの「プレビュー」を押すと開くドロップダウンメニューから『デバッグ』を選択してください。選択すると、エクスペリエンスの対象URLが新規タブで開かれます。

開かれたページの下部でオプティマイズの動作を確認できます。
ページ表示の際に動作しているか、別のページから遷移した時に動作しているかを確認してみましょう。

以上のような方法を使えば、SPAでも簡単にA/Bテストを行えます。A/Bテストを自前で実装するのも選択肢としてはありですが、Googleオプティマイズのようなサービスを使うことでエンジニアでなくても簡単にA/Bテストを実施できる利点を享受してみてはどうでしょうか?


CATEGORY:
まずは無料ユーザー登録。
すぐに始められます。