웹 실험 설정

웹 실험을 사용하면 새로운 코드 없이 A/B 또는 멀티 암드 밴딧 실험을 만들 수 있습니다. 비주얼 편집기에서 사이트를 열고 실험할 요소를 선택한 다음 해당 콘텐츠나 속성을 직접 변경하십시오.

웹 실험은 페이지를 사용하여 실험 변형이 웹사이트에서 적용되는 위치를 제어합니다. 페이지를 사용하면 사이트의 관련없는 부분에 영향을 주지 않고 특정 URL로 실험 범위를 지정할 수 있습니다.

시작하기 전에

웹 실험을 설정하기 전에 사이트에 웹 실험 스크립트를 구현하십시오.

웹 실험을 만들고 실행하는 것은 기능 실험과 다르지만 일부 단계는 중복됩니다.

웹 실험 설정

웹 실험을 설정하려면

1. Amplitude 실험에서 _실험 > 실험 만들기 > 웹 실험_으로 이동합니다.

2. 새 실험 모달에서 실험의 이름을 지정합니다.

3. 이 실험을 대상으로 하는 페이지의 URL을 입력하고 드롭다운에서 프로젝트를 선택합니다. Amplitude는 이 URL을 사용하여 첫 번째 페이지를 생성합니다. 실험이 작동하려면 이 URL에서 웹 실험을 계측해야 합니다.

   스크립트가 지정한 페이지에 있으면 Amplitude 실험은 시각적 편집기에서 해당 페이지를 실험의 새 변형으로 엽니다.

   처리 변형 작업에는 요소 변경 또는 URL 리디렉션이라는 두 가지 옵션이 있습니다.

4. 페이지 UI의 텍스트, 색상 또는 기타 요소를 변경하려면 요소 변경 사항을 클릭합니다.

5. 변경하려는 요소를 클릭합니다.

6. 편집 도구 모음이 선택한 요소 옆에 열리고 요소의 콘텐츠 편집이나 요소 이동과 같은 빠른 작업이 가능합니다.

   확장 아이콘을 클릭하여 서랍을 열고 CSS 스타일 속성을 편집합니다.

   변경 내용은 현재 변형에 자동으로 적용됩니다.

7. 실험을 위해 변경하려는 각 요소에 대해 이 과정을 반복합니다.

8. (선택 사항) + 를 클릭하여 다른 변형을 추가합니다.

9. 완료되면 계속을 클릭합니다.

실험을 설정한 후 실험의 목표를 정의합니다.

실험의 목표를 정의하려면

1. 페이지 탭에서 실험 대상으로 할 페이지를 설정합니다. 새 페이지를 만들거나 기존의 불러오기 페이지를 재사용하세요. 만들 때 설정한 페이지만 대상으로 삼는 경우 이 단계를 건너뛰십시오.

2. 포함 페이지 위치 드롭다운에서 Amplitude 실험이 이러한 페이지를 식별하는 방법을 지정합니다.

   동일한 패턴을 사용하여 선택한 페이지에서 실험을 제외합니다. 정확한 실험 타겟팅을 위해 페이지를 관리하는 방법에 대해 자세히 알아보세요.

3. 이 실험에 포함하려는 사용자를 대상으로 설정하십시오. 자세한 내용은 잠재고객 타겟팅으로 이동하세요. 웹 실험 잠재고객 타겟팅은 기능 실험과 다르게 작동합니다.

4. 고급옵션 탭에서 전체 옵션을 지정합니다.

5. 저장 후 닫기를 클릭하여 웹 실험 생성을 완료하십시오.

웹 실험을 테스트 및 미리 보기

웹 실험을 실행하기 전에 Amplitude는 각 변형을 테스트하고 미리 볼 것을 권장합니다.

웹 실험을 테스트하려면

1. 테스트 및 미리보기를 클릭합니다. 이렇게 하면 실험이 테스트 계측 모드로 전환되지만 실험이 시작되지는 않습니다. 미리보기 링크가 있는 페이지를 연 사용자만 변경 내용을 경험할 수 있습니다.
2. 모달에서 미리보기를 클릭하여 해당 변형에 대해 변경한 내용을 적용하는 새 탭을 엽니다.
3. 체인 링크 아이콘을 클릭하여 URL을 복사하여 다른 사람들과 공유하십시오.

각 변형을 최소 한 번 테스트하십시오. 실험이 여러 페이지를 대상으로 하는 경우 두 페이지 이상에서 테스트하십시오.

