AMP 페이지에 애널리틱스 추가

Accelerated Mobile Pages(AMP)는 빠르게 렌더링되는 정적 콘텐츠용 웹페이지를 빌드하는 데 사용되는 플랫폼입니다. AMP의 경우 사용자 상호작용을 측정할 수 있는 <amp-analytics> 요소가 포함되어 있으며, Google 애널리틱스에 대한 지원이 기본으로 제공됩니다.

페이지 조회수 측정을 위한 기본 설정

AMP 페이지에 Google 애널리틱스를 기본 설치하려면 이 코드 스니펫을 복사하고, 사용하려는 속성 ID로 <GA_MEASUREMENT_ID>를 대체합니다. (Google 애널리틱스 ID 찾기)

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

작동 방식

<amp-analytics> 요소는 확장된 AMP 구성요소이며, 스크립트 태그에서 custom-element로 명시적으로 사용 설정됩니다.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<amp-analytics> 요소 블록은 Google 측정 제품을 지원할 수 있도록 구성되어 있습니다. gtag.js 지원을 사용 설정하려면 <amp-analytics>type 속성을 "gtag"로 설정하고, 쿠키를 사용 설정하려면 data-credentials 속성을 "include"로 설정합니다.

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP는 자체 승인된 라이브러리 이외의 자바스크립트는 허용하지 않으므로, 대신 JSON을 통해 구성이 수행됩니다. 유효한 <GA_MEASUREMENT_ID>가 있는 gtag_id 속성이 vars 블록에 추가되고, 그 아래에는 <GA_MEASUREMENT_ID>: {}가 있는 구성 속성이 값으로 추가됩니다.

이벤트 측정

정의된 값과 함께 triggers를 사용하여 AMP 페이지의 이벤트를 측정합니다. 다음과 같이 이러한 속성은 트리거 구성에 사용됩니다.

  • selector: 타겟 요소를 지정하는 CSS 선택자입니다.
  • on: 이벤트 유형을 지정합니다.
  • vars: event_name에 이벤트 유형을 지정하고 필요에 따라 다른 매개변수를 추가합니다.

이 예시에서는 기본 Google 애널리틱스 이벤트를 설정하는 방법을 보여줍니다. ID 값이 "the-button"인 요소를 클릭할 때 실행되는 "button"이라는 트리거를 만듭니다. 이 트리거는 event_name 값 "login"과 method 값 "Google"을 Google 애널리틱스로 전송합니다.

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google 애널리틱스 이벤트는 캠페인에서 보고서를 작성하는 데 흔히 사용되는 Google 애널리틱스 전용 이벤트의 카테고리입니다. 이 값은 다음과 같이 event_category, event_label, value 매개변수로 vars 블록에 지정할 수 있습니다.

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

트리거 구성에 관한 자세한 내용은 amp-analytics 문서를 참고하세요.

매개변수 수정

기본 Google 애널리틱스 매개변수를 재정의하거나 새 매개변수를 추가하려면 config 블록의 parameter 섹션에 원하는 값을 추가합니다. 이 예시에서는 다음과 같이 page_titlepage_location의 기본 페이지 조회와 이벤트 값을 재정의합니다.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

도메인 링커를 사용하면 별도의 도메인에서 두 개 이상의 관련 사이트를 하나로 측정할 수 있습니다. 다음과 같이 "linker": { "domains": [...] } 속성과 연결할 도메인을 지정합니다.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Google 애널리틱스가 구성된 AMP 페이지에서는 AMP Cache에서 표준 도메인에 연결하는 기능이 기본적으로 사용 설정됩니다. 도메인 트래픽을 연결하는 Google 애널리틱스의 기능을 사용 중지하려면 다음과 같이 "linker": "false"를 config 매개변수에 추가합니다.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

사이트 속도

Google 애널리틱스는 사이트 트래픽의 일부에 대한 사이트 속도 데이터를 자동으로 수집하도록 구성되어 있습니다. 샘플링 비율을 변경하여 수집하는 데이터 양을 늘리거나 줄일 수 있습니다. 샘플링 비율을 100%로 설정하려면 다음과 같이 강조표시된 코드를 구성에 추가합니다.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</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",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

AMP 트래픽과 비 AMP 트래픽의 비교

AMP 트래픽은 기본적으로 웹 트래픽과 다른 클라이언트 ID를 사용합니다. AMP 페이지는 표준 웹페이지와 비교해 로드 속도가 빠르고 트래픽 패턴이 다르기 때문에 AMP 트래픽과 비 AMP 트래픽 간에 다른 측정항목이 나올 수 있습니다.

별도의 속성을 사용하여 AMP 트래픽을 측정하면 측정항목을 더 효과적으로 분석하고 트래픽을 더 정확하게 파악할 수 있습니다. 단일 속성을 사용하여 AMP 트래픽과 비 AMP 트래픽을 모두 측정해야 하는 경우, 데이터 소스 측정기준 또는 맞춤 측정기준을 사용하여 구분합니다.

기본적으로 Google 애널리틱스에서는 데이터 소스 측정기준을 통해 "AMP" 값을 전송합니다. 이 값을 사용하여 단일 보기 내에서 AMP 콘텐츠와 비 AMP 콘텐츠를 비교하여 분류, 필터링 또는 분석합니다.

구성 디버그

AMP 검사기를 사용하면 웹페이지가 AMP HTML 요건을 충족하지 않는지 확인할 수 있습니다. 페이지 URL에 #development=1을 추가하여 검사기를 사용 설정합니다.

amp-analytics 확장 프로그램은 구성을 디버그하고 이와 관련한 문제를 해결하는 데 유용한 주의 및 오류 메시지를 제공합니다. 페이지 URL에 #log=1을 추가하여 웹브라우저 콘솔에서 로깅된 오류 메시지를 확인합니다.

전체 예시

이 예시에서는 페이지에 버튼이 하나 있는 완전한 AMP 페이지를 보여 줍니다. 이 구성으로 표준 페이지 조회 데이터와 "button-click" 이벤트가 Google 애널리틱스로 전송됩니다.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>