AMP 분석 심층적으로 살펴보기

이 가이드에서는 amp-analytics 컴포넌트를 심층적으로 살펴보고 amp-analytics 구성을 다음과 같은 주요 구성 요소로 나누어 봅니다.

가이드의 나머지 부분에서는 이 구성 예시를 사용하여 페이지 조회 수와 사용자 링크 클릭 수를 추적하고 타사 제공업체인 Google Analytics로 분석 데이터를 전송합니다.

<amp-analytics
  type="googleanalytics"
  config="https://example.com/analytics.account.config.json"
>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "extraUrlParams": {
        "cd1": "AMP"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "42",
            "eventLabel": "clicked on a link"
          }
        }
      },
      "transport": {
        "beacon": false,
        "xhrpost": false,
        "image": true
      }
    }
  </script>
</amp-analytics>

위의 예시는 이해를 돕기 위한 코드이지만, 현실성 있는 예시는 아닙니다. 분석 제공업체와 함께 작업하는 경우에는 상기 예시가 의미가 없을 수도 있습니다. 제공업체 구성에서는 복잡성이 제거됩니다. 구성 예시와 관련한 정보는 분석 제공업체의 문서를 참조하세요.

분석 데이터 전송 위치: type 속성

AMP는 데이터 수집의 두 가지 일반적인 패턴을 지원하도록 만들어졌습니다.

• Ingestion by a publisher-owned endpoint for in-house analytics systems.
• Ingestion by a vendor-owned endpoint for interoperability with a vendor solution (for example, Adobe Analytics, Chartbeat, Google Analytics).

분석 제공업체에 분석 데이터를 보내려면 amp-analytics 태그에 type 속성을 포함하고 분석 공급업체 목록에 정의된 적절한 공급업체로 값을 설정하세요.

예를 들어 <amp-analytics type="googleanalytics">는 분석 데이터를 제3자 분석 제공업체인 Google 애널리틱스로 보냅니다. 게시자 소유 엔드포인트로 데이터를 보내려면 type 속성을 포함하지 마세요. 요청마다 정의된 엔드포인트로 분석 데이터가 전송됩니다.

분석 공급업체 구성을 사용하면 amp-analytics를 빠르게 시작할 수 있습니다. 자세한 안내는 공급업체의 문서와 도움말 자료를 참조하세요. 앞서 언급했듯이 이미 AMP와 통합한 공급업체 목록 및 공급업체 관련 문서 링크는 분석 공급업체 목록에서 찾을 수 있습니다.

분석 공급업체라면 자체 분석 구성을 AMP HTML로 통합하는 방법을 자세히 알아보세요.

원격 구성 로드: config 속성

AMP 페이지에 amp-analytics 구성 전체를 포함할 필요가 없습니다. 대신 구성 전체 또는 일부의 원격 URL을 호출할 수 있습니다.

이렇게 하면 특정 요청에 따라 구성을 다르게 지정할 수 있습니다. 원격 파일 제어 권한이 있는 퍼블리셔라면 구성 데이터를 만드는 데 필요한 서버 측 프로세스를 실행할 수 있습니다.

원격 구성을 로드하는 첫 번째 단계는 amp-analytics 태그에 config 속성을 포함하는 것입니다.

<amp-analytics
  config="https://example.com/analytics.account.config.json"
></amp-analytics>

다음으로 원격 URL에 포함된 JSON 콘텐츠를 만듭니다. 이 간단한 예에서 JSON 개체에 포함된 구성은 분석 계정의 변수 값일 뿐입니다.

https://example.com/analytics.account.config.json의 예시 콘텐츠:

{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  }
}

마지막으로 원격 파일의 내용을 amp-analytics 구성의 적절한 위치로 가져와야 합니다. 이때 pageview 및 event 요청 모두의 account 변수 값은 원격 URL의 계정 값으로 자동 설정됩니다("account": "UA-XXXXX-Y").

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

Requests, triggers 및 transports

requests 속성은 ‘전송되는 데이터’ (예: pageviews, events) 및 데이터가 전송되는 위치(데이터 전송에 사용되는 URL)를 정의합니다.

triggers 속성은 사용자가 페이지를 조회하는 시점, 사용자가 링크를 클릭하는 시점처럼 분석 데이터가 전송되어야 하는 시점을 나타냅니다.

