기술 | AMP 문서에서 분석 데이터를 캡처하십시오. |
필수 스크립트 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> |
예제들 | AMP By Example의 amp-analytics 예제를참조하십시오 . |
공급 업체 또는 사내에 분석을 보내고 있습니까?
사이트에서 AMP 분석을 시작하기 전에 타사 분석 도구를 사용하여 사용자 참여 또는 자체 솔루션을 분석할지 여부를 결정해야합니다.
분석 공급 업체에 데이터 전송
AMP 분석은 한 번 측정하고 많은 것으로보고하도록 특별히 설계되었습니다. 이미 하나 개 이상의 분석 공급 업체와 작업하는 경우, 목록 확인 웹 로그 분석 납품업자 가 AMP와의 솔루션을 통합 한 경우 볼 수 있습니다.
통합 AMP 분석 공급 업체 :
- 에서
<amp-analytics>
태그 추가type
속성에 지정된 값을 설정 벤더 . - 캡처 및 추적 할 데이터를 결정하고 구성 데이터에 이러한 세부 사항을 지정하십시오. 분석 데이터를 캡처하는 방법에 대한 지침은 공급 업체의 설명서를 참조하십시오.
분석 공급 업체가 AMP와 통합되지 않은 경우 공급 업체에 지원을 요청하십시오. 또한 AMP 프로젝트에서 공급 업체 추가를 요청하는 문제를 만들 것을 권장합니다. AMP HTML에서 분석 도구 통합을 참조하십시오 . 또는 공급 업체와 협력하여 지정된 URL로 데이터를 전송하십시오. 아래의 사내 데이터 전송 섹션 에서 자세히 알아보십시오 .
예 : 타사 분석 공급자로 데이터 보내기
다음 예에서 분석 데이터는 AMP와 통합 된 타사 분석 공급자 인 Nielsen으로 전송됩니다. Nielsen에 대한 분석 데이터 구성에 대한 자세한 내용은 Nielsen 설명서 에서 확인할 수 있습니다 .
<amp-analytics type="nielsen"> <script type="application/json"> { "vars": { "apid": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "apv": "1.0", "apn": "My AMP Website", "section": "Entertainment", "segA": "Music", "segB": "News", "segC": "Google AMP" } } </script> </amp-analytics>
사내 데이터 전송
사용자 참여를 측정하기위한 사내 솔루션이있는 경우 AMP 분석을 해당 솔루션과 통합하는 데 필요한 것은 URL뿐입니다. 여기에서 데이터를 보냅니다. 데이터를 다양한 URL로 보낼 수도 있습니다. 예를 들어 페이지 뷰 데이터를 한 URL로, 사회적 참여 데이터를 다른 URL로 보낼 수 있습니다.
데이터를 특정 URL로 보내려면 다음을 수행하십시오.
- 캡처 및 추적 할 데이터를 결정 하고 구성 데이터에 이러한 세부 사항을 지정하십시오 .
- 에서
requests
구성 개체, 추적 요청의 유형을 지정합니다 (예를 들어, 페이지 뷰, 특정 이벤트를 트리거) 당신이에 추적 데이터를 보낼 위치의 URL (들).
예 : URL에 데이터 보내기
다음은 페이지 뷰를 추적하는 간단한 예제입니다. 페이지가 표시 될 때마다 트리거 이벤트가 실행되고 페이지 뷰 데이터가 임의의 ID와 함께 정의 된 URL로 전송됩니다.
<amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://foo.com/pixel?RANDOM" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
구성 데이터 지정
이 <amp-analytics>
요소에서 측정 대상 및 분석 데이터를 보낼 위치에 대한 세부 정보가 포함 된 JSON 구성 객체를 지정합니다.
<amp-analytics>
다음과 같은 형식 의 구성 객체가 사용됩니다.
{ "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*, } }
인라인 또는 원격 구성
구성 데이터는 config
속성에 URL을 지정하여 인라인으로 지정하거나 원격으로 가져올 수 있습니다 . 또한 일반 애널리틱스 공급 업체의 기본 제공 구성은 type
속성 을 사용하여 선택할 수 있습니다 .
이러한 소스 중 두 개 이상의 구성 데이터가 사용되면 구성 객체 (vars, 요청 및 트리거)가 다음과 같이 병합됩니다.
- 원격 구성은 인라인 구성보다 우선하며
- 인라인 구성은 공급 업체 구성보다 우선합니다.
원격 구성로드 중
원격 구성을로드하려면 <amp-analytics>
요소 config
에서 구성 데이터 의 속성과 URL을 지정하십시오 . 지정된 URL은 HTTPS 체계를 사용해야합니다. URL에는 AMP URL 변수 가 포함될 수 있습니다 . 쿠키에 액세스하려면 data-credentials
속성을 참조하십시오 . 응답은 AMP CORS 보안 지침을 따라야합니다 .
이 예에서는 config
지정된 URL에서 구성 데이터를로드 할 속성을 지정합니다 .
< amp-analytics config = "https://example.com/analytics.account.config.json" >
구성 데이터 개체
요청
requests
구성 객체는 분석 플랫폼 데이터뿐만 아니라 배치 또는 요구의보고 동작을 전송하는 데 사용되는 URL을 지정합니다. request-name
특정 이벤트에 응답하여 전송되어야 하는지를 지정 요청 (예를 들어 pageview
, event
등). 여기 request-value
에는 https URL 이 포함되며 값에는 다른 요청이나 변수를 참조 할 수있는 자리 표시 자 토큰이 포함될 수 있습니다. 은 request-value
또한 선택 사양 요청 CONFIGS를 포함하는 객체가 될 수 있습니다.
구성 요청
객체로 요청을 정의하기위한 속성은 다음과 같습니다.
baseUrl
: 요청의 URL을 정의합니다 (필수).reportWindow
:보고 요청을 중지 할 시간 (초)을 지정하는 선택적 속성입니다. 이 트리거important: true
는 최대 보고서 창 제약 조건 을 무시합니다.
이 예에서는 모든 요청이 유효합니다.
"requests": { "base": "https://example.com/analytics?a=${account}&u=${canonicalUrl}&t=${title}", "pageview": { "baseUrl": "${base}&type=pageview" }, "event": { "baseUrl": "${base}&type=event&eventId=${eventId}", "batchInterval": 5, "reportWindow" : 30 } }
일부 애널리틱스 제공 업체에는 type
속성을 통해 사용하는 이미 제공 한 구성이 있습니다 . 분석 공급자를 사용하는 경우 요청 정보를 포함하지 않아도됩니다. 요청을 구성해야하는지 여부와 방법에 대해서는 공급 업체 설명서를 참조하십시오.
구성 일괄 처리
요청 핑 수를 줄이려면 요청 구성에서 일괄 처리 동작을 지정할 수 있습니다. 어떤 extraUrlParams
에서 triggers
그 사용 같은 요청이 추가됩니다 baseUrl
요청.
일괄 처리 속성은 다음과 같습니다.
batchInterval
:이 속성은 일괄 처리 대기열에서 요청 핑을 플러시 할 시간 간격 (초)을 지정합니다.batchInterval
숫자 또는 숫자 배열 일 수 있습니다 (최소 시간 간격은 200ms 임). 요청은 배열의 모든 값을 고려한 다음 배열의 끝에 도달하면 마지막 간격 값 (또는 단일 값)을 반복합니다.batchPlugin
:이 속성은 최종 요청 URL을 생성하는 데 사용할 대체 플러그인 함수를 지정합니다. 공급 업체에 문의하여 올바른 배치 플러그인을 요청하십시오.
예를 들어, 다음의 설정은 1 초의 ping 요청과 함께 2 초마다 한 번의 요청 핑을 보냅니다 https://example.com/analytics?rc=1&rc=2
.
"requests": { "timer": { "baseUrl": "https://example.com/analytics?", "batchInterval": 2, } } "triggers": { "timer": { "on": "timer", "request" : "timer", "timerSpec": { "interval": 1 }, "extraUrlParams": { "rc": "${requestCount}" } } }
다음 설정은 1 초 후에 첫 번째 요청 ping을 보낸 다음 3 초마다 요청을 보냅니다. 첫 번째 요청 핑은 https://example.com/analytics?rc=1
다음과 같습니다 https://example.com/analytics?rc=2&rc=3&rc=4
. 두 번째 요청 핑은 같습니다 .
"requests": { "timer": { "baseUrl": "https://example.com/analytics?", "batchInterval": [1, 3], } } "triggers": { "timer": { "on": "timer", "request" : "timer", "timerSpec": { "interval": 1 }, "extraUrlParams": { "rc": "${requestCount}" } } }
누구의
amp-analytics
구성 요소는 요청에 사용될 수있는 많은 기본적인 변수를 정의합니다. 이러한 모든 변수의 목록은 amp-analytics
변수 안내서 에서 사용 가능합니다 . 또한 AMP HTML 대체 가이드 가 지원하는 모든 변수 도 지원됩니다.
vars
구성 객체는 새로운 키 - 값 쌍을 정의하거나 참조 할 수있는 기존의 변수를 무시할 수있다 request
값. 새로운 변수는 일반적으로 게시자 관련 정보를 지정하는 데 사용됩니다. 배열을 사용하여 쉼표 구분 기호를 유지하면서 URL을 별도로 인코딩해야하는 값 목록을 지정할 수 있습니다.
"vars" : { "account" : "ABC123" , "countryCode" : "tr" , "tags" : [ "Swift, Jonathan" , "Gulliver 's Travels" ] }
추가 URL 매개 변수
extraUrlParams
구성 객체는 보통 통해 요청 URL에 "& foo는 = 바즈"대회의 쿼리 문자열에 추가 할 추가 매개 변수를 지정합니다.
다음 &a=1&b=2&c=3
은 요청에 추가 할 예제입니다 .
"extraUrlParams" : { "a" : "1" , "b" : "2" , "c" : "3" }
이 extraUrlParamsReplaceMap
속성 String.replace()
은 extraUrlParams
구성의 키를 사전 처리 하기 위한 매개 변수 역할을하는 키와 값의 맵을 지정 합니다. 예를 들어, 만약 extraUrlParams
구성을 정의 "page.title": "The title of my page"
하고, extraUrlParamsReplaceMap
정의 "page.": "_p_"
하고 &_p_title=The%20title%20of%20my%20page%20
상기 요청에 첨부된다.
extraUrlParamsReplaceMap
사용하지 않아도됩니다 extraUrlParams
. if extraUrlParamsReplaceMap
가 정의되지 않으면 문자열 대체가 발생하지 않고 정의 된 문자열 extraUrlParams
은있는 그대로 사용됩니다.
방아쇠
triggers
로그 분석 요청이 전송되어야 할 때 구성 객체 설명한다. 이 triggers
속성에는 trigger-name 및 trigger-configuration의 키 - 값 쌍이 들어 있습니다. 트리거 이름은 영숫자 (a-zA-Z0-9)로 구성된 모든 문자열이 될 수 있습니다. 우선 순위가 낮은 구성의 트리거는 우선 순위가 높은 구성의 이름이 같은 트리거로 재정의됩니다.
on
(필수) 수신 대기 할 이벤트입니다. 유효한 값은render-start
,ini-load
,click
,scroll
,timer
,visible
,hidden
,user-error
,access-*
, 및video-*
request
(필수) 전송 요청 이름 (requests
섹션 에서 지정한대로 ).vars
vars
최상위 레벨 구성에 정의 된 무시할 키 - 값 쌍을 포함하는 객체 또는이 트리거에 고유 한 변수를 지정 하는 객체 입니다.important
일괄 처리 동작 또는 보고서 창을 지원하는 요청에 대해 작업하도록 지정할 수 있습니다. 설정important
하는 것은true
일부 특정 트리거로 일괄 요청 큐를 플러시하는 데 도움이 될 수 있습니다. 이 경우 중요한 트리거 이벤트를 잃지 않고 요청 핑 수를 줄일 수 있습니다. 설정important
하는 것은true
또한 요구의 무시할 수reportWindow
에 관계없이 중요한 요청 핑을 보낼 값을.selector
와selectionMethod
같은 일부 트리거, 지정할 수 있습니다click
와visible
. 자세한 내용은 요소 선택기 를 참조하십시오.scrollSpec
(필요한 경우on
로 설정scroll
이 구성이 함께 사용된다)scroll
트리거. 자세한 내용은 아래를 참조하십시오.timerSpec
(필요한 경우on
로 설정timer
이 구성이 함께 사용된다)timer
트리거. 자세한 내용은 아래를 참조하십시오.sampleSpec
이 객체는 전송되기 전에 요청을 샘플링하는 방법을 정의하는 데 사용됩니다. 이 설정을 사용하면 무작위 입력 또는 다른 플랫폼 지원 변수를 기반으로 샘플링 할 수 있습니다. 객체에는 해시를 생성하는 데 사용되는 입력 및 해시가 충족시켜야하는 임계 값을 지정하는 구성이 포함됩니다.sampleOn
이 문자열 템플리트는 플랫폼 변수를 채워서 확장 한 후 아래 임계 값 아래에 설명 된 샘플링 논리의 목적을 위해 숫자를 생성하도록 해시합니다.threshold
이 구성은 특정 기준을 충족하지 않는 요청을 필터링하는 데 사용됩니다. 분석 공급 업체에 요청을 전달하려면 다음 논리가 충족되어야합니다HASH(sampleOn) < threshold
.
videoSpec
(사용되는 경우on
에 설정video-*
이 구성이 함께 사용된다)video-*
트리거한다.
예를 들어 다음 구성을 사용하여 임의의 입력을 기반으로 요청의 50 %를 샘플링하거나 클라이언트 ID를 기반으로 1 %를 샘플링 할 수 있습니다.
'triggers': { 'sampledOnRandom': { 'on': 'visible', 'request': 'request', 'sampleSpec': { 'sampleOn': '${random}', 'threshold': 50, }, }, 'sampledOnClientId': { 'on': 'visible', 'request': 'request', 'sampleSpec': { 'sampleOn': '${clientId(cookieName)}', 'threshold': 1, }, }, },
요소 선택기
같은 일부 트리거 click
및 visible
선택기 속성을 사용하여 단일 요소 또는 요소 컬렉션을 지정할 수 있습니다. 다른 트리거는 셀렉터가 일치하는 모든 요소 또는 첫 번째 요소에 적용되는지 또는 일치 할 수있는 요소 (AMP 요소 전체 또는 유일한 요소)와 같이 선택된 요소에 대해 서로 다른 제한 사항 및 해석을 적용 할 수 있습니다. 자세한 내용은 각 관련 트리거에 대한 설명서를 참조하십시오.
선택기 속성은 다음과 같습니다.
selector
이 속성은 CSS / DOM 쿼리를 사용하여 요소 또는 요소 컬렉션을 찾는 데 사용됩니다. 요소가 일치하는 방식의 의미는를 사용하여 변경할 수 있습니다selectionMethod
. 이 속성의 값은 다음 중 하나 일 수 있습니다.- 올바른 CSS 선택기 (예 :
#ad1
또는)amp-ad
. :root
- 문서 루트와 일치하는 특별한 선택자.
- 올바른 CSS 선택기 (예 :
selectionMethod
지정되면이 특성은scope
또는 의 두 값 중 하나를 가질 수 있습니다closest
. 태그scope
의 부모 요소 내에서 요소를 선택할 수 있습니다amp-analytics
. 지정된 selector를 만족하는 태그closest
의 가장 가까운 조상을 검색합니다amp-analytics
. 기본값은scope
입니다.
렌더링 시작 트리거 내장
iframe (예 : 광고)에 다른 문서를 포함시키는 AMP 요소는 렌더 시작 이벤트 ( "on": "render-start"
)를 보고 할 수 있습니다 . 이 이벤트는 일반적으로 포함 된 문서의 렌더링이 시작되었는지 확인하는 즉시 표시됩니다. 특정 AMP 요소의 설명서를 참조하여이 AMP 요소가이 이벤트를 발생시키는 지 확인하십시오.
embed 요소에 대한 트리거에는 포함 요소 selector
를 가리키는 요소가 포함되어야합니다 .
"triggers": { "renderStart": { "on": "render-start", "request": "request", "selector": "#embed1" } }
렌더 시작 이벤트는 문서 자체에서 방출되며 다음과 같이 구성 될 수 있습니다.
"triggers" : { "renderStart" : { "on" : "render-start" , "request" : "request" } }
초기로드 트리거
초기로드 이벤트 ( "on": "ini-load"
)는 AMP 요소 또는 AMP 문서의 초기 내용이 로드 될 때 트리거됩니다.
"초기로드"는 컨테이너 및 초기 크기와의 관계로 정의됩니다. 더 구체적으로:
- 문서의 경우 : 첫 번째 뷰포트의 모든 요소.
- embed 요소의 경우 embed 요소의 초기 크기 내에있는 embed 문서의 모든 내용 요소입니다.
- 간단한 AMP 요소 (예 :)
amp-img
: 이미지 또는 비디오와 같은 자원 자체.
embed 또는 AMP 요소에 대한 트리거에는 요소 selector
를 가리키는 요소가 포함되어야합니다 .
"triggers": { "iniLoad": { "on": "ini-load", "request": "request", "selector": "#embed1" } }
초기로드 이벤트는 문서 자체에서 방출되며 다음과 같이 구성 될 수 있습니다.
"triggers": { "iniLoad": { "on": "ini-load", "request": "request" } }
페이지 및 요소 가시성 트리거
페이지 가시성 트리거 ( "on": "visible"
)를 사용하여 페이지 가 표시 될 때 요청을 시작합니다. 이 방아쇠의 발사는를 사용하여 구성 할 수 있습니다 visibilitySpec
.
"triggers" : { "defaultPageview" : { "on" : "visible" , "request" : "pageview" , } }
요소 가시성 트리거는을 사용하여 모든 AMP 요소 또는 문서 루트에 대해 구성 할 수 있습니다 selector
. 지정한 요소가 .csv를 사용하여 사용자 정의 할 수있는 가시성 매개 변수와 일치하면 트리거가 시작됩니다 visibilitySpec
.
"triggers": { "defaultPageview": { "on": "visible", "request": "elementview", "selector": "#ad1", "visibilitySpec": {/* optional visibility spec */} } }
selector는 컬렉션이 아닌 단일 요소 만 지정하는 데 사용할 수 있습니다. 요소는 AMP 확장 요소 이거나 문서 루트 가 될 수 있습니다 .
요소 가시성 트리거는 요소 추적을 추적하기 전에 waitFor
속성에서 지정한 신호를 기다립니다 visibilitySpec
. if waitFor
가 지정되지 않으면 요소의 ini-load
신호를 기다립니다 . 자세한 내용은 waitFor
docs를 참조하십시오.
오류 트리거 (실험 중)
사용자 오류 이벤트 ( "on": "user-error"
)는 페이지 작성자 또는 페이지 게시에 사용 된 소프트웨어로 인해 오류가 발생하면 트리거됩니다. 여기에는 AMP 구성 요소의 잘못 구성, 잘못 구성된 광고 또는 실패한 어설 션이 포함 되나 이에 국한되지는 않습니다. 사용자 오류는 개발자 콘솔에서도보고됩니다.
"triggers": { "userError": { "on": "user-error", "request": "error" } }
은 visibilitySpec
에 적용 할 수있는 조건 및 특성의 집합 visible
또는 hidden
그들이 발사 할 때 변경 트리거. 여러 속성을 지정하면 요청이 실행될 때 모두 true이어야합니다. 지원되는 구성 등록 정보 visibilitySpec
는 다음 과 같습니다.
waitFor
:이 속성은 가시성을 추적하기 전에 가시성 트리거가 특정 신호를 기다려야 함을 나타냅니다. 지원되는 값은none
,ini-load
와render-start
. ifwaitFor
가 정의되지 않은 경우 는ini-load
selector가 지정된 경우를 기본값으로 지정하고none
그렇지 않으면 selector를 지정합니다 .continuousTimeMin
및continuousTimeMax
:이 속성은 최소 및 최대 지정된 시간 사이의 연속 시간 동안 뷰포트에 요소의 일부가있을 때 요청이 시작되어야 함을 나타냅니다. 시간은 밀리 초 단위로 표시됩니다. 가continuousTimeMin
지정되지 않은 경우 디폴트 값이 0으로되어있다.totalTimeMin
및totalTimeMax
:이 속성은 최소 및 최대 지정 시간 사이의 시간 동안 뷰포트에 요소의 일부가있을 때 요청이 시작되어야 함을 나타냅니다. 시간은 밀리 초 단위로 표시됩니다. 가totalTimeMin
지정되지 않은 경우 디폴트 값이 0으로되어있다.visiblePercentageMin
및visiblePercentageMax
:이 속성은 뷰포트에 표시되는 요소의 비율이 최소 및 최대 지정된 백분율 사이에있을 때 요청을 시작해야 함을 나타냅니다. 0과 100 사이의 백분율 값이 유효합니다. 상한값 (visiblePercentageMax
)은 포괄적입니다.visiblePercentageMin
두 경계가 모두 0으로 설정되거나 두 값이 100으로 설정되지 않는 한 하한 ( )은 배타적입니다. 두 경계가 모두 0으로 설정되면 요소가 보이지 않을 때 트리거가 시작됩니다. 두 경계가 모두 100으로 설정되면 요소가 완전히 표시 될 때 트리거가 시작됩니다. 이러한 속성이 다른 타이밍 관련 속성과 함께 정의되면 이러한 속성이 충족되는 시간 만 계산됩니다.visiblePercentageMin
and 의 기본값visiblePercentageMax
은 각각 0과 100입니다.repeat
:이 속성을로 설정true
하면visibilitySpec
조건이 충족 될 때마다 트리거가 실행됩니다 . 다음 예제에서 요소를보기에서 51 %로 스크롤 한 다음 49 %에서 51 %로 다시 스크롤하면 트리거가 두 번 터집니다. 그러나repeat
이었다false
, 트리거가 한 번 발생합니다. 의 기본값은repeat
입니다false
.
visibilitySpec : { visiblePercentageMin : 50 , repeat : true , }
visiblePercentageThresholds
여러 생성 속기로서 사용될 수있다 visibilitySpec
만 다를 경우 visiblePercentageMin
와 visiblePercentageMax
. 예를 들어 다음은 동일합니다.
// Two triggers with visibilitySpecs that only differ in visiblePercentageMin and visiblePercentageMax: "triggers": { "pageView_30_to_40": { "on": "visible", "request": "pageview", "selector": "#ad1", "visibilitySpec": { "visiblePercentageMin": 30, "visiblePercentageMax": 40, "continuousTimeMin": 1000, } } "pageView_40_to_50": { "on": "visible", "request": "pageview", "selector": "#ad1", "visibilitySpec": { "visiblePercentageMin": 40, "visiblePercentageMax": 50, "continuousTimeMin": 1000, } } } // A single trigger equivalent to both of the above: "triggers": { "pageView": { "on": "visible", "request": "pageview", "selector": "#ad1", "visibilitySpec": { "visiblePercentageThresholds": [[30, 40], [40, 50]], "continuousTimeMin": 1000, } } }
위의 조건 외에도 여기visibilitySpec
에 문서화 된 특정 변수가 가능 합니다 .
"triggers": { "defaultPageview": { "on": "visible", "request": "pageview", "selector": "#ad1", "visibilitySpec": { "waitFor": "ini-load", "visiblePercentageMin": 20, "totalTimeMin": 500, "continuousTimeMin": 200 } } }
트리거의 일부로 제공된 변수 외에 변수에 대한 추가 / 재 지정 을 데이터 속성으로 지정할 수도 있습니다 . 사용되는 경우이 데이터 속성은로 지정된 요소의 일부 여야합니다 selector
.
클릭 트리거
클릭 트리거 ( "on": "click"
)를 사용하여 지정된 요소를 클릭하면 요청을 시작합니다. selector
이 요청을 일으키는 요소를 제어하는 데 사용 합니다. 트리거는 지정된 선택기와 일치하는 모든 요소에 대해 실행됩니다.
"vars": { "id1": "#socialButtonId", "id2": ".shareButtonClass" }, "triggers": { "anchorClicks": { "on": "click", "selector": "a, ${id1}, ${id2}", "request": "event", "vars": { "eventId": 128 } } }
트리거의 일부로 제공된 변수 외에 변수에 대한 추가 / 재 지정 을 데이터 속성으로 지정할 수도 있습니다 . 사용되는 경우,이 데이터 속성은 다음과 같이 지정된 요소의 일부 여야합니다.selector
스크롤 트리거
스크롤 트리거 ( "on": "scroll"
)를 사용하여 페이지가 스크롤 될 때 특정 조건에서 요청을 시작하십시오. 이 트리거는 요청 전송을 트리거 한 경계를 나타내는 특수한 vars 를 제공합니다 . scrollSpec
화재 발생 시점을 제어하는 데 사용 합니다.
scrollSpec
이 객체에는verticalBoundaries
및 을 포함 할 수 있습니다horizontalBoundaries
. 스크롤 이벤트가 발생하려면 두 속성 중 적어도 하나가 필요합니다. 두 속성의 값은 스크롤 이벤트가 생성되는 경계가 포함 된 숫자 배열이어야합니다. 예를 들어 다음 코드 스 니펫에서 페이지가 세로로 25 %, 50 % 및 90 % 스크롤되면 스크롤 이벤트가 발생합니다. 또한 페이지가 스크롤 너비의 90 %까지 가로로 스크롤 될 때도 이벤트가 발생합니다. 페이지를 계속 실행하려면 스크롤 경계가 가장 가까운 배수로 반올림됩니다5
.
"triggers": { "scrollPings": { "on": "scroll", "scrollSpec": { "verticalBoundaries": [25, 50, 90], "horizontalBoundaries": [90] }, "request": "event" } }
타이머 트리거
타이머 트리거 ( "on": "timer"
)를 사용하여 일정한 시간 간격으로 요청을 시작하십시오. timerSpec
화재 발생 시점을 제어하는 데 사용 합니다.
timerSpec
유형의 트리거에 대한 사양timer
. astartSpec
가 지정 되지 않으면 타이머가 즉시 트리거되고 (기본적으로 설정 해제 될 수 있음) 그 후 지정된 간격으로 트리거됩니다.interval
타이머 간격의 길이 (초).maxTimerLength
타이머가 작동하는 최대 지속 시간 (초).maxTimerLength
에 도달 하면 추가 요청이 트리거됩니다 . 기본값은 2 시간입니다. astopSpec
가 있지만 maxTimerLength가 지정되지 않으면 기본값은 무한대가됩니다.immediate
타이머를 즉시 트리거합니다. Boolean, 기본값은 true입니다.
"triggers": { "pageTimer": { "on": "timer", "timerSpec": { "interval": 10, "maxTimerLength": 600 }, "request": "pagetime" } }
사용자 이벤트가 사용하는 시간을 구성하려면 다음을 수행하십시오.
startSpec
타이머가 시작될 때 트리거 지정.on
및 의 값을 사용하여selector
특정 이벤트를 추적하십시오. 한 번만 멈추는 설정이startSpec
있지만 그stopSpec
후에 만 멈 춥니 다maxTimerLength
.stopSpec
타이머가 정지했을 때의 트리거 사양.stopSpec
아니요startSpec
를 사용하는 구성 은 즉시 시작되지만 지정된 이벤트에서만 중지됩니다.
"triggers": { "videoPlayTimer": { "on": "timer", "timerSpec": { "interval": 5, "startSpec": { "on": "video-play", "selector": "amp-video" }, "stopSpec": { "on": "video-pause", "selector": "amp-video" } }, "request": "videoRequest" } }
중첩 타이머 트리거 생성에 대한 자세한 내용 은 트리거 사양을 참조하십시오 . 타이머 트리거를 사용하여 타이머를 시작하거나 중지하는 것은 허용되지 않습니다.
숨겨진 트리거
"on": "hidden"
페이지가 숨겨지면 숨겨진 트리거 ( )를 사용하여 요청을 시작하십시오.
"triggers": { "defaultPageview": { "on": "hidden", "request": "pagehide", } }
visibilitySpec
가시성 지속 조건이 충족 될 경우에만 요청이 시작되도록 A 를 포함 할 수 있습니다.
"triggers": { "defaultPageview": { "on": "hidden", "request": "pagehide", "visibilitySpec": { "selector": "#anim-id", "visiblePercentageMin": 20, "totalTimeMin": 3000, } } }
위의 구성은 다음과 같이 번역됩니다.
페이지가 숨겨지면 요소 # anim-id가 총 3 초 이상 (뷰포트의 20 % 초과 영역) 표시되면 요청을 실행합니다.
트리거 액세스
AMP 액세스 시스템은 액세스 흐름의 여러 상태에 대해 수많은 이벤트를 발행합니다. 액세스 트리거 ( "on": "access-*"
) 에 대한 자세한 내용 은 AMP 액세스 및 분석을 참조하십시오 .
비디오 분석 트리거
동영상 분석은 "on": "video-*"
게시자가 동영상의 수명주기 동안 발생하는 다양한 이벤트를 추적하는 데 사용할 수있는 몇 가지 트리거 ( )를 제공합니다 . 자세한 내용은 AMP 비디오 분석을 참조하십시오 .
수송
transport
구성 객체는 요청을 보내는 방법을 지정합니다. 이 값은 받아 들일 수있는 전송 f}을 나타내는 필드가있는 오브젝트입니다.
beacon
navigator.sendBeacon
요청을 전송하는 데 사용될 수 있음을 나타냅니다 . 이렇게하면 자격 증명이있는 POST 요청과 비어있는 본문이 전송됩니다.xhrpost
XMLHttpRequest
요청을 전송하는 데 사용될 수 있음을 나타냅니다 . 이렇게하면 자격 증명이있는 POST 요청과 비어있는 본문이 전송됩니다.image
Image
태그 를 생성하여 요청을 보낼 수 있음을 나타냅니다 . 그러면 GET 요청이 전송됩니다. 빈 응답 또는 요청 실패로 인한 콘솔 경고를 표시하지 않으려면 설정하십시오"image": {"suppressWarnings": true}
.
MRC 공인 공급 업체는 iframe-transport-vendors.js에 URL 문자열을 추가하여 네 번째 전송 메커니즘 인 "iframe 전송"을 활용할 수 있습니다. 이 src
속성은이 URL로 설정된 iframe을 만들어야하며 요청은 iframe을 통해 해당 iframe으로 전송됩니다 window.postMessage()
. 이 경우 요청이 본격적인 URL 일 필요는 없습니다. 태그 안의 인라인 iframe
이 아니라 원격 구성을 통해서만 지정할 수 있습니다.iframe-transport-vendors.js
amp-analytics
상기 전송 방법 중 하나 이상을 사용하는 경우, 우선은 iframe
> beacon
> xhrpost
> image
. 하나의 전송 f} 만 사용되며 허용되고 사용 가능한 가장 높은 우선 순위가됩니다. 클라이언트의 사용자 에이전트가 메소드를 지원하지 않으면 다음으로 우선 순위가 높은 메소드가 사용됩니다. 기본적으로 위의 네 가지 메소드가 모두 사용 가능합니다.
아래의 예에서는 iframe
URL이 지정되지 및 beacon
및 xhrpost
설정됩니다 false
, 그래서 그들은 그들보다 더 높은 우선 순위를 가지고 있습니다 비록 사용되지 않습니다 image
. 기본적 image
으로 설정 true
되지만 명시 적으로 여기에 선언됩니다. 클라이언트의 사용자 에이전트가 image
메소드를 지원하면 사용됩니다. 그렇지 않으면 요청이 전송되지 않습니다.
"transport" : { "beacon" : false , "xhrpost" : false , "image" : true }
자세한 내용은 iframe 전송 클라이언트 API 및 해당 iframe을 통합 한이 예제 페이지를 구현하는이 예제를 참조하십시오 . 이 예 는 태그 가 포함 된 가짜 광고 를로드합니다 amp-analytics
. 가짜 광고 콘텐츠에는 몇 가지 추가 구성 지침이 포함되어 있습니다.
리퍼러 정책
리퍼러 정책은 config의 referrerPolicy
필드 로 지정할 수 있습니다 transport
. 현재 no-referrer
지원됩니다. 리퍼러 정책은 image
전송 에만 사용할 수 있습니다 . if referrerPolicy: no-referrer
가 지정되면 beacon
& xhrpost
transport가로 대체됩니다 false
.
"transport" : { "beacon" : false , "xhrpost" : false , "image" : true , "referrerPolicy" : "no-referrer" }
확인
AMP 유효성 검사기 사양에서 amp-analytics 규칙 을 참조하십시오 .
유효한 속성 <amp-analytics>
다음은 amp-analytics
구성 요소 의 유효한 속성입니다 .
유형
공급 업체 유형을 지정합니다. 자세한 내용은 애널리틱스 공급 업체 목록을 참조하십시오 .
예:
< amp-analytics type = "googleanalytics" config = "https://example.com/analytics.account.config.json" > </ amp-analytics >
구성
이것은 지정된 원격 URL에서 구성을로드하는 데 사용할 수있는 선택적 특성입니다. 지정된 URL은 HTTPS 체계를 사용해야합니다. data-include-credentials
아래 의 속성을 참조하십시오 . URL에는 AMP URL 변수 가 포함될 수 있습니다 . 응답은 AMP CORS 보안 지침을 따라야합니다 .
예:
< amp-analytics config = "https://example.com/analytics.config.json" > </ amp-analytics >
로 설정 include
하면 config
속성을 통해 지정된 요청에서 쿠키를 읽고 쓸 수있는 기능이 켜집니다 . 이것은 선택적 속성입니다.
데이터 동의 통지 id
제공되는 경우 지정된 HTML 요소 ID가 포함 된 amp-user-notification 이 사용자에 의해 확인 (승인) 될 때까지 페이지가 분석 요청을 처리하지 않습니다 . 이것은 선택적 속성입니다.
AMP 구성 요소 분석
AMP 구성 요소 개발자는 AMP 분석을 사용하여 데이터 수집을 구현할 수 있습니다. 자세한 내용 은 AMP 구성 요소의 분석 구현을 참조하십시오.
'AMP JS' 카테고리의 다른 글
광고 애널리틱스 - amp-experiment 실험 (0) | 2018.09.16 |
---|---|
광고 애널리틱스 - amp-call-tracking 암호 추적 (0) | 2018.09.16 |
광고 애널리틱스 - amp-auto-ads 자동광고 (0) | 2018.09.16 |
광고 애널리틱스-amp-ad / amp-embed (0) | 2018.09.16 |
광고 애널리틱스-amp-ad-exit (0) | 2018.09.16 |
댓글