이전 다른 기사 에서 사용해 이후 Netlify 에 주목하고 있습니다만, 요 전날 git의 브랜치를 나누는 것만으로 Split 테스트를 할 수 있는 기능 가 릴리스 되었으므로 간단하게 소개해 보겠습니다.

절차

플랜 변경

지금까지의 플랜은 레거시 플랜이라고 불리며 사용할 수 없게 되었으므로, 플랜을 변경합니다. 단순히 취소하는 것만으로도 오케이였습니다. 아직 과도기이기 때문인지 잘 모릅니다만, 취소한 뒤 다른 유료 플랜으로 변경하지 않아도 전회 소개한 Prerendering을 사용할 수 있었습니다. 그리고 이번 메인인 Split Testing도 무료 플랜으로 할 수 있는 것 같습니다.

브런치를 만들어 푸시

적당히 브랜치를 만들어 Netlify로 빌드 대상으로 하고 있는 리모트 리포지터리에 푸시 하는 것입니다.

지난번 의 코드에 branch-a와 branch-b를 만들어 다음과 같이 텍스트만 바꾸어 보았습니다.

branch-a

git checkout -b 'branch-a'

Home.js

    <h2>Home of Branch A</h2>

About.js

    <h2>About of Branch A</h2>

branch-b

git checkout -b 'branch-b'

Home.js

    <h2>Home of Branch B</h2>

About.js

    <h2>About of Branch B</h2>

Split Testing 사용

Netlify 설정 화면에서 변경하기만 하면 됩니다. 브랜치당 몇% 표시할지를 설정할 수 있습니다. 3 브랜치 이상도 설정할 수 있습니다만, 3 브랜치 이상으로 하면 볼륨 바 같은 녀석의 움직임이 까다로웠습니다. 2개의 경우는 1개 변경하면 맞추어 100%가 되도록 역측이 자동으로 변경됩니다만, 3개 이상이면 랜덤으로 1개가 변경됩니다... 외형과 달리 그다지 직관적이지 않습니다 네.

확인

다시 로드하거나 다른 탭에서 열어보면 각 브랜치의 페이지가 임의로 표시됩니다. 통계를 가지고 있지는 않지만 설정한대로 대략 균등하게 표시되는 것 같습니다. (단지 문제인지 가끔 공백 페이지가 표시되는 경우가 있습니다. 원인 규명하면 추기합니다.)

브랜치 정보 얻기

이것 또한 공식 페이지에 소개되고 있는 대로입니다만, 브랜치의 정보를 동적으로 취득할 수 있습니다.

예를 들어 React라면 process.env.BRANCH 로 액세스할 수 있습니다.

정적 사이트 제너레이터의 Hugo를 사용하고 있는 경우에는 다음과 같이 하는 것으로 브랜치의 정보를 Google Analytics에 건네주는 것도 할 수 있는 것 같습니다.

<script>
<!-- install Google Analytics' JS tracker before using this code -->
<!-- https://developers.google.com/analytics/devguides/collection/analyticsjs/ -->
ga('send', 'pageview', {
  'Branch':  '{{ getenv "BRANCH" }}'
});
</script>

마지막으로

설정도 쉽고 전환율이 낮은 브랜치를 깨고 다른 Split 테스트도 쉽습니다. 엔지니어적으로도 평상시의 개발 플로우에 간단하게 짜넣을 수 있는 것이 좋네요.

아직 랜덤한 조건에서의 테스트만입니다만, 유저 속성등에 따라서 테스트할 수 있게 되면 더욱 강력해질 것 같습니다.

라는 것으로 간단한 소개입니다만, Netlify 퍼지고 싶으면 기사로 해 보았습니다.