웹 실험 구현

웹 실험을 사용하려면 웹사이트에 추가할 독립형 스크립트가 필요합니다. 스크립트를 사이트의 <head> 요소 내 최대한 상단에 붙여넣어 깜박임을 방지하십시오.

이 스크립트는 사이트에 이미 설치된 브라우저 SDK 또는 타사 분석 SDK를 사용하여 노출 이벤트를 추적합니다.

실험 스크립트 추가

아래의 해당 지역용 동기식 스크립트 중 하나에서 API_KEY을(를) 프로젝트의 API 키로 바꾸십시오.

<script src="https://cdn.amplitude.com/script/API_KEY.experiment.js"></script>

Content-Security-Policy: script-src *.amplitude.com unsafe-inline;

깜박임 방지 코드가 있는 비동기 스크립트

위의 동기식 스크립트는 사용자에게 최상의 환경을 제공합니다. 스크립트를 비동기식으로 로드하려면 다음 깜박임 방지 스니펫을 포함하십시오. 이 스니펫은 Amplitude가 모든 변경 사항을 적용할 때까지 페이지의 요소를 마스크합니다. API_KEY을(를) 프로젝트의 API 키로 대체하고 시간 초과를 설정하여 깜박임 방지 마스크가 지워지는 시기를 제어합니다.

<script>
  (function (d, h) {
    // TODO: Replace API_KEY with your API key.
    var apiKey = "API_KEY";
    // TODO: Set a timeout in milliseconds for the anti-flicker.
    var timeout = 1000;
    // Hides the page and loads the script. Shows page if script fails to load,
    // otherwise the script shows the page.
    var id = "amp-exp-css";
    try {
      if (!d.getElementById(id)) {
        var st = d.createElement("style");
        st.id = id;
        st.innerText =
          "* { visibility: hidden !important; background-image: none !important; }";
        h.appendChild(st);
        window.setTimeout(function () {
          st.remove();
        }, timeout);
        var sc = d.createElement("script");
        sc.src =
          "https://cdn.amplitude.com/script/" + apiKey + ".experiment.js";
        sc.async = true;
        sc.onerror = function () {
          st.remove();
        };
        h.insertBefore(sc, d.currentScript || h.lastChild);
      }
    } catch (e) {
      console.error(e);
    }
  })(document, document.head);
</script>

타사 고객 데이터 플랫폼과 통합

Amplitude 이외의 고객 데이터 플랫폼(CDP)을 사용하여 이벤트를 전송하는 경우, 사용자 ID 정보를 제공하고 이벤트를 추적하도록 연동을 설정하세요. 연동이 없는 경우 스크립트는 Amplitude Browser SDK가 동일한 사이트에 설치되어 있다고 가정합니다.

웹 실험 스크립트는 스크립트 URL의 integration 쿼리 매개 변수를 통해 일반적인 CDP 연동을 지원합니다.

Segment 연동

웹 실험은 기본적으로 세분화 기준을 지원합니다. 스크립트 URL에 쿼리 매개변수로 integration=segment를 추가합니다. 예를 들어, Amplitude의 미국 지역에서는 다음과 같습니다.

<!-- Replace API_KEY with your project's API key -->
<script src="https://cdn.amplitude.com/script/API_KEY.experiment.js?integration=segment"></script>

Tealium 연동

Tealium iQ 또는 Tealium AudienceStream & Universal Data Hub를 사용하여 Tealium을 통해 이벤트를 전송하는 경우, 연동을 설정할 필요가 없습니다. Tealium은 Amplitude 애널리틱스 SDK를 사이트에 로드하며, 이는 웹 실험 스크립트와 직접 통합됩니다.

맞춤형 통합

IntegrationPlugin 인터페이스를 구현하고 experimentIntegration window 변수를 설정하여 사용자 지정 연동을 추가합니다. 플러그인 스크립트를 웹 실험 스크립트 태그 앞에 놓습니다.

• getUser(): object: 실험 사용자 객체를 반환합니다.
• track(): boolean: 제3자를 통해 이벤트를 추적합니다. 추적이 성공했을 경우 true를 반환합니다. false을(를) 반환하면 Amplitude는 이벤트를 유지하고 일정 간격으로 재시도합니다.
• setup(): Promise<void>: (선택 사항) 연동을 비동기식으로 설정합니다. 연동이 getUser()에서 사용자 정보를 반환할 수 있을 때 이행되는 promise를 반환합니다.

<script>
  window.experimentIntegration = {
    getUser: () => {
      // TODO: Return user
      return {
        user_id: "user",
        device_id: "device",
      };
    },
    track: (e) => {
      // TODO: Track event
      analytics.track(e.eventType, e.eventProperties);
      return true;
    },
  };
</script>
// TODO: Add the Web Experiment script tag

고객의 CDP를 위한 맞춤형 연동에 대한 지원을 받으려면 지원 팀에 문의하십시오.

콘텐츠 관리 시스템

Amplitude Web 실험은 사용자 지정 스크립트를 지원하는 모든 콘텐츠 관리 시스템(CMS)을 지원합니다. Amplitude는 WordPress 및 Shopify용 플러그인을 제공합니다.

워드프레스

Amplitude의 Wordpress 플러그인은 Amplitude 분석, 실험 및 세션 리플레이를 지원합니다.

Shopify

Amplitude의 Shopify 앱은 귀하의 Shopify 사이트에서 Amplitude 분석, 실험 및 세션 리플레이를 지원합니다.

태그 관리자

Google 태그 관리자와 같은 태그 관리자는 스크립트를 비동기적으로 로드하므로 깜박임이 발생합니다. 태그 관리자는 웹 실험 스크립트를 페이지에 직접 추가하는 작업을 수행하는 동안 시각적 편집기를 사용하여 변형을 생성할 수 있도록 도와줍니다. Amplitude는 프로덕션에서 태그 관리자를 사용하지 말 것을 권장합니다.

구글 태그 관리자(GTM)

사용자 지정 HTML 태그를 사용하여 GTM을 통해 스크립트를 추가하십시오.