AMP Analytics에서 페이지 추적 및 이벤트 추적 설정

경위


  • 신규로 WEB 사이트를 시작하게 되어, AMP 대응하게 되었기 때문에

  • 하고 싶은 일


  • 페이지 추적을 사용하여 웹 페이지에서 발생한 뷰 수를 측정하고 싶습니다
  • 설치된 배너 링크가 클릭 된 횟수를 측정하고 싶습니다

  • 절차



    1. 태그에 다음 스크립트 삽입


  • GA 추적 코드 대신 AMP 용 스크립트를 삽입합니다
  • <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    

    2. 페이지 추적 사용


  • AMP 애널리틱스 페이지 추적 사용
  • 
    <amp-analytics type="googleanalytics">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
    
  • 계정에 GA 추적 ID를 설정합니다.
  • 설정> 속성> 추적 정보> 추적 코드로 확인할 수 있습니다.



  • 3. 이벤트 추적 사용


  • 2 이외에 배너 링크 클릭 이벤트 횟수를 선택하기 위해 이벤트 추적을 사용합니다
  • {
      "vars": {
        "account": "UA-XXXXX-Y"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "trackClickOnHeader" : {
          "on": "click",
          "selector": "#header",
          "request": "event",
          "vars": {
            "eventCategory": "ui-components",
            "eventAction": "header-click"
          }
        }
      }
    }
    
  • trackClickOnHeader가 이벤트 추적에 대한 설명입니다. 임의의 이벤트 이름을 설정합니다
  • 이번에는 클릭 이벤트를 선택하고 싶으므로 on을 클릭하십시오
  • selector에 이벤트를 선택하려는 요소의 ID를 설정합니다
  • eventCategory와 eventAction은 각각 이벤트 범주 이름과 이벤트 액션 이름을 설정합니다.

  • 결과


  • GA 화면에 다음과 같이 표시됩니다

  • 【이벤트 카테고리】


    【이벤트 액션】


    참고


  • 공식 사이트
  • 좋은 웹페이지 즐겨찾기