최적화 도구로 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_ID 및 EXPERIMENT_NAME을 위 단계의 값으로 바꿉니다.

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

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

.selector {
  property: value
}

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

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

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