Application)というと管理画面などの複雑なページに使われるイメージがありますが、最近はVue.jsベースのフレームワーク『Nuxt.js』やReactベースの静的サイトジェネレーター『Gatsby.js』の普及に伴い、コーポレートサイトやブログなどの実装にもSPAが使われるようになってきました。従来のトラッキングコードはページ読み込み時に処理が開始される前提になっているため、SPAでページ遷移した時にコードが動かない場合があります。今回は『Googleオプティマイズ』というA/Bテストを行うサービスをSPAで動作させる方法を紹介します。デバッグGoogleオプティマイズとは?GoogleオプティマイズはA/Bテストを行うサービスです。事前に管理画面でA/Bテストのパターンを設定し、ページが読み込まれた時に、ユーザーごとにパターンを割り当てて表示を行います。通常、A/Bテストを行おうとすると、アプリケーションのコード中にA/Bパターンを設定し、ユーザーごとにパターンを割り当て、コンバージョンに至ったかを記録する必要がありました。Analyticsと連携してコンバージョンに至ったかを記録、どのパターンが優れていたかをひと目で確認できます。オプティマイズを利用するには、A/Bテストを利用したいサイトに対してトラッキングタグを配置します。タグを設置した上で、A/Bテストを有効化すると、ページが読み込まれたタイミングで要素の置き換えを行います。Managerを利用して設置します。通常のサイトはページが読み込まれたタイミングに実行されれば問題はありませんが、SPAでは訪問ページのみページが読み込まれたと判断されるため、ページ遷移を伴って対象ページに訪問してもA/Bテストは動作しません。イベント」という設定項目が用意されています。この設定を変更することでSPAでも動作させられます。Googleオプティマイズ側の対応Googleオプティマイズを開き、対象のエクスペリエンス(A/Bテスト)を開きます。イベント」という項目があるので、鉛筆マークの編集ボタンをクリックします。編集ボタンを押すと、編集フォームが表示されるので、「評価するイベント」から「カスタムイベント」を選択し、「イベント名」には「optimize.activate」と入力しましょう。この項目はエクスペリエンスごとに設定する必要があるので、忘れないようにしましょう。アプリケーション側の対応(初回のみ)先程設定した、アクティベーションイベントを発生させるための実装を行います。実装としてはSPAで遷移が起こるタイミングで次のコードを実行するだけです。Manager(GTM)タグを有効にした際に設定されるグローバル変数です。dataLayerでエラーが起こった際はGTMの設定がうまくいってないかもしれません。以下、Reactの実装例です。&lt;div&gt;...&lt;/div&gt;}これはアプリケーションに一回実装すればいいので、エンジニアの方は自分で実装を、ビジネスの方はエンジニアにお願いしてみてください。デバッグエクスペリエンス詳細画面のパターンの「プレビュー」を押すと開くドロップダウンメニューから『デバッグ』を選択してください。選択すると、エクスペリエンスの対象URLが新規タブで開かれます。開かれたページの下部でオプティマイズの動作を確認できます。ページ表示の際に動作しているか、別のページから遷移した時に動作しているかを確認してみましょう。以上のような方法を使えば、SPAでも簡単にA/Bテストを行えます。A/Bテストを自前で実装するのも選択肢としてはありですが、Googleオプティマイズのようなサービスを使うことでエンジニアでなくても簡単にA/Bテストを実施できる利点を享受してみてはどうでしょうか?B!Webマーケティングに役立つ無料ガイド集GoogleAnalytics完全ガイド全121ページでGoogleAnalyticsのあらゆる機能を解説グロースハックの具体的なやり方グロースハックの基本からチームの作り方、海外事例や国内事例まで網羅もっと見るこちらもどうぞ!関連記事GoogleOptimizeの勉強会に参加してA/Bテストを実際に設定してみた。Optimizeでメール通知機能という新しい機能が登場。A/Bテスト納品物クオリティーのアクセス解析レポートを1分で。Reserved.HOMEホームBLOGブログPRICE料金体系Q&Aよくある質問LOGINログインREGISTER会員登録MENU。