변경 내용이 표시되지 않는 경우 캐시가 새로 고쳐질 때까지 최대 60초 동안 기다립니다. 이 시간 이후에도 변경 내용이 제대로 표시되지 않으면 구성에서 발생 가능한 문제를 확인하십시오. 실험이 진행되지 않는 이유를 진단하려면 Amplitude Chrome 확장 프로그램을 사용하여 잠재고객과 페이지 타겟팅을 조사하고, 노출 상태를 확인하고, 변형을 미리 봅니다.

비주얼 편집기

비주얼 편집기는 실험 생성 시 지정한 URL에 사이트를 로드하고 오버레이를 추가합니다. 비주얼 편집기를 사용하면 사이트의 모든 요소에 액세스할 수 있으므로 실험에 맞게 사이트를 수정할 수 있습니다.

요소를 클릭하면 편집 도구 모음이 선택한 요소 옆에 열리고 요소의 콘텐츠 편집이나 요소 이동과 같은 빠른 작업이 가능합니다. 시각적 편집기의 변경 내용은 현재 변형에 자동으로 적용됩니다.

변경 내용을 실행 취소하거나 다시 실행하려면 비주얼 편집기 탐색 모음에서 실행 취소 및 다시 실행 Cmd+Z버튼을 클릭하거나, 키보드 단축키인 macOS에서는 (실행 취소) 및 Cmd+Shift+Z (다시 실행)Ctrl+Z, Windows와 Linux에서는 (실행 취소) 및 Ctrl+Shift+Z (다시 실행)을 사용하십시오.

이 도구 모음은 다음 섹션과 도구로 구성되어 있습니다.

• 선택기
• 스타일
• CSS
• HTML
• 이동
• 탐색

선택기

선택기는 현재 페이지에서 선택한 요소에 대한 고유 식별자입니다. Web 실험에서는 기본적으로 선택기를 비활성화합니다. 생성된 선택기는 현재 페이지에만 고유하므로 여러 페이지에서 실험을 실행하는 경우 선택기를 업데이트하십시오. 또는 여러 요소를 대상으로 지정하도록 선택기를 편집할 수도 있습니다.

안정성 모범 사례

• 시각적 편집기 동작: 편집기는 가장 짧은 고유 경로를 선택합니다. 여기에는 sm-contentWrapper_ab12c_3와 같이 동적으로 생성된 클래스 이름이 포함될 수 있습니다. 이러한 클래스 값에는 종종 빌드 대상 구간 변경되는 해시가 포함되어 있으므로 선택기가 일치하지 않습니다.

• 클래스에 안정적인 하위 문자열이 있는 경우: 전체 해시된 클래스 대신 안정적인 부분과 일치하는 속성 선택기를 선호합니다.

  css

  복사

  /* Instead of a fragile exact class */
  .sm-contentWrapper_ab12c_3
  /* Use a contains match on the class attribute */
  div[class*="contentWrapper"]
  

  이는 이후 빌드에서 `

를 생성하더라도 같은 요소와 계속 일치합니다sm-contentWrapper_d9f7e_1`.

• 장기적으로 가장 신뢰할 수 있는 접근법: 수정하려는 요소에 안정적인 속성(예: data-*)이나 고유 ID를 추가하고 이를 대상으로 삼는 것입니다.

  html

  복사

  <div data-test-id="experiment-content"></div>
  

  html

  복사

  [data-test-id="experiment-content"] /* or */ #experiment-content
  

섀도우 DOM 내의 대상 요소

웹 실험은 오픈 섀도우 DOM 트리 내의 요소에 변형 변경을 적용합니다. 실험 스크립트는 런타임에 요소 변경을 적용할 때 섀도우 경계를 통해 선택자를 확인합니다.

웹 실험은 닫힌 섀도우 루트 내부의 요소를 타겟팅하는 것을 지원하지 않습니다.

스타일

[스타일] 탭에는 글꼴 크기, 글꼴 색상, 텍스트 정렬, 패딩, 여백, 배경색, 디스플레이, 가시성 등 자주 사용되는 CSS 속성이 포함되어 있습니다.

CSS

CSS 탭을 사용하면 모든 CSS 속성과 값을 정의할 수 있으며, 이를 Amplitude는 선택한 요소에 인라인으로 적용합니다.

HTML

HTML 탭을 사용하면 선택한 요소의 HTML 내용을 편집할 수 있습니다.

이동

선택한 요소를 DOM 트리에서 위 또는 아래로 이동하여 현재 노드에 상대적으로 배치를 조정합니다. 이동 옵션은 기본 도구 메뉴 모음에 나타납니다. 이동 컨트롤은 CSS를 사용하여 요소를 미리 정의된 양만큼 이동하는 대신 페이지의 기본 HTML을 업데이트합니다.

