AMP용 태그 설정

Accelerated Mobile Pages(AMP) 프로젝트는 웹 콘텐츠의 성능을 개선하는 데 도움이 되는 오픈소스 웹 플랫폼입니다. AMP에서는 Google 태그 및 Google 태그 관리자를 기본적으로 지원합니다. 이 가이드에서는 AMP 페이지에 Google 애널리틱스를 설정하는 방법을 설명합니다.

설치

Google 태그를 사용하면 Google 애널리틱스, Google Ads 및 기타 Google 제품을 AMP 페이지에 설치할 수 있습니다. Google 태그 관리자를 통해 AMP 컨테이너를 설정하고, 고급 구성을 만들고, 태그 관리자 인터페이스에서 서드 파티 태그를 배포할 수 있습니다.

다음 버튼 중에서 사용 중인 플랫폼 환경설정을 선택하세요.

Google 태그

gtag.js의 AMP 구현은 amp-analytics 프레임워크를 사용하여 AMP 웹사이트에서 분석을 계측할 수 있는 기능을 제공합니다. 동일한 gtag.js 구현을 통해 AMP 페이지에서 Google Ads, Google 애널리틱스 및 기타 Google 제품으로 데이터를 전송할 수 있습니다.

설치

AMP 페이지에서 Google 태그(gtag.js)를 구성하려면 먼저 amp-analytics 구성요소가 페이지의 <head> 태그 내에 포함되어 있는지 확인합니다.

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

그런 다음 Google 태그를 페이지의 <body> 태그 내 JSON 구성요소로서 AMP 페이지에 추가합니다. <TARGET_ID>를 데이터를 전송할 제품(예: Google Ads, Google 애널리틱스)의 태그 ID로 바꿉니다.

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

Google 태그에서 여러 제품을 구성하기 위해 해당 제품의 전체 태그를 설치할 필요는 없습니다. 도착 페이지 ID를 별도의 config 명령어에 추가하기만 하면 됩니다.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

자세한 내용은 amp-analytics 문서를 참고하세요.

이벤트 트리거

특정 데이터를 제품에 전송하려면 클릭과 같은 이벤트를 기반으로 트리거를 구성합니다. AMP의 gtag.js 트리거는 다른 amp-analytics 트리거 구성과 동일한 JSON 패턴을 따릅니다.

이 예에서는 Google 애널리틱스로 click 이벤트를 전송하는 방법을 보여줍니다. selector 값은 타겟팅할 요소를 지정할 수 있는 CSS 선택자입니다. on 값은 이벤트 유형을 지정하며 이 경우에는 click 이벤트에 해당합니다. vars 섹션에서 event_name의 이벤트 유형을 지정하고 필요에 따라 매개변수를 추가합니다.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

추천 이벤트 외에도 자체 맞춤 이벤트를 지정할 수 있습니다.

도메인 연결

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

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

AMP Cache에서 표준 도메인에 연결하는 기능은 기본적으로 사용 설정되어 있습니다. 도메인 트래픽을 연결하는 기능을 사용 중지하려면 "linker": "false"를 config 매개변수에 추가합니다.

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

전체 예시

이 코드 예에서는 단일 AMP 페이지를 만든 후 버튼을 클릭하면 Google 애널리틱스로 button-click 이벤트를 전송하는 AMP 페이지의 전체 과정을 데모로 보여줍니다. <TAG_ID>를 유효한 태그 ID로 바꿉니다.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

문제 해결

amptagtest.appspot.com을 사용하여 태그 지정 설정의 유효성을 검사하거나 다음을 수행하여 cid 값이 전체 도메인에서 일관되도록 지정할 수 있습니다.

쿠키를 삭제하거나 시크릿 모드를 사용해야 합니다.
Google 애널리틱스 쿠키에서 cid를 찾을 수 없는 경우, 웹브라우저의 네트워크 탭에서도 이러한 쿠키를 확인할 수 있습니다. collect request를 검색하면 페이로드에 cid 값이 포함되어야 합니다.
Google CDN에서 클라이언트 웹사이트로 전달되면 cid 및 gclid 값이 다음과 같은 URL 데코레이션을 통해 전달되어야 합니다.
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
최종 방문 페이지의 cid 값도 초기 방문 페이지의 값과 같아야 합니다.
표준 페이지 및 AMP가 아닌 방문 페이지 간의 리디렉션 및 도메인 변경에 주의하세요.