ウェブアプリにおいてABテストを行う方法いくつかあると思いますが、その内の一つにGoogle Optimizeというものがあります。

他の記事等でGoogle Optimizeについて書こうと思いますが、簡単にまとめるとこんな感じのサービスです↓

・簡単にセットアップできる
・UI系のテストがエンジニアでなくても作れたりする
・テストの評価方法が比較的よさげ
・Google Analyticsのデータとつなぎ込める

このように、結構便利なサービスなのですが、Single page application (SPA) やClient side rendering (CSR) などに対応させる際少し手順が分かりづらかったりするので、記事にしようと思いました。（実際自分もサイトのRearchitectureに携わった際につまづいたりしました）

基本的にはこの記事を参照しながら進めるのがおすすめです。

テスト有効化のタイミングを変更する

この記事で書かれているように、Optimize上でのテストが有効化されるタイミングを

デフォルト→ Page load
変更後→ カスタムイベント

に変更することが可能です。

SPAの場合、別ページに遷移してもPageが新しくloadされるわけではないので、デフォルトの設定でSPAでABテストを行ってしまうと、最初のPage loadのみテストが有効化され、他のページに遷移した際にテストが作動しないことになってしまいます。

下記の手順を行うことによって、SPAやCSRでもページ遷移した際にABテストの別variantを表示することが可能になります。

１．カスタムイベントに有効化タイミングを変更する (optimize.activateに変更）
２．ページ遷移する度にカスタムイベント (optimize.activate) を送る

２番目の「ページ遷移する度にカスタムイベント (optimize.activate) を送る」という手順ですが、具体的には記事に書いてあるとおり、以下のJSをページ遷移の際と、page loadの際に実行します。

dataLayer.push({'event': 'optimize.activate'});

エンジニアの方に「page loadの際と、pathもしくはrouteが変わる度にこれ実行してほしいんだけど、、」とお願いすれば大丈夫なはずです。

正しく実装されてるか確認する方法

設定した後に正しくeventが発火しているかどうか確認する必要があるかと思いますが、こちらはGoogle tag managerのプレビューモード等で確認すると一番楽かと思います。

プレビューモードにて、Page loadとページ遷移時の際にこんな感じに表示されてればOKです↓

こんな感じでひとまず設定できるかと思いますが、他にもハマる点があったら教えてください。何か質問あればTwitter等でDMください！