페이지에서 요소를 이동하려면

1. 이동하려는 요소를 클릭합니다.
2. 편집기 메뉴 막대에서 위쪽 또는 아래쪽 화살표 버튼을 클릭하여 요소를 이동합니다. 요소는 한 번에 하나의 주변 HTML 요소를 지나갑니다.
3. 요소를 원하는 위치로 이동할 때까지 버튼을 계속 클릭합니다.

페이지에서 요소를 이동할 때 다음 사항에 유의하십시오.

• 변경 내용이 적용되지 않는 경우 원하는 요소에 대해 올바른 선택기를 선택했는지 확인하십시오.
• 페이지의 CSS 스타일이 업데이트된 위치와 충돌하지 않는지 확인하십시오.
• JavaScript가 변경 사항을 적용한 후 변경 사항을 재설정하지 않는지 확인하십시오.
• 요소를 이동하면 DOM 내의 보이지 않는 요소가 무시됩니다.

요소를 위 또는 아래로 이동하는 것 외에도 재정렬을 클릭하여 미리보기 모드로 들어갑니다. 미리 보기 모드를 사용하면 페이지에서 다양한 요소 배치를 탐색할 수 있습니다.

탐색 모드

탐색 모드를 사용하면 편집기를 종료하지 않고도 실험 내의 페이지 대상 구간 탐색할 수 있습니다.

탐색 모드는 다음과 같은 경우에 유용합니다.

• 다단계 양식, 체크아웃 흐름 또는 온보딩 시퀀스와 같이 여러 페이지에 걸쳐 진행되는 실험.
• 동일한 실험 첫 사용 후 여러 페이지에 걸쳐 변형을 편집합니다.

탐색 모드로 들어가려면

1. 실험을 열고 시각적 편집기에 액세스합니다.
2. 페이지 하단의 기본 도구 모음에서 탐색을 클릭합니다.
3. 사이트를 탐색합니다.
   • 페이지에서 요소를 클릭하면 해당 요소가 실험을 위한 선택 항목 역할을 수행하는 대신 의도한 기능을 수행합니다.
   • 실험에 포함되지 않은 페이지로 이동하여 편집을 시도하면 시각적 편집기에서 페이지 대상 지정 규칙을 업데이트하여 페이지 URL을 포함하고 확인 메시지를 표시합니다.
4. 편집하려는 페이지에 도착했을 때 연필 아이콘을 클릭하여 비주얼 편집기를 다시 편집 모드로 전환합니다.
5. 실험 구성을 완료하기 위해 필요에 따라 편집 모드와 탐색 모드 대상 구간을 전환하십시오.

모바일 시뮬레이터

모바일 시뮬레이터를 사용하면 모바일 장치에 나타나는 실험 변형을 미리 보고 편집할 수 있습니다. 시뮬레이터를 사용하여 비주얼 편집기를 떠나지 않고도 반응형 레이아웃, 모바일 전용 스타일링, 터치 친화적 디자인을 테스트할 수 있습니다.

모바일 시뮬레이터에 들어가려면

1. 실험을 열고 시각적 편집기에 액세스합니다.
2. 페이지 하단의 기본 도구 모음에서 장치 토글의 **'모바일'**을 선택합니다.
3. 또는 요소의 연필 아이콘을 클릭하여 업로드 작업이 포함된 측면 패널을 엽니다.

이미지 업로드

파일을 자체 호스팅하고 URL을 붙여넣는 대신 비주얼 편집기에서 이미지를 직접 업로드하여 기존 이미지 요소를 교체하십시오. Amplitude는 이미지를 저장하고 반환된 CDN URL을 표준 비주얼 에디터 작업으로 요소에 적용하므로, 변경 사항은 변형의 다른 요소 변경과 마찬가지로 작동합니다. 모든 유료 요금제는 이미지 업로드를 지원합니다.

다음 두 곳 중 하나에서 이미지 업로드를 시작하십시오.

• 이미지 요소를 선택할 때 나타나는 요소 도구 모음입니다.
• 상단 메뉴 막대의 삽입 패널(이전에는 위젯이라는 이름)입니다.

이미지를 업로드하려면

1. 비주얼 편집기에서 대체할 이미지 요소를 선택하거나 [삽입] 패널을 열어 새 이미지를 추가합니다.
2. 컴퓨터에서 업로드할 이미지 파일을 선택합니다.
3. Amplitude는 파일을 Amplitude 호스팅 스토리지에 업로드하고 결과 CDN URL을 요소에 적용합니다.