Next.js의 Middleware를 사용하여 A/B Testing하기 (with GA4)

Middleware

Next.js는 12버전부터 미들웨어를 제공하고 있으며 주로 페이징 요청을 가로채어 필요한 로직을 수행한다. Next.js에서는 이 미들웨어를 활용하여 권한체크, A/B 테스트, 로컬라이징된 페이지 제공, 봇 방지 등의 기능을 수행할 수 있다고 설명한다. 이번 포스팅에서는 이중에서도 A/B 테스트를 미들웨어와 GA4를 사용해서 구현하는 방법을 설명한다.

A/B Testing

A/B 테스트의 정의에 대해 Chat GPT에게 물어보았더니 다음과 같이 대답하고 있다.

 

A/B 테스트는 두 가지 이상의 버전을 비교하여 어떤 것이 더 효과적인지를 비교하는 실험입니다. A/B 테스트는 웹 사이트, 모바일 앱, 이메일, 광고 등 다양한 디지털 마케팅 채널에서 사용됩니다. A/B 테스트는 사용자의 응답을 분석하여 최상의 결과를 얻기 위한 최적화 과정의 일환으로 사용됩니다.

 

A/B 테스트는 대상 그룹을 무작위로 두 그룹으로 나누어 각 그룹에 다른 버전을 제공하고, 그룹의 반응을 비교하여 더 나은 버전을 식별합니다. 예를 들어, 랜딩 페이지의 버튼 색상을 빨간색과 파란색 중 어느 것으로 할지 결정하는 경우, A/B 테스트를 수행하여 빨간색 버전과 파란색 버전을 나누어 제공하고, 사용자의 반응을 비교하여 더 효과적인 색상을 선택할 수 있습니다.

 

A/B 테스트는 데이터 기반의 의사 결정을 가능하게 하므로, 마케터와 디자이너, 개발자 등 모든 디지털 마케팅 팀 구성원들이 협력하여 사용자 경험을 개선하는 데 유용하게 사용될 수 있습니다. 또한, A/B 테스트는 일반적으로 비교적 저렴하고 빠르게 수행할 수 있어, 다양한 가설을 검증하고 최적화된 결과를 얻는 데에 유용합니다.

 

(최고다 챗지피티..)

 

Middleware.tsx 작성

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: "/",
};

const COOKIE_NAME = "main-abtesting";

const MAIN_BUCKETS = ["a", "b"] as const;
const getBucket = () =>
    MAIN_BUCKETS[Math.floor(Math.random() * MAIN_BUCKETS.length)];

export function middleware(req: NextRequest) {
    // 쿠키 값이 있는지 확인하고 없으면 index value를 가져온다.
    const bucket = req.cookies.get(COOKIE_NAME)?.value || getBucket();

    let path = "";
    bucket === "a" ? path = "/new" : path = "/original"

    if (req.nextUrl.pathname.startsWith("")) {
        const res = NextResponse.rewrite(new URL(`${path}`, req.url));
        // 쿠키 없으면(최초 사용자면) 쿠키 세팅
        if (req.cookies.get(COOKIE_NAME)?.value !== "" || req.cookies.get(COOKIE_NAME)?.value !== "main") {
            res.cookies.set(COOKIE_NAME, bucket);
        }

        return res;
    }
}

위 코드는 사용자가 a/b 어느 페이지로 들어갈지 정하고, 또 다음에 들어왓을때 해당 페이지 그대로 들어가게끔 cookie를 이용해서 분기하여 나눠주는 코드이다. 이러면 50%의 사용자는 /new 의 컨텐츠에, 50%의 사용자는 /original의 컨텐츠에 접근한다.

이 과정에서 path를 나눠서 제공하는게 아니라, 각각의 페이지를 기존의 주소에 rewrite 하는 방식으로 구현하기 때문에, 사용자는 이게 a/b 분기처리된 사이트라는것을 인지할 수 없게 한다.

Google Optimize A/B Testing - deprecated

A/B 테스트를 도와주는 도구중에 대표적으로 구글의 옵티마이즈가 존재한다. 그러나 구글 옵티마이즈는 2023년 9월 서비스가 종료될 것임을 예고중이며, 단순히 html 요소 몇개들을 바꾸는게 아니라 페이지 자체를 다르게 하는 경우에는 옵티마이즈를 위한 셋팅이 길어지고 이것저것 설정해줘야 하는 것들이 있어서, 배보다 배꼽이 더 크다는 느낌을 받아 옵티마이즈를 사용하지 않기로 하였다. 옵티마이즈는 GA4에 추가될 A/B Testing으로 대체된다고하니, 굳이 이제와서 옵티마이즈 설정을 할 필요는 없어보였다. 일반적으로 상용화중인 서비스라면 GTM 및 GA4는 거의 대부분 셋업이 되어 있을테니 이쪽을 사용하기로 하였다.

 

GA4 및 GTM Setting

우리는 앞서 A/B 테스트의 분기를 cookie의 정보로 저장하였다. 그러므로 GA4에 추적하고 싶은 전환이벤트 (ex.상품구매 등)에 해당 쿠키의 값을 패러미터로 같이 보내주기만 하면, 아주 쉽게 A/B 각각의 전환률을 트래킹할 수 있게된다.

이를 위해 GTM에 새로운변수를 추가해주자

 

위처럼 아까 정한 쿠키 이름인 main-abtesting의 쿠키를 새로운 변수로 추가해준다. 여기서 정한 변수 이름을 GA4의 맞춤정의의 변수 이름으로 추가해주어야 한다.

GA4 - 관리 - 맞춤정의로 이동하여 해당 변수를 확인할 수 있게 추가해주자. (GA4의 맞춤 기준에 관련해서는 하단에 남겨둔 링크를 참고)

이름은 각자 편한이름으로 정하되, 이벤트 매개변수 항목은 아까 작성한 변수 이름으로 해야한다. 추가한지 얼마 안된 변수는 바로 목록에 나타나지 않기 때문에 목록에 없다면 직접 입력하자.

 

이제 세팅은 끝났고, GA4에 해당 데이터가 쌓이기를 기다리면 된다. (일반적으로 24~48시간까지 소요된다.)

 

다음날 GA4의 보고서를 확인해보면 위처럼 이벤트 결과에 어떤 분기에서 온 유저인지 트래킹 할 수 있다.

 

 

Reference: 

https://osoma.kr/blog/ga4-dimension-metrics/ 

구글 애널리틱스 4 측정기준과 측정항목의 이해(맞춤 측정기준과 맞춤 측정항목)

https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-google-optimize

GitHub - vercel/examples: Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust an