개요

SPA는 네이티브 앱과 손색없는 체험 설계를 할 수 있습니다만, 비동기 통신의 특성상Google Optimize으로 A/B 테스트를 하기 위해서는, 특별한 방법이 필요합니다.
하는 방법마저 알면 간단합니다만, 일본어로 정리된 문서가 없었기 때문에, 스스로 만들기로 했습니다.
GTM (Google 태그 관리자)을 사용하여 Optimize를 배포하는 방법은 Google 공식에서 비추천이므로 직접 코드를 포함합니다.

Gatsby 설치

npm install -g gatsby-cli

Gatsby로 사이트 만들기

gatsby new [site name] https://github.com/gatsbyjs/gatsby-starter-default

Google Optimize 준비하기

옵티마이즈 스니펫과 안티 플리커 스니펫을 gatsby-ssr.js에 설명하여 Google Optimize를 사용할 준비를하십시오.
Gatsby라면 플러그인이 있지만 Optimize에서 경고가 나왔으므로 직접 코드를 삽입합니다.

import React from 'react';

export const onRenderBody = ({ setHeadComponents }) => {
 if (process.env.NODE_ENV === `production`) {
   setHeadComponents([
     // オプティマイズスニペット
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-........."></script>,
     <script
       dangerouslySetInnerHTML={{
         __html: `
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'UA-.........', { 'optimize_id': 'GTM-.........'});
         `
       }}
     />
   ])
 }
}

추가 (2019/12/8)

아래에 나오는 맞춤 이벤트 타이밍에서 테스트를 시작하는 경우 안티 플리커 스니펫이 필요하지 않은 것 같습니다.
Optimize 설치 진단을 실행하면 안티 플리커 스 니펫을 포함하는 것이 좋습니다. 특히 문제는 없습니다.

테스트 활성화 타이밍 변경

SPA의 경우, 디폴트의 설정인 페이지 로딩시에 그대로 테스트를 실시하면, 페이지 로드시에 일순간 테스트 결과가 반영되어, 그 후 JS로 테스트 결과를 덧쓰기되어 버립니다.
그렇게 되면, Optimize상에서는 50/50입니다만, 실제로는 오리지날의 디자인의 묘화가 증가합니다. 덮어쓴 경우에도 변경된 B 패턴으로 기록되므로 숫자에 오류가 발생합니다.
또, SPA는 로드가 발생하지 않기 때문에, 페이지 로드시의 그대로의 설정이라면, 천이했을 때 테스트 결과가 반영되지 않습니다.
그러면 어려움이 있으므로 활성화 타이밍을 커스텀 이벤트 발화 후으로 설정합니다.

맞춤 이벤트 포함

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

위의 코드를 테스트하려는 페이지에 포함합니다.

import React, { useEffect } from "react";

const IndexPage = ({ location }) => {
   useEffect(() => {
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({'event': 'optimize.activate'});
   }, [location.pathname])
   return (
     <div>...</div>
   )
}
export default IndexPage;

Google Optimize 측 설정

경험을 만든 후에는 테스트 활성화 타이밍을 optimize.active로 설정합니다.

디버깅

패턴을 추가한 후 제대로 작동하거나 디버깅합니다.

오류가 발생하지 않으면 완료됩니다.