Freshmarketer는 실험의 모든 변형(원본 포함)에 대해 JavaScript 및 CSS 스타일시트를 전역적으로 추가할 수 있는 Experiment JS/CSS Editor를 제공합니다.
이 가이드는 Experiment Code Editor가 어떻게 작동하는지 및 어떻게 사용할 수 있는지 이해하는 데 도움이 될 것입니다.
“Experiment Code Editor” 사용하기
Experiment Code Editor는 JavaScript 또는 스타일시트를 작성할 수 있는 장소로, 이는 모든 변형 및 원본에 적용됩니다. 이 옵션은 모든 실험 변형(원본 포함)에 대해 유사한 변경을 해야 할 때 유용합니다.
Experiment Code Editor - Experiment JS (전역 JS)
Freshmarketer의 Experiment JS는 원본을 포함한 모든 변형에 적용되는 JavaScript를 작성할 수 있게 해줍니다.
가장 일반적인 사용 사례는 다음과 같습니다.
- Freshmarketer 실험에서 모든 분석 도구로 데이터 전송.
- 사용자 정의 전환에 대한 목표 추적
- 여러 변형에서 활용할 수 있는 다양한 JavaScript 변수를 정의하고 함수를 포함.
Experiment Code Editor - Experiment CSS (전역 CSS)
Freshmarketer의 Experiment CSS는 원본을 포함한 모든 변형에 영향을 미치는 스타일시트를 작성할 수 있게 해줍니다. 클래스를 정의하고 CSS 속성을 할당하여 모든 변형 및 원본에 전역적으로 적용됩니다.
사용 사례는 다음과 같습니다.
- 특정 요소에 색상 설정
- 호버 특정 속성 정의
- 테이블 요소에 테두리 추가.
“Experiment Code Editor” 찾기
이 옵션은 오버레이된 A/B 테스트 툴바에서 찾을 수 있습니다.
1단계: Freshmarketer의 A/B 테스트 툴바에서 "<>" Experiment Code Editor를 툴바 오른쪽 상단에서 클릭합니다.
2단계: 페이지 하단에 나타나는 텍스트 편집기에서 기본 탭은 JS =>Variation JS이며, 이 외에도 Experiment JS를 찾을 수 있습니다. 아래 제공된 텍스트 영역에 JavaScript 코드를 입력합니다.
Variation JS : 변경 사항은 편집 중인 변형에만 적용됩니다.
Experiment JS : 변경 사항은 원본을 포함한 모든 변형에 적용됩니다.
3단계: 스타일시트를 추가하려면 CSS 탭을 클릭하고 "Variation CSS"를 선택하여 편집 중인 변형에만 변경 사항을 적용합니다. 원본을 포함한 모든 변형에 변경 사항을 적용하려면 "Experiment CSS" 탭을 선택하고 텍스트 영역에 CSS 스타일시트를 입력한 후 "적용"을 선택합니다.
Variation CSS : 변경 사항은 편집 중인 변형에만 적용됩니다.
Experiment CSS : 변경 사항은 원본을 포함한 모든 변형에 적용됩니다.
