Accelerated Mobile Pages(AMP)는 빠르게 렌더링되는 정적 콘텐츠용 웹페이지를 빌드하는 데 사용되는 플랫폼입니다. AMP의 경우 사용자 상호작용을 측정할 수 있는 <amp-analytics>
요소가 포함되어 있으며, Google 애널리틱스에 대한 지원이 기본으로 제공됩니다.
페이지 조회수 측정을 위한 기본 설정
AMP 페이지에 Google 애널리틱스를 기본 설치하려면 이 코드 스니펫을 복사하고, 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>
태그를 사용하여 여러 대상에 데이터를 전송할 수 있습니다. 새 측정 ID를 <GA_MEASUREMENT_ID_NEW>
config
명령에 추가하기만 하면 됩니다.
<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" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "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_title
및 page_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 애널리틱스 4)를 사용합니다.
구성 디버그
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>
관련 리소스
- AMP: AMP 프로젝트
- AMP: AMP란?
- AMP: amp-analytics
- gtag.js: AMP로 gtag.js 사용
- 유니버설 애널리틱스 고객센터: AMP(Accelerated Mobile Pages)
- Google 애널리틱스 4 고객센터: AMP(Accelerated Mobile Pages)