웹 실험 작업

액션은 변형이 사이트를 수정하는 방법을 정의합니다. 액션은 특정 페이지가 아닌 변형과 관련이 있으며, 특정 페이지에 적용되어 해당 액션이 적용되는 위치를 제어합니다.

실험은 평가 다음 기간동안 변형 작업을 적용합니다. 평가는 초기 페이지 로드와 세션 기록에서 상태가 푸시되거나 팝될 전체 실행됩니다. 기록 상태가 변경될 때 SDK는 먼저 적용된 모든 요소 변경 사항과 사용자 지정 코드 작업을 되돌린 다음 업데이트된 페이지에 대한 작업을 재평가하고 다시 적용합니다.

요소 변경

요소 변경은 사이트의 기존 요소를 수정합니다. 웹 실험에서는 요소의 내부 텍스트를 편집하거나 시각적 편집기에서 수행한 변경 사항을 기반으로 요소에 스타일을 추가하여 이러한 변경 사항을 적용합니다.

시각적 편집기는 다음과 같은 요소 변경을 지원합니다.

• 표시: DOM에서 요소를 표시하거나 제거합니다.
• 가시성: 요소를 표시하거나 숨깁니다.
• 텍스트: 요소의 내부 텍스트, 색상 및 크기를 업데이트합니다.
• 배경: 배경 이미지 또는 색상을 업데이트합니다.
• 이동: 요소의 위치를 이동합니다.

이미지 및 배경을 변경하려면 URL을 붙여넣는 대신 비주얼 편집기에서 직접 이미지를 업로드할 수 있습니다. Amplitude는 파일을 호스팅하고 해당 CDN URL을 요소에 적용합니다.

URL 리디렉션

URL 리디렉션은 대상 사용자가 실험에서 대상 페이지에 접속할 때 새 URL을 로드합니다. URL 리디렉션은 클라이언트에서 발생하며 3xx응답이 있는 서버 리디렉션과 동일하지 않습니다. 변형이 다른 URL 또는 페이지일 때 URL 리디렉션을 사용하십시오. 예를 들어 이를 사용하여 랜딩 페이지나 CMS에 구축된 페이지의 다른 버전을 테스트할 수 있습니다. URL 리디렉션은 표준 A/B 테스트 및 멀티암드 밴딧과 함께 작동합니다.

URL 리디렉션은 원본 페이지 URL의 전체 쿼리 매개 변수를 유지합니다. 예를 들어 사용자를 https://example.com에서 https://example.com/get-started 로 리디렉션하기 위한 변형을 생성할 수 있습니다. 사용자가 링크https://example.com?utm_source=facebook를 클릭하면 웹 실험은 해당 사용자를 https://example.com/get-started?utm_source=facebook로 리디렉션합니다.

URL 리디렉션 설정

비주얼 편집기를 통해 URL 리디렉션을 변형 작업으로 설정합니다. 처리 변형에 URL 리디렉션을 추가하려면 다음 단계를 수행하십시오.

1. 웹 실험을 만들고 시각적 편집기를 엽니다.
2. 처리 세 점 메뉴를 클릭하고 편집을 선택한 다음 작업 아래에서 URL 리디렉션을 선택합니다.
3. [URL 리디렉션] 패널에서 테스트할 각 URL을 별도의 변형으로 추가하고 **[적용]**을 클릭합니다.

구성 제한 사항

시각적 실험과 Amplitude의 로우 코드 구현은 URL 리디렉션을 사용할 때 다음과 같은 제한을 적용합니다.

리디렉션에 대한 SEO 모범 사례

실험에서 클라이언트 측 리디렉션은 검색 엔진이 페이지를 인덱스화하고 순위를 매기는 방식에 영향을 줄 수 있습니다. SEO 영향을 최소화하려면 다음 모범 사례를 따르십시오.

테스트 다음 기간동안 임시 리디렉션 사용

웹 실험은 window.location.replace을 통해 임시 리디렉션을 시뮬레이션하는 클라이언트측 리디렉션을 사용합니다.302 이 302 신호는 검색 엔진에게 실험 중에 원본 URL을 인덱스화하도록 지시합니다. 제어 페이지에 태그를 사용하지 noindex마십시오. 이는 해당 페이지를 검색 결과에서 noindex제거합니다.

우승자를 선정한 후에는 영구적 서버측 301 또는 308 리디렉션을 구현하여 우승 URL에 링크 자산을 통합하십시오.

변형 페이지에 정규 태그 추가

실험 변형 페이지에 원본(컨트롤) URL을 다시 가리키는 정규 태그를 추가하십시오. 정규 태그는 검색 엔진이 변형을 별도의 페이지로 인덱스화하지 못하도록 방지합니다.

<!-- On the variant/redirect destination page -->
<link rel="canonical" href="https://example.com/original-page" />

SEO에 중요한 페이지에 대해 서버측 리디렉션 선호

SEO가 중요한 페이지의 경우 에지(CDN) 또는 서버 수준에서 서버 측 할당 및 리디렉션을 사용하는 것을 고려하십시오. 서버측 리디렉션은 페이지가 렌더링되기 전에 실행되며,

• 검색 엔진 크롤러가 리디렉션을 안정적으로 해석하도록 보장합니다.
• 사용자의 페이지 깜박임을 최소화합니다.
• 올바른 HTTP 상태 코드를 크롤러에게 제공합니다.

클라이언트측 리디렉션을 사용해야 하는 경우 레이아웃 변화를 줄이기 위해 리디렉션 논리가 <head>에서 실행되는지 확인하십시오.

테스트를 짧게 유지하고 클로킹을 방지하십시오.

