UX 분석을 위해 Google Optimize 및 Next.js를 사용한 다변량 테스트(MVT)
Google 최적화 서버 측에 대한 추가 세부 정보here
이 가이드에서는 Next.js와 같은 서버 측 앱에서 Google 최적화 MVT(다변량 테스트)를 구현하고 데이터를 Google 애널리틱스 4로 전송하는 방법을 알아봅니다.
전제 조건
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
Reference
이 문제에 관하여(UX 분석을 위해 Google Optimize 및 Next.js를 사용한 다변량 테스트(MVT)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/raufsamestone/multivariate-testing-mvt-with-google-optimize-and-nextjs-for-ux-analytics-4hn0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
