최적화 도구로 AMP 실험 측정하기

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

AMP(Accelerated Mobile Pages)는 <amp-analytics> 등 특수 구성요소를 사용하여 활동을 측정하고 <amp-experiment>를 사용하여 실험을 실행합니다. <amp-experiment>를 사용하여 AMP 문서에서 실험을 실행하는 경우 Google 최적화 도구를 사용하여 대안의 실적을 보고하고 목표에 따라 최우수 대안을 선택할 수 있습니다.

이 도움말에서는 최적화 도구를 사용하여 <amp-pixel> 대신 AMP 실험을 측정 및 보고하는 방법을 설명합니다. 구성이 완료되면 Google 애널리틱스 목표 또는 전환을 사용하여 최적화 도구의 베이즈 통계 모델을 알리고 최적화 도구에서 최우수 대안을 선택하도록 허용할 수 있습니다. 이 도움말은 유니버설 애널리틱스 계정에 연결된 속성에 적용됩니다. 최적화 도구는 현재 Google 애널리틱스 4 계정에 대해 AMP 실험을 지원하지 않습니다.

기본 요건

AMP(Accelerated Mobile Pages)에서의 실험

<amp-experiment> 구성요소의 실적을 측정하기 위해 최적화 도구 실험을 만드는 방법은 다음과 같습니다.

  1. AMP 문서의 <HEAD><amp-experiment><amp-analytics> 구성요소가 있는지 확인합니다. 예:
    <script async custom-element="amp-analytics"
            src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-element="amp-experiment"
            src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
    
  2. 최적화 도구 컨테이너에서 AB 테스트를 만듭니다. A/B 테스트를 만들 때 입력한 실험 이름을 기록합니다. 이후에는 실험 이름을 EXPERIMENT_NAME이라고 부르겠습니다.
  3. <amp-experiment> 구성요소에서 대안을 만들고 가중치를 설정합니다. 최적화 도구에서 일치하는 대안을 만들고 가중치를 설정합니다.

    원한다면 최적화 도구 비주얼 편집기를 사용하여 대안을 만들 수 있습니다.

  4. 최적화 도구에서 실험 목표를 설정합니다. 목표에 따라 최우수 대안 선정에 사용되는 통계 모델 및 대안의 원본 대비 실적이 결정됩니다.
  5. 최적화 도구에서 타겟팅할 AMP 문서에 대한 URL 타겟팅 규칙을 만듭니다. 이는 최적화 도구에서 사용되지 않지만 참조용으로 사용할 수 있습니다.
  6. 최적화 도구에서 실험을 시작하고 최적화 도구의 실험 정보 패널에 있는 애널리틱스 실험 ID(23자리 영숫자 값, 예: q0AKJL-XRuCmApEIQelcCg)를 기록합니다. 이후에는 애널리틱스 실험 ID를 EXPERIMENT_ID라고 부르겠습니다.
  7. 올바른 <amp-experiment><amp-analytics> 구성요소를 AMP 문서에 붙여넣습니다.

    예 1: <amp-experiment>

    <amp-experiment>
      <script type="application/json">
        {
          "<EXPERIMENT_NAME>": {
            "sticky": true,
            "variants": {
              "0": 33.4,
              "1": 33.3,
              "2": 33.3
            }
          }
        }
      </script>
    </amp-experiment>
    

    예 2: <amp-analytics>

    <amp-analytics type="gtag" data-credentials="include">
      <script type='application/json'>
      {
        "vars": {
          "gtag_id": "<GA_MEASUREMENT_ID>",
          "config" : {
            "<GA_MEASUREMENT_ID>": {"groups": "default"}
          },
          "xid": "<EXPERIMENT_ID>",
          "xvar": "VARIANT(<EXPERIMENT_NAME>)"
        },
        "extraUrlParams": {"exp": "${xid}.${xvar}"}
      }
      </script>
    </amp-analytics>
    

    >GA_MEASUREMENT_ID, EXPERIMENT_IDEXPERIMENT_NAME을 위 단계의 값으로 바꿉니다.

예: 최적화 도구 CSS 코드 편집기 사용

최적화 도구 CSS 코드 편집기를 사용하면 각 CSS 규칙에 적절한 AMP 접두어를 추가하여 대안의 스타일을 변경할 수 있습니다. 예를 들어 CSS 코드 편집기는 "variant 1"에 대해 다음을 출력합니다.

.selector {
  property: value
}

선택자 앞에 다음 접두어를 추가해야 합니다.

body[amp-x-[experimentName]="1"] .selector {
  property: value
}

experimentName을 위 2단계의 값으로 바꿉니다.