Server Side Rendering (SSR)を利用したReactのSPAにおけるGoogle OptimizeのABテストの実装方法
ここで紹介するのはサーバーサイド テストとしてドキュメント化されている内容を React で書き起こしたものである。
以下の技術スタックで再現する
サーバーサイド
クライアントサイド
analytics.js
もしくはgtag.js
で割り当てられたテストケースの情報をセットするgtag.js
で Google Optimize のテストケースを設定する<script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "UA-...", { optimize_id: "OPT-...", // https://support.google.com/optimize/answer/7513085?hl=ja send_page_view: true, // https://support.google.com/optimize/answer/7513085?hl=ja /** * @see https://support.google.com/optimize/thread/36142685?hl=en&msgid=36785067 * @see https://stackoverflow.com/questions/50686295/gtag-js-optmize-server-side-implementation-not-working */ experiments: [ { id: "TEST_ID", variant: 1, }, ], }); </script>
gtag.js で Google Optimize のエクスペリエンスの情報をセットする方法は、公式のリファレンスでなかなか見当たらないが、気合で探すと StackOverflow と Support に存在した。
@types/gtag.js
の型情報に明確に存在しないが、gtag("config", "UA-", [CONFIG])
の第三引数は次のような型で拡張可能である。
interface Config { optimize_id?: string; send_page_view?: boolean; // default: true experiments?: { id: string; variant: number; }[]; }
analytics.js
でテストパターンを報告するのはドキュメントにあるGoogle Optimize は Cookie を利用して機能を提供するため、ローカルホストで行う動作確認を行う場合は、
/etc/hosts
を書き換えて、適当なドメインで Optimize を調整すると良い。判定できるように指定してくと良い。
また、簡易に他のユーザーなどに動作確認してもらいたい場合は、ngrok
やinlets
を利用するとよい。
GA
に送信されていることを確認する計測するonClick
などを適当に用意し、GA 上に送信すると、以下のようにexp
が QueryString Params として送信されていれば成功だ。