프록시 웹 실험

공급업체가 호스팅하는 도메인에서 타사 실험 스크립트를 직접 로드하지 않는 것을 선호하거나, 클라이언트측 실험 평가를 수행하려는 경우도 있습니다. 일반적인 이유로는 보안 정책, 개인정보 보호 제어 및 인프라 소유권의 강화가 있습니다.

프록시 기반 실험 아키텍처를 통해 팀은 중앙 집중식 실험 플랫폼을 사용하는 동안 스크립트 전송, 평가 및 노출 추적을 완벽하게 제어할 수 있습니다.

이 문서에서는 일반적인 프록시 패턴과 이를 지원하는 구현 세부 정보를 간략하게 설명합니다.

스크립트 전송 프록시

고객은 실험용 JavaScript SDK에 대한 요청을 프록시하는 경량 엔드포인트를 호스팅합니다. 최종 사용자는 타사 도메인이 아닌 고객 소유 도메인에서 스크립트를 로드합니다.

이 패턴을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

타사 스크립트 노출을 줄입니다.
내부 보안 또는 컴플라이언스 요건을 준수하세요.

CDN 구성

출처: https://cdn.amplitude.com
경로 재작성: /script/{API_KEY}.experiment.js → /script/{API_KEY}.experiment.js
캐시 TTL: 1–5분(신선도와 성능의 균형을 유지함)
캐시 키: 전체 URL 포함 API_KEY

이전(Amplitude로 직접 연결):

html

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

이후 (프록시를 통해):

html

<script src="https://experiments.acme.com/script/abc123def456.experiment.js"></script>

원격 평가 프록시

웹 실험 스크립트는 원격 평가를 위해 단일 엔드포인트를 호출합니다. 실험의 타겟팅 규칙이 클라이언트에서 로컬로 사용할 수 없는 속성을 하나 이상 참조할 경우 원격 평가가 필요합니다.

이 패턴을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

평가 논리 제어를 중앙 집중화하십시오.
서버측 컨텍스트로 요청을 강화합니다.

프록시 평가 엔드포인트 공개

웹 실험 SDK를 위한 HTTPS 엔드포인트를 생성하고 노출하여 원격 평가를 요청하세요:

URL 예제:

전체 경로: https://experiments.acme.com/sdk/v2/flags?delivery_method=web
기본 URL: https://experiments.acme.com/

SDK는 모든 평가 요청에 이 기본 URL을 사용합니다.

웹 실험 스크립트 구성

Amplitude 호스팅 URL(flag.lab.amplitude.com 또는 flag.lab.eu.amplitude.com) 대신 새로운 엔드포인트를 호출하도록 웹 실험 스크립트 또는 SDK를 구성합니다. 웹 실험 스크립트 위에 다음 코드를 추가하십시오.

html

<script>
  window.experimentConfig = {
    flagsServerUrl: "https://experiments.acme.com/",
  };
</script>

프록시 논리 구현

각 들어오는 브라우저 요청에 대해 프록시는 다음을 수행해야 합니다.

요청 수락

메서드: GET.
쿼리 매개 변수: delivery_method=web.

Amplitude로 전달

미국 프로젝트: https://flag.lab.amplitude.com/sdk/v2/flags?delivery_method=web.
EU 프로젝트: https://flag.lab.eu.amplitude.com/sdk/v2/flags?delivery_method=web.

헤더 삽입

헤더 이름	값	참고 사항
인증	`Api-Key <AMPLITUDE_PROJECT_API_KEY>`	서버에서만 저장 및 관리하십시오. 절대로 브라우저에 노출시키지 마십시오.
X-Amp-Exp-User	`<base64-encoded user object>`	브라우저에서 있는 그대로 전송합니다. `{"user_id": "...", "device_id": "..."}` 포함

반환 응답: Amplitude의 JSON 응답을 변경되지 않은 채 브라우저로 반환합니다.

요청 흐름 예제

브라우저에서 프록시로:

plaintext

GET https://experiments.acme.com/sdk/v2/flags?delivery_method=web
X-Amp-Exp-User: eyJ1c2VyX2lkIjoidXNlciIsImRldmljZV9pZCI6ImRldmljZSJ9

Amplitude로 프록시:

plaintext

GET https://flag.lab.amplitude.com/sdk/v2/flags?delivery_method=web
Authorization: Api-Key <PROJECT_API_KEY>
X-Amp-Exp-User: eyJ1c2VyX2lkIjoidXNlciIsImRldmljZV9pZCI6ImRldmljZSJ9

브라우저에 대한 프록시: Amplitude의 평가 응답을 반환합니다.

응답 형식

엔드포인트는 사용자에 대해 사전 평가된 실험 플래그 객체의 JSON 배열을 반환합니다.

플래그 객체 스키마:

필드	설명
키	실험을 식별하는 고유 플래그 키입니다.
세그먼트	타겟팅 및 버킷팅 규칙은 사용자의 속성을 바탕으로 사전 평가되었습니다. Amplitude는 참인 조건을 포함하고 다른 조건을 제거합니다.
변형	키, 메타데이터 및 웹 실험 동작(변이, 사용자 지정 코드, URL 리디렉션)을 포함한 사용 가능한 변형.
메타데이터	실험 메타데이터: 버전, 배포 상태, 재실행 지표.

응답 예제

json

[
  {
    "key": "example",
    "metadata": {
      "deliveryMethod": "web",
      "deployed": true,
      "evaluationMode": "local",
      "experimentKey": "exp-1",
      "exposureEvent": "$impression",
      "flagType": "experiment",
      "flagVersion": 5
    },
    "segments": [
      {
        "bucket": {
          "allocations": [
            {
              "distributions": [
                { "range": [0, 21474837], "variant": "control" },
                { "range": [21474836, 42949673], "variant": "treatment" }
              ],
              "range": [0, 100]
            }
          ],
          "salt": "G0U0BTSK",
          "selector": ["context", "user", "web_exp_id"]
        },
        "conditions": [
          [
            {
              "op": "is",
              "selector": ["context", "user", "device_category"],
              "values": ["desktop"]
            }
          ]
        ],
        "metadata": { "segmentName": "Segment 1" },
        "variant": "off"
      },
      {
        "metadata": { "segmentName": "All Other Users" },
        "variant": "off"
      }
    ],
    "variants": {
      "control": {
        "key": "control",
        "payload": [{ "action": "mutate", "data": { "mutations": [] } }],
        "value": "control"
      },
      "off": { "key": "off", "metadata": { "default": true } },
      "treatment": {
        "key": "treatment",
        "payload": [
          {
            "action": "mutate",
            "data": {
              "mutations": [
                {
                  "action": "set",
                  "attribute": "html",
                  "metadata": {
                    "scope": ["89e01141-6e35-4bc0-bb66-0e1bc0fd4823"],
                    "type": "text"
                  },
                  "selector": ".md\\:max-w-max:nth-child(1)",
                  "value": "updated text"
                }
              ]
            }
          }
        ],
        "value": "treatment"
      }
    }
  }
]

임프레션(노출) 이벤트 전달

고객이 제어하는 백엔드 시스템은 브라우저가 직접 노출(exposure) 이벤트를 전송하지 않고 실험 플랫폼으로 전송합니다.

이 패턴을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

이벤트 파이프라인을 통합합니다.
데이터 거버넌스 정책 컴플라이언스를 간소화합니다.

이미 Amplitude의 분석 SDK를 사용하고 있는 경우, serverUrl를 통해 브라우저 SDK의 추적 엔드포인트를 업데이트하세요.

Amplitude의 분석 SDK를 사용하지 않는 경우, 웹 실험 스크립트 위에 다음 노출 이벤트 전달 스크립트를 추가하세요.

html

<script>
  // TODO: Replace this object with your tracker implementation.
  const customTracker = {
    track: (eventType, eventProperties) => {
      // TODO: Send eventType and eventProperties to your analytics tool.
      console.log({ eventType, eventProperties });
    },
  };
  window.experimentIntegration = {
    getUser: () => {
      // TODO: Return user.
      return {
        user_id: "user",
        device_id: "device",
      };
    },
    track: (e) => {
      // TODO: Track event
      customTracker.track(e.eventType, e.eventProperties);
      return true;
    },
  };
</script>

이 내용이 도움이 되었나요?