UX 분석을 위해 Google Optimize 및 Next.js를 사용한 다변량 테스트(MVT)

8133 단어 mvtuxoptimizenextjs
서버측 UX 테스트에서 코드는 클라이언트측 평가판에서 Optimize가 수행하는 모든 작업을 수행해야 합니다. 예를 들어 코드는 잠재고객을 대상으로 하고 각 사용자에게 적절한 변형을 일관되게 제공합니다. 실험을 생성하고, 목표를 설정하고, 변수를 생성하고, 보고서를 보려면 Optimize 인터페이스만 사용합니다.

Google 최적화 서버 측에 대한 추가 세부 정보here


이 가이드에서는 Next.js와 같은 서버 측 앱에서 Google 최적화 MVT(다변량 테스트)를 구현하고 데이터를 Google 애널리틱스 4로 전송하는 방법을 알아봅니다.

전제 조건


  • 구글 애널리틱스 4
  • Google 태그 관리자
  • Google 최적화 도구
  • Next.js 앱

    • Next.js 앱에 Google 태그 관리자 추가



    터미널 추가를 열어 NPX로 새로운 next.js 앱을 생성합니다.

    npx create-next-app


    이미 next.js 앱이 있는 경우 _document.js라는 새 파일을 만들고 <Head> 및 <body> 구성 요소에 GTM 스크립트를 추가할 수 있습니다.

    사용자 지정 문서에 대한 자세한 내용은 here 을 참조하십시오.

    // _document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  const GTMID = "GTM-XXXX" // I recommend using .env for this variable.

  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','${GTMID}');`,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTMID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
        }}
      />
      </body>
    </Html>
  );
}


    Google 최적화 계정을 GTM 및 GA4에 연결



    Google 최적화로 이동하고 컨테이너 설정을 클릭합니다. 측정 섹션에서 GA4 속성을 연결합니다.

    그런 다음 최적화 컨테이너 ID를 복사합니다.



    그런 다음 Google 태그 관리자 계정으로 이동합니다. 새 태그를 만들고 Google 최적화를 선택합니다. 최적화 컨테이너 ID를 붙여넣기만 하면 됩니다.



    새 MVT 생성



    Google 최적화 계정으로 이동하여 새로운 경험을 만드세요.

    편집기 페이지 URL 추가



    로컬 컴퓨터에서 작업하는 경우 간단히 localhost:3000/ 또는 호스트 및 포트 이름을 쓸 수 있습니다.

    Google 최적화 편집기 페이지 URL은 슬래시를 구분하므로 슬래시를 추가하는 것이 좋습니다.

    그리고 경험 유형을 다변량 테스트로 선택하십시오.



    잠재고객 타겟팅



    URL 쿼리 매개변수, 쿠키, JS 등과 같은 특정 변수를 사용하여 잠재고객을 타겟팅할 수 있습니다.

    이 워크숍에서는 URL 매개변수를 사용합니다. mvt 와 같은 새 쿼리 키를 추가합니다.



    그리고 true와 같이 쿼리하는 지정된 매개변수를 제공해야 합니다. 또한 규칙을 확인하는 것을 잊지 마세요. 작동하지 않는 경우 게시하기 전에 대상 변수를 디버깅할 수 있습니다.



    실험 배포



    배포하기 전에 변경된 섹션을 확인하십시오. Editor Page인 섹션을 편집하려면 Chrome 및 Google Optimize 확장 프로그램을 사용해야 합니다.



    또한 A1에서 B0 또는 A1에서 B1과 같이 상단 섹션에서 다변량 조합 세부 정보를 확인해야 합니다.

    그리고 실험에서 분리된 변형을 원하지 않는 경우 그에 대한 개인화를 만드십시오. 개인화에 대한 자세한 내용은 here.



    라이브 테스트



    Nextjs 앱 실행

    yarn dev

    http://localhost:3000/?mvt=true로 이동

    실험이 성공적으로 진행되면 방문 페이지에 변형 A1~B0이 표시됩니다.



    세션이 몇 번 변경된 후 변형 A1에서 B1로 이동하는 것을 볼 수 있습니다.




    읽어 주셔서 감사합니다. 👋 Medium에서 저를 구독하는 것을 잊지 마세요. 또는


    Google 최적화에서 리소스 확인here
    swich
    위챗 공중번호 개발 상용 스크립트 누적

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage