Google OptimizeをSPAやClient side renderingのサイトで使う方法
ウェブアプリにおいて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を表示することが可能になります。
1.カスタムイベントに有効化タイミングを変更する (optimize.activateに変更)
2.ページ遷移する度にカスタムイベント (optimize.activate) を送る
2番目の「ページ遷移する度にカスタムイベント (optimize.activate) を送る」という手順ですが、具体的には記事に書いてあるとおり、以下のJSをページ遷移の際と、page loadの際に実行します。
dataLayer.push({'event': 'optimize.activate'});
エンジニアの方に「page loadの際と、pathもしくはrouteが変わる度にこれ実行してほしいんだけど、、」とお願いすれば大丈夫なはずです。
正しく実装されてるか確認する方法
設定した後に正しくeventが発火しているかどうか確認する必要があるかと思いますが、こちらはGoogle tag managerのプレビューモード等で確認すると一番楽かと思います。
プレビューモードにて、Page loadとページ遷移時の際にこんな感じに表示されてればOKです↓
こんな感じでひとまず設定できるかと思いますが、他にもハマる点があったら教えてください。何か質問あればTwitter等でDMください!
この記事が気に入ったらサポートをしてみませんか?