Home
AMP
Component

구글 AMP – 애널리틱스

10 min read

Amp 애널리틱스는 페이지에서 데이터를 추적하는데 사용되는 amp 구성 요소입니다. 페이지의 모든 사용자 상호 작용을 기록하고 저장하여 추가 개선 또는 비즈니스 목적을 위해 데이터를 분석할 수 있습니다.

amp-analytics 구성 요소를 사용하려면 head 섹션에 다음 스크립트를 추가해야 합니다. 

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

amp-analytics에서 사용되는 이벤트를 기록하기 위해 타사 공급 업체를 사용하거나 다른 추적 시스템을 사용할 수도 있습니다.

Google Analytics를 사용한 amp-analytics의 예

<amp-analytics type=googleanalytics>
  <script type=application/json>
    {
      "requests": {
        "pageview": "${eventId}"
      },
      "vars": {
        "account": "UA-44450152-1"
      },
      "triggers": {
        "trackPageview" : {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>

Comscore를 사용한 amp-analytics의 예

<amp-analytics type=comscore>
  <script type=application/json>
    {
      "vars": {
        "c2":"7922264"
      }
    }
  </script>
</amp-analytics>

Chartbeat를 사용한 amp-analytics의 예

<amp-analytics type=chartbeat>
  <script type=application/json>
    {
      "vars": {
        "uid": "230",
        "domain": "dummyurl.com",
        "sections": "us",
        "authors": "Hello World"
      }
    }
  </script>
</amp-analytics>

자세한 공급 업체 목록은 https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/에서 확인할 수 있습니다.

인 하우스 애널리틱스 공급 업체를 사용하는 방법에 대한 작업 예제는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <title>amp-analytics</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-analytics.html">
  <meta name="viewport" content="width=device-width,minimum-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>
</head>
<body>
<h1>Google Amp - Analytics</h1>

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": 
        "http://localhost:8080/googleamp/tracking.php?user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>
</body>
</html>

브라우저에서 페이지가 히트하면 페이지 뷰를 위해 트래커가 실행됩니다. 아래와 같이 네트워크 탭에서 확인할 수 있습니다.

특정 요소가 페이지에 표시될 때 amp-analytics 이벤트를 실행할 수도 있습니다. 동일한 작업 예가 여기에 표시됩니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <title>amp-analytics</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-analytics.html">
  <meta name="viewport" content="width=device-width,minimum-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>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-video controls id="videoplayer"
           width="640"
           height="360"
           layout="responsive"
           poster="images/videoposter.png"
           autoplay>
  <source src="video/bunny.webm" type="video/webm" />
  <source src="video/samplevideo.mp4" type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": 
        "http://localhost:8080/googleamp/tracking.php?user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#videoplayer",
            "visiblePercentageMin": 20,
            "totalTimeMin": 2000,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "video"
          }
        }
      }
    }
  </script>
</amp-analytics>
</body>
</html>

결과

amp-analytics 구성 요소에는 스크립트 태그에 전달되는 json 객체가 필요합니다. json의 형식은 다음과 같습니다. 

{
  "requests": {
    request-name: request-value,
    ...
  },
  "vars": {
    var-name: var-value,
    ...
  },
  "extraUrlParams": {
    extraurlparam-name: extraurlparam-value,
    ...
  },
  "triggers": {
    trigger-name: trigger-object,
    ...
  },
  "transport": {
    "beacon": *boolean*,
    "xhrpost": *boolean*,
    "image": *boolean*,
  }
}

위에 지정된 모든 객체가 amp-analytics에 전달되어야 하는 것은 아닙니다. 타사 공급 업체를 사용하는 경우 공급 업체는 형식을 갖게 되며 사용자는 이러한 방식으로 데이터를 전달해야 합니다.

각 개체를 자세히 이해하겠습니다.

Requests

요청 객체에는 조건이 충족될 때 실행되는데 사용되는 URL이 있습니다. 다음은 요청 객체의 예입니다. 

  "requests": {
    request-name: request-value,
    ...
  },

request-name은 트리거 오브젝트에 지정되며 동일한 이름을 사용해야 합니다.

Vars

요청 객체에 사용되는 모든 변수는 vars 객체에 지정됩니다.

"requests": {
  "event": 
  "http://localhost:8080/googleamp/tracking.php?user=test&account=localhost&event=${eventId}"
},
"vars": {
  "eventId": "video"
}

추가 URL 매개 변수

쿼리 문자열로 요청 URL에 추가할 매개 변수는 이 개체에서 정의할 수 있습니다. 다음 예를 참조하십시오. 

"requests": {
  "event": 
  "http://localhost:8080/googleamp/tracking.php?user=test&account=localhost&event=${eventId}"
},
"vars": {
  "eventId": "video"
}
"extraUrlParams": {
  "x": "1",
  "y": "2",
  "z": "3"
}

Triggers

이 개체는 요청 URL이 실행되어야 하는 시기를 알려줍니다. 트리거 객체 내에서 사용할 수 있는 key-value 쌍은 다음과 같습니다.

on: 사용할 이벤트를 언급해야 합니다. on에 사용할 수있는 값은 render-start, ini-load, click, scroll, timer, visible, hidden, user-error, access-* 및 video-*입니다.

request: 이것은 요청의 이름입니다. 요청 객체의 요청 이름과 일치해야 합니다.

vars: 트리거 개체 내에서 사용되거나 정의된 vars key-value을 재정의하는데 사용되도록 정의된 key-value 변수가 있는 개체입니다.

selector: 트리거가 설정된 요소의 세부 사항을 표시합니다.

scrollSpec: 스크롤 트리거에 대한 세부 사항을 표시합니다.

