- Published on
Next.jsでGoogle Optmizeを使いABテストを実施する方法
Next.jsでGoogle Optmizeを利用できるようにしたかったのですが、 想定以上に困ったので、Next.jsでGoogle Optmizeを使えるようにする方法を紹介します。
Next.jsではプリレンダリングという便利な機能があり、これがあることでHTMLが事前に生成され、次の画面に遷移する際もページのロードなしにページ遷移が可能になります。
これはストレスなくページ遷移ができるので、UXの観点からは良いのですが、 これがあるために、ページ遷移自体が認識されなくOptmizeでABテストが実行できなくなったりします。 そのため、GAのような設定やOptimizeなどの外部ツールを使う場合は注意が必要です。
それでは、Next.jsでのOptmizeの実装方法を紹介します。 実は簡単で3ステップで導入できます。
Next.jsでのGoogle Optmizeの設定方法
Next.jsにGoogle Analyticsを導入する方法 でも紹介したやり方とほぼ同じやり方で、GAとOptmizeを設定します。 configで設定する際にoptimize_idも設定するのを忘れないでください。
const GoogleAnalyticsWithOptimize = ({ trackingId, optimizeId }) => { const trackingURL = '' return ( <> <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} /> <script dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${trackingId}', {'optimize_id': '${optimizeId}'}); `, }} /> </> ) } export default function App({children}) { const uaTrackingId = 'UA-xxxxxxx-x' const optimizeId='OPT-xxxxxx' return ( <> <Head> <meta content="width=device-width, initial-scale=1" name="viewport" /> {process.env.NODE_ENV == 'production' && <GoogleAnalyticsWithOptimize trackingId={uaTrackingId} optimizeId={optimizeId}/>} </Head> <body> {children} </body> </> ) }
GAとOptmizeの設定
Headに入れたら、対象となるページでuseEffect
を使い、
dataLayer
にevent
を送り、このイベントを基にOptimizeでの設定を行います。
テストする対象ページでの設定
Next.jsではプリレンダリングによりページ遷移が認識されなく、 Optmizeで通常の設定だとうまくいきません。
そこでuseEffect
を使いdataLayer
でoptimize.activate
というイベントを発火させそれをテストする際に使うようにします。具体的には下記のようにして、イベントを発火させてください。イベントの値は違う値にしても大丈夫です。
さっきのコードに以下のようなものを追加してください。
import { useRouter } from "next/router"; import { useEffect } from "react"; const GoogleAnalyticsWithOptimize = ({ trackingId, optimizeId }) => { const trackingURL = '' return ( <> <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} /> <script dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${trackingId}', {'optimize_id': '${optimizeId}'}); `, }} /> </> ) } export default function App({children}) { const router = useRouter() const uaTrackingId = 'UA-xxxxxxx-x' const optimizeId='OPT-xxxxxx' useEffect(() => { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "optimize.activate" }); }, [router.pathName]); return ( <> <Head> <meta content="width=device-width, initial-scale=1" name="viewport" /> {process.env.NODE_ENV == 'production' && <GoogleAnalyticsWithOptimize trackingId={uaTrackingId} optimizeId={optimizeId}/>} </Head> <body> {children} </body> </> ) }
Google Optimizeでの設定
最後に、Google Optmizeでは一番下にある、アクティベーションイベント
のところを変更し、
下記のようにカスタムイベントを選択し、アクティベーション条件をページの読み込みから
、カスタムイベント
のoptimize.activate
が発火されたらに変更します。
これで発火ができるようになります! デバッグする際は、プレビューのところにあるデバッグを選択して、実際に動くかどうかを確認してみてください。
参考: General problems with Google Optimize in React / Next.js