transport 속성은 요청을 전송하는 방법, 더 구체적으로는 프로토콜을 전송하는 방법을 지정합니다.

계속 읽어나가며 속성의 구성을 자세히 알아보세요(amp-analytics 참조에서도 구성 관련 정보를 확인할 수 있습니다).

전송되는 데이터: requests 속성

request-name은 트리거 구성에 사용되어 특정 이벤트에 대한 응답으로 전송되어야 하는 요청을 지정합니다. request-value는 https URL입니다. URL 값에는 다른 요청 또는 변수를 참조할 수 있는 플레이스홀더 토큰을 포함할 수 있습니다.

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

Google Analytics를 비롯한 일부 분석 제공업체에서는 이미 구성을 제공하고 있으며 type 속성을 통해 구성을 사용할 수 있습니다. 분석 제공업체를 사용 중이면 requests 정보를 포함할 필요가 없습니다. 공급업체 문서를 통해 requests를 구성 필요 여부와 방법을 확인해 보세요.

요청 URL 추가: Extra URL Params

extraUrlParams 속성은 일반적인 "&foo=baz" 규칙을 통해 요청 URL의 쿼리 문자열에 덧붙일 추가 매개변수를 지정합니다.

amp-analytics 예시에서는 요청에 추가 매개변수 cd1을 덧붙이고 매개변수 값을 "AMP"로 설정합니다.

  "extraUrlParams": {
    "cd1": "AMP"
  }

데이터가 전송되는 시점: triggers 속성

triggers 속성은 분석 요청이 전송되어야 하는 시점을 나타냅니다. 이 속성은 트리거-이름 및 트리거-구성의 키-값 쌍을 포함합니다. 트리거 이름에는 영숫자 문자(a-zA-Z0-9)가 조합된 모든 문자열을 사용할 수 있습니다.

예를 들면 다음 amp-analytics 요소는 문서가 처음 로드될 때와 a 태그가 클릭될 때마다 https://example.com/analytics로 요청을 전송하도록 구성됩니다.

"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  },
  "trackAnchorClicks": {
    "on": "click",
    "selector": "a",
    "request": "event",
    "vars": {
      "eventId": "42",
      "eventLabel": "clicked on a link"
    }
  }
}

AMP는 다음 트리거 구성을 지원합니다.

데이터가 전송되는 방식: transport 속성

transport 속성은 요청을 전송하는 방법을 지정합니다. 기본적으로 다음 세 가지 방법이 사용됩니다.

가장 높은 우선순위의 한 가지 전송 방법만 사용되는데 이 전송 방법은 사용 설정되어 허용되고 사용 가능해야 합니다. 우선순위는 beacon > xhrpost > image 순서입니다. 고객의 사용자 에이전트에서 방법을 지원하지 않으면 다음으로 우선순위가 높은 방법이 사용되도록 설정됩니다.

전송 옵션을 제한하고 싶을 경우에만 구성에 transport 속성을 포함합니다. 그렇지 않으면 요청을 중단할 수 있습니다.

하단 예시에서 beacon 및 xhrpost은 false로 지정되었으므로 해당 항목들은 image보다 우선순위를 갖더라도 사용되지 않습니다. 클라이언트 사용자 에이전트에서 image 메소드를 지원할 경우엔 사용됩니다. 그렇지 않은 경우 전송되는 요청은 없습니다.

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

변수 대체 순위

AMP는 우선순위에 따라 변수 값을 채웁니다.

1. 원격 구성(config를 통함)
2. triggers 내의 트리거 안에 중첩된 vars
3. amp-analytics 내에서 최상위 수준으로 중첩된 vars
4. 플랫폼 제공 값

이 예시에는 원격 구성과 트리거 및 플랫폼 수준에서 최상위로 정의된 변수가 있습니다.

<amp-analytics config="http://example.com/config.json">
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
      },
      "vars": {
        "account": "ABC123",
        "title": "Homepage"
      },
      "triggers": {
        "some-event": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "My homepage",
            "clientId": "my user"
          }
      }
    }
  </script>
</amp-analytics>

여러 위치에 동일한 var가 정의되어 있으면 변수 우선순위가 값을 한 번만 설정합니다. 따라서 위의 예시에서와 같이 원격 구성이 account를 UA-XXXXX-Y로 정의하면 다음과 같이 다양한 var 값을 가지게 됩니다.