timerSpec: 주어진 시간에 대한 세부 사항을 표시합니다.

videoSpec: 비디오에 대해 호출할 세부 사항을 표시합니다.

다음은 amp-video를 추가한 예입니다. Amp-analytics는 페이지에서 동영상 요소를 사용할 수 있고 페이지에 20% 이상 표시되고 동영상이 2초 이상 재생되어야하며 200ms 동안 계속 표시될 때 추적을 시작합니다. 이러한 모든 조건이 충족되면 트래커가 실행됩니다. 세부 정보는 다음과 같습니다.

요소의 가시성에 대한 조건을 추가하려면 요소와 같은 기타 조건을 최소 20% 이상 볼 수 있어야하고, 동영상은 2초 동안 재생해야하며, 이러한 모든 조건은 아래 표시된대로 visibilitySpec 내에 지정해야 합니다. 

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": 
        "http://localhost:8080/googleamp/tracking.php?user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#videoplayer",
            "visiblePercentageMin": 20,
            "totalTimeMin": 2000,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "video"
          }
        }
      }
    }
  </script>
</amp-analytics>

트래커 실행을 트리거하려는 조건을 정의할 수 있습니다. 조건은 다음과 같습니다.

waitFor

이 속성은 가시성 트리거가 실행되기 전에 특정 케이스를 기다리는데 사용됩니다. waitFor에 사용할 수있는 옵션은 none, ini-load 및 render-start입니다. 기본적으로 waitFor의 값은 ini-load입니다.

reportWhen

이 속성은 가시성 트리거가 실행되기 전에 특정 케이스를 기다리는데 사용됩니다. 지원되는 값은 documentExit입니다. visibleSpec 내에서 reportWhen 및 repeat 속성을 함께 사용할 수 없습니다.

continuousTimeMin 및 continuousTimeMax

이 속성은 요소를 실행하기 위해 가시성 트래커가 continuousTimeMin 및 continuousTimeMax 사이에 지속적으로 뷰포트에 있어야 함을 나타냅니다. continousTimeMin을 지정하지 않으면 기본적으로 0으로 설정됩니다. 값은 ms 초 단위로 지정됩니다.

totalTimeMin 및 totalTimeMin

이 속성은 요소를 실행하기 위해 가시성 트래커가 totalTimeMin과 totalTimeMin 사이의 총 시간 동안 뷰포트에 있어야 함을 나타냅니다. totalTimeMin이 지정되지 않은 경우 기본값은 0이며 값은 ms 초 단위로 지정됩니다.

visiblePercentageMin 및 visiblePercentageMax

이 속성은 가시성 트래커가 실행하기 위해 visiblePercetageMin 및 visiblePercentageMax에 할당된 백분율 사이의 뷰포트 내에서 요소가 표시되어야 함을 나타냅니다. visiblePercentageMin의 기본값은 0이고 visibilePercentageMax의 경우 100입니다. 둘 다 요소가 표시되지 않을 때 가시성 트리거가 실행되는 값보다 0이고 둘 다 요소가 완전히 표시될 때 실행되는 값보다 100보다 높습니다.

Repeat

true로 설정하면 visibleSpec 조건이 충족될 때마다 트리거가 실행됩니다. 기본적으로 repeat의 값은 false입니다. reportWhen 속성과 함께 사용할 수 없습니다.

클릭 트리거의 예는 다음과 같습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <title>amp-analytics</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-analytics.html">
  <meta name="viewport" content="width=device-width,minimum-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>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
  <style amp-custom>
    a {
      color: blue;
    }
  </style> 
</head>
<body>
<h1>Google Amp - Analytics</h1>
<a>Click Here</a>
<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": 
        "http://localhost:8080/googleamp/tracking.php?user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickonlink"
          }
        }
      }
    }
  </script>
</amp-analytics>
</body>
</html>

결과

링크를 클릭하면 아래와 같이 이벤트가 시작됩니다.
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – 애널리틱스
    Amp 애널리틱스는 페이지에서 데이터를 추적하는데 사용되는 amp 구성 요소입니다. 페이지의 모든 사용자 상호 작용을 기록하고 저장하여 추가 개선 또는 비즈니스 목적을 위해 데이터를 분석할 수 있습니다. amp-analytics 구성 요소를 사용하려면 head 섹션에 다음 스크립트를 추가해야 합니…
  • 구글 AMP – 데이터 바인딩
    Amp-bind는 데이터 바인딩 및 JS 유사 표현식을 사용하는 작업을 기반으로 amp 구성 요소 및 html 태그에 상호 작용을 추가하는데 도움이 됩니다. 이 글에서는 데이터 바인딩에 대해 자세히 설명합니다. Amp-bind를 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <scri…
  • 구글 AMP – 광고
    광고는 게시자의 수익원이기 때문에 게시자의 웹 페이지에서 중요한 역할을 합니다. Amp 페이지의 경우 약간의 차이가 있습니다. Amp 페이지는 타사 javascript 파일을 추가할 수 없습니다. 페이지에 광고를 표시하기 위해 페이지에 광고를 표시하는데 도움이 되는 amp-ad라는 amp 구성 요소가 있습…
  • 구글 AMP – Actions 및 Events
    amp-component에서 액션이나 이벤트를 사용하려면 on 속성을 사용할 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다. Events 이벤트에 대한 액션 구문은 다음과 같습니다. on="eventName:elementId[.methodName[(arg1=value, arg2=value…
  • 구글 AMP – 동적 CSS 클래스
    amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다. amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-dyn…
  • 구글 AMP – 애니메이션
    Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다. Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-animati…

댓글 쓰기