사용자에게 Googlebot이 인식하는 것과 다른 콘텐츠나 URL을 표시하지 마십시오. 검색 엔진은 이러한 관행을 클로킹으로 간주하며 귀하의 사이트에 페널티를 부과할 수 있습니다. SEO 드리프트를 방지하기 위해 실험을 즉시 종료하고 결론 후 테스트 로직을 제거하십시오.

목표가 두 URL을 모두 포함하도록 하십시오.

컨트롤 URL과 변형 URL을 모두 포함하는 전환 목표를 정의하세요. Web 실험은 리디렉션을 통해 쿼리 매개변수를 보존하므로 기여와 세션 연속성은 그대로 유지됩니다.

문제가 발생할 경우 Search Console 사용

검색 엔진이 실험 변형 페이지를 예기치 않게 색인화하는 경우, 근본 문제를 해결하는 동안 Google Search Console의 URL 제거 도구를 임시 수정으로 사용하십시오.

사용자 지정 코드

웹 실험은 사용자 지정 코드 작업을 요소 변경 작업의 선택적 부분으로 적용합니다. 사용자 지정 코드 작업을 사용하여 요소를 추가하거나 시각적 편집기가 지원하지 않는 방식으로 사이트를 사용자 정의하는 JavaScript, CSS 및 HTML을 작성할 수 있습니다.

적용 대상 드롭다운을 사용하여 특정 페이지에 사용자 지정 코드를 적용합니다. 드롭다운을 사용하면 활성 상태인 페이지에 따라 다른 코드를 실행할 수 있습니다.

웹 실험은 사용자 지정 코드를 다음 순서로 사이트에 적용합니다.

1. 페이지의 <style>태그에 CSS를 <head>추가합니다.
2. HTML을 DOM 요소로 파싱합니다.
3. JavaScript를 함수로 감싸고 페이지의 <script>태그에 <head>추가합니다.
4. 래핑된 JavaScript 함수를 호출하고 구문 분석된 HTML 및 유틸리티를 인수로 전달합니다.

자바스크립트

Web 실험은 전체 사용자 지정 JavaScript를 함수에 감싸고 변형 액션이 적용될 때 해당 함수를 호출합니다. 이 함수에는 사용자 정의 JavaScript 코드와 함께 사용할 수 있는 두 개의 매개 변수가 있습니다.

• html: DOM 요소 객체로 구문 분석되는 사용자 정의 HTML 코드입니다.
• utils: 사용자 지정 코드에서 사용할 수 있는 유틸리티 함수를 포함하는 객체입니다.

유틸리티

웹 실험은 다음과 같은 유틸리티를 제공합니다.

• waitForElement(selector: string): Promise<Element>: DOM 내에서 선택자와 일치하는 요소를 발견했을 때 해결되는 프로미스를 반환합니다waitForElement. MutationObserver을(를) 사용하여 요소를 감지합니다.

• remove: (()=> void) | undefined: 삽입한 JavaScript 내부에 설정할 수 있는 함수입니다. Web Experiment는 Amplitude가 실험을 재평가하고 변형을 다시 적용할 때 페이지 변경 시remove 함수를 호출합니다.

  이 remove 기능은 페이지가 완전히 새로고침되지 않는 단일 페이지 앱에서 페이지의 변경 사항을 정리하는 데 유용합니다. 예를 들어 특정 페이지에 HTML 요소를 삽입하는 경우 페이지가 변경될 때 해당 요소를 제거하도록 remove함수를 설정하십시오.

HTML

Web 실험은 사용자 지정 HTML을 DOM 요소로 구문 분석하고 해당 요소를 사용자 지정 JavaScript 코드에 전달하여 삽입합니다. 사용자 지정 HTML은 기존 CSS 스타일과 클래스를 사용하거나 사용자가 정의한 새 CSS를 사용할 수 있습니다.

CSS

사용자 지정 CSS 스타일을 사용하여 기존 CSS 클래스와 스타일을 조작하거나 사용자 지정 HTML을 사용하여 추가한 요소에 새 스타일을 추가할 수 있습니다. 웹 실험은 페이지의 <head> 요소 내에 있는 <style> 태그에 사용자 지정 CSS를 추가합니다.

예제

요소 삽입

페이지에 요소를 삽입하려면 다음 패턴을 따르십시오.

1. 페이지에 추가하려는 요소에 대한 HTML 및 CSS를 작성합니다.

2. 새 요소를 삽입할 상위 요소의 선택기를 식별합니다. 부모는 종종 body입니다.

3. 다음 JavaScript 코드를 붙여넣고 2단계의 부모 요소 선택기로 PARENT_SELECTOR업데이트합니다.

   js

   복사

   utils.waitForElement("PARENT_SELECTOR").then(function (e) {
     e.appendChild(html);
     utils.remove = function () {
       html.remove();
     };
   });
   

특정 위치의 상위 요소에 요소를 삽입하려면 appendChild()대신 insertBefore()을 사용하십시오.

배너 추가

이 예제에서는 페이지 상단에 할인 코드 배너를 추가합니다.

utils.waitForElement("body").then(function (e) {
  e.insertBefore(html, e.firstChild);
  utils.remove = function () {
    html.remove();
  };
});

모달 추가

이 예제에서는 1초 지연 후 페이지에 모달을 추가합니다.

var modal = html;
utils.waitForElement("body").then(function (body) {
  // Append the modal element to the body.
  body.appendChild(modal);
  // Get the close button element
  var closeBtn = document.getElementsByClassName("close")[0];
  // When the user clicks on the close button (x), close the modal
  closeBtn.onclick = function () {
    modal.style.display = "none";
  };
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
  // Show the modal after a 1 second delay.
  window.setTimeout(function () {
    modal.style.display = "block";
  }, 1000);
  // Remove the modal on teardown.
  utils.remove = function () {
    modal.remove();
  };
});