Croct로 개인화 및 테스트하기
마케터는 대시보드(app.croct.com)에서 경험과 실험을 관리합니다. 에이전트로서 당신의 역할은 다음과 같습니다:
- 계획하기: 사용자의 목표를 경험(누가/어디서/무엇을)으로 전환하고, 증명이 필요할 경우 실험(가설, 목표, 할당, 변형)으로 전환합니다.
- 코드 연동하기: 각 대상 영역이 슬롯(slot)인지 확인하고, 전환이
goalCompleted이벤트로 추적되며, 오디언스가 필요로 하는 데이터가 수집되도록 합니다. - 오디언스 작성하기: CQL 조건을 작성합니다. 여기 제공된 레시피를 벗어나는 구문은
croct-cql기술을 참고하세요. - 결과 해석하기: 문서화된 임계값에 따라 대시보드를 읽고, 대시보드가 지원하지 않는 승자를 절대 선언하지 마세요.
실험을 시작, 변경 또는 종료하기 위해 코드 변경이 필요하다고 사용자에게 알리지 마세요. 슬롯과 목표가 이미 존재하면, 나머지는 모두 설정(configuration)입니다.
개념 모델
| 개념 | 설명 | 규칙 |
|---|---|---|
| 경험(Experience) | 하나 이상의 슬롯에서 오디언스에게 표시되는 콘텐츠 | 누가(오디언스), 어디서(슬롯), 무엇을(콘텐츠)로 정의됩니다. 여러 오디언스 허용되며, 각 오디언스에게 콘텐츠 그룹으로 자체 콘텐츠를 제공합니다. |
| 오디언스(Audience) | 사용자의 현재 컨텍스트에 대해 평가되는 CQL 조건 | 모든 사용자 또는 좁은 세그먼트를 대상으로 할 수 있습니다. |
| 우선순위(Priority) | 경험별 고유 순위 | 같은 슬롯에서 오디언스가 겹칠 경우, 더 높은 우선순위의 경험이 적용됩니다. 동점은 허용되지 않습니다. |
| 실험(Experiment) | 경험 내부의 A/B/n 테스트 | 경험 당 한 번에 하나만 가능합니다. 경험의 오디언스와 슬롯을 상속받습니다. 2~5개의 변형(variant)을 가집니다. |
| 기본 목표 ID(Primary goal ID) | 실험이 최적화하는 전환 | 추적되는 goalCompleted 이벤트의 goalId와 일치해야 합니다. |
| 트래픽 할당(Traffic allocation) | 실험에 진입하는 적격 사용자의 % | 나머지 사용자는 경험 콘텐츠를 보게 됩니다. |
주어진 슬롯에 대해 누가 무엇을 보는가:
| 사용자 | 표시 내용 |
|---|---|
| 어떤 경험의 오디언스에도 속하지 않음 | 슬롯 기본 콘텐츠 |
| 오디언스에 속하지만, 실험에 할당되지 않음 | 경험 콘텐츠 |
| 오디언스에 속하고, 할당됨 | 할당된 변형의 콘텐츠 |
| 같은 슬롯에서 여러 경험에 일치 | 가장 높은 우선순위의 경험 |
할당은 결정론적입니다. 방문자 ID가 실험 키와 해시되므로, 새로고침해도 변형이 바뀌지 않습니다. 노출은 자동으로 추적됩니다. 식별된 사용자의 경우, 사용자 ID가 할당 키이므로 변형이 여러 기기에서 사용자를 따라갈 수 있습니다(익명 사용자는 불가능).
무엇을 구축할지 결정하기
| 사용자가 원하는 것... | 구축할 것 |
|---|---|
| 알려진 세그먼트에 대한 다른 콘텐츠 | 오디언스가 있는 경험, 실험 없음 |
| 변경 사항을 출시하기 전에 효과를 증명 | 경험(종종 "모든 사용자") + 실험 |
| 카피, 이미지, 레이아웃 또는 섹션 테스트 | 슬롯에서의 콘텐츠 실험 (하나의 URL, 가능하면 서버 렌더링) |
| 링크가 어디로 가는지 테스트 | CTA 실험: 슬롯이 링크 대상을 보유 |
| 요소(프로모션 배너) 표시 또는 숨기기 | 코드 측 evaluate/useEvaluation 은 개발자가 소유한 고정 로직에만 사용; 그렇지 않으면 불리언 속성과 경험이 있는 슬롯을 사용하여 마케터가 누가 볼지 제어하게 함. croct-integrate-sdk 기술의 평가 규칙 참고 |
| 표시되는 콘텐츠가 아닌 기능이나 흐름 테스트 | 기능 플래그 실험: 불리언 속성이 있는 슬롯, 서버에서 분기 처리 |
| 완전히 별개의 두 페이지 테스트(재구축된 페이지, 다른 템플릿, 다른 도구의 랜딩 페이지) | 리디렉션 실험. 콘텐츠만 다를 경우 콘텐츠 실험을 선호 |
| 하나의 캠페인에서 여러 임계값 또는 세그먼트 (주별 무료 배송) | 하나의 경험, 여러 오디언스, 콘텐츠 그룹 |
| 설정된 시간에 시작, 일시 중지 또는 재개되는 캠페인 | 스케줄링 (애드온), 선택적으로 오디언스의 시간대 기준 |
구현 체크리스트
모든 경험 또는 실험은 구성되기 전에 코드에 다음이 필요합니다:
- 변경되는 각 영역에 대한 슬롯. 없을 경우:
npx croct@latest add slot <slot-id>@1을 실행하고 SDK로 렌더링합니다 (croct-use-cli및croct-integrate-sdk기술 참고). 슬롯이 없으면 어떤 경험도 해당 영역을 변경할 수 없습니다. - 전환에 대한
goalCompleted이벤트 (실험에 필요). 목표 ID는 실험의 기본 목표 ID와 같아야 합니다. 목표가 새로운 것이면 실험을 시작하기 전에 배포하세요. - 해당되는 경우 더 풍부한 전환 이벤트:
orderPlaced,leadGenerated,userSignedUp은 목표와 함께 수익, 리드 및 가입 위젯을 채웁니다. - 오디언스가 읽는 데이터. UTM 매개변수, 위치 및 세션 데이터는 자동입니다; 게시물, 관심사, 주문, 리드 또는 가입을 기반으로 하는 레시피는 해당 이벤트를 추적해야 합니다 (
croct-track-events기술 참고). - 변형이 여러 기기에서 일관되게 유지되어야 하는 경우 사용자 식별.
목표 추적하기
// components/HomeHero.tsx (React; @croct/plug-next는 'use client'와 동일)
import type {ReactElement} from 'react';
import {useContent, useCroct} from '@croct/plug-react';
export function HomeHero(): ReactElement {
const {content} = useContent('home-hero@1');
const croct = useCroct();
function handleClick(): void {
croct.track('goalCompleted', {
goalId: 'hero-cta-click',
});
}
return (
<div>
<h1>{content.title}</h1>
<p>{content.subtitle}</p>
<a href={content.button.link} onClick={handleClick}>{content.button.label}</a>
</div>
);
}
// 일반 JavaScript
import croct from '@croct/plug';
croct.track('goalCompleted', {goalId: 'sign-up'});
이벤트는 선택적 value 및 currency ({goalId: 'signup', currency: 'USD', value: 50})를 허용합니다. 서버 렌더링 PHP 스택에서는 브라우저에서 템플릿 헬퍼(Blade의 @croct ... @endcroct, Twig의 {% apply croct %} ... {% endapply %})로 추적하세요.
전환이 실제로 발생하는 곳인 브라우저에서 목표를 추적하세요. 리디렉션 실험의 경우 두 페이지에서 모두 추적하세요. 전환이 서버(결제 웹훅, 백엔드 가입)에서만 완료되는 경우, @croct/plug/api의 JavaScript SDK 독립형 track을 API 키와 함께 사용하세요: 해당 문서 예제는 서버 또는 샌드박스 스크립트에서 전송된 goalCompleted 이벤트입니다 (croct-track-events 기술 참고). 선택적 userToken을 허용하며, 문서는 토큰 없이 전송된 이벤트가 실험에 어떻게 귀속되는지 명시하지 않습니다.
경험 워크플로우 (대시보드)
이 단계를 사용자에게 전달하세요. 직접 클릭할 수는 없습니다.
- 경험 페이지 > 새 경험, 이름을 지정합니다.
- 오디언스 탭 > 새 오디언스 > CQL 기준을 붙여넣습니다. 여러 오디언스 허용됩니다.
- 슬롯 탭 > 하나 이상의 슬롯을 선택합니다 (일관된 여정을 위해 여러 페이지의 슬롯 결합).
- 콘텐츠 탭 > 슬롯별로 콘텐츠를 편집합니다 (오디언스가 다를 경우 콘텐츠 그룹별로).
- 선택적 실험 탭 (아래 참고).
- 초안 변경 사항을 검토한 다음 게시 (또는 스케줄링) — 또는 미리보기를 먼저 합니다.
개발 중에는 property welcome of page's query is "true"와 같은 오디언스가 사용자가 ?welcome=true로 경험을 토글할 수 있게 합니다. 프로덕션에서는 실제 오디언스로 교체하세요.
상태, 우선순위, 스케줄링, 초안 변경 사항 및 콘텐츠에 대한 자세한 내용은 references/experiences.md를 참조하세요.
실험 워크플로우
- 가설을 작성합니다: 변경 사항, 움직이는 지표, 그리고 그 이유.
- 기본 목표 ID를 선택합니다 (대시보드는 이미 추적된 ID를 제안합니다). 제대로 실행되는지 확인합니다.
- 트래픽 할당을 설정합니다. 틈새 오디언스에는 100%를 사용합니다. 전체 테스트 동안 안정적으로 유지합니다.
- 2~5개의 변형을 만듭니다. 보통 하나는 대조군입니다. 변형은 슬롯 콘텐츠를 복사하거나, 복제하는 대신 경험 콘텐츠를 상속할 수 있습니다.
- 각 변형의 콘텐츠(및 필요한 경우 콘텐츠 그룹)를 설정합니다.
- 사용자가 식별되고 변형을 유지해야 하는 경우 교차 기기 일관성을 활성화합니다.
- 각 변형을 미리보고, 게시한 다음 확인합니다: 변형별 세션이 분할과 일치하는지, 테스트 전환이 올바른 목표 아래에 표시되는지 확인합니다.
테스트 중간에 트래픽 분배를 변경하거나 변형을 추가/제거하지 마세요. 그렇게 하면 결과가 무효화될 수 있습니다.
자세한 내용, 기능 플래그 및 리디렉션: references/experiments.md 및 references/flag-and-redirect-experiments.md를 참조하세요.
결과 읽기
실험 대시보드는 상단에 플래그를 표시합니다. 이에 따라 행동하세요:
| 플래그 | 의미 | 조치 |
|---|---|---|
| 목표 추적(Track your goal) | 기록된 goal 완료 이벤트 없음 | 추적 수정; 다른 것은 의미 없음 |
| 실험 진행 중(Experiment in progress) | 아직 안정적이지 않음 | 대기. 안정화되려면 각 변형 ≥ 1,000 방문자, 각 변형 ≥ 25 전환, 그리고 ≥ 1주일 실행 필요 |
| 권장 승자(Recommended winner) | 안정적이며, 변형의 PBB > 95% 및 잠재적 손실 < 0.1% | 경험에 승리 콘텐츠를 적용하고 실험 중지 |
| 확실한 승자 없음(No clear winner) | 안정적이지만 변형들이 너무 유사 | 승자 없이 종료하거나 새로운 가설 테스트 |
어떤 지표를 읽기 전에 구성된 분할에 대한 변형별 세션을 확인하세요. 지속적인 불균형은 할당 또는 로깅이 특정 사용자 클래스를 누락하고 있음을 의미합니다.
최고 확률(PBB) 및 잠재적 손실은 변형당 베타 분포와 몬테카를로 시뮬레이션을 사용한 베이지안 추론에서 비롯되며, 샘플링 없이 실시간으로 계산됩니다. 설명, 공식 및 모든 대시보드 위젯: references/analytics.md를 참조하세요.
레시피
요약된 플레이북 (ABM, 블로그 독자, 고객, 무료 배송, HubSpot 양식, 관심사, 리드, 위치, 마케팅 캠페인, 오가닉 의도, 검색어), 각각의 오디언스 CQL, 필수 추적 및 제안된 슬롯 포함: references/playbooks.md를 참조하세요.
해야 할 일 / 하지 말아야 할 일
- 해야 할 일: 실험을 게시하기 전에 goal 이벤트를 구현하고 확인하세요. 그것 없이는 실험이 노출을 수집하지만 전환은 수집하지 않습니다.
- 해야 할 일: 틈새 오디언스에 대해 100%를 할당하여 테스트가 통계적 유효성에 도달할 수 있도록 하세요.
- 해야 할 일: 리디렉션보다 슬롯 기반 콘텐츠가 있는 단일 URL을 선호하세요. 리디렉션은 페이지 로드를 추가하고 결과를 왜곡합니다.
- 해야 할 일: 리디렉션을 임시(302/307)로 유지하고 루프를 방지하세요.
- 해야 할 일: 테스트가 끝난 후 코드에서 오래된 기능 플래그 슬롯을 제거하세요.
- 하지 말아야 할 일: 대시보드가 "실험 진행 중"이라고 표시할 때, 또는 원시 횟수(총 주문, 총 가입)만으로 승자를 선언하지 마세요.
- 하지 말아야 할 일: 테스트 중간에 할당이나 변형 목록을 편집하지 마세요.
- 하지 말아야 할 일: 익명 사용자에게 교차 기기 일관성을 기대하지 마세요. 식별된 사용자가 필요합니다.
- 하지 말아야 할 일: 다른 도메인으로 리디렉션하지 마세요. 방문자는 도메인별로 인식되므로 전환이 절대 귀속되지 않습니다. 서브도메인의 경우 먼저 세션을 공유하세요.
- 하지 말아야 할 일: 실험 슬롯을 렌더링하는 페이지를 완전히 사전 렌더링하거나 캐시하지 마세요. 하나의 캐시된 변형이 모든 사용자에게 제공됩니다.
라이브 문서
- 색인:
https://docs.croct.com/llms.txt - 모든 페이지를 마크다운으로:
.md를 추가, 예:https://docs.croct.com/explanation/experiment.md - 검색:
https://docs.croct.com/api/search.md?term=<terms>