AMP를 사용한 구현
AMP는 빠르고 매끄럽게 로딩되는 웹 페이지를 손쉽게 만들 수 있는 방법을 제공하는 오픈 소스 HTML 프레임워크입니다.
Adobe Analytics는 JavaScript 라이브러리를 사용하여 이미지 요청을 컴파일하고 전송하므로 AMP를 사용하여 페이지에서 Adobe에 데이터를 전송하려면 구현에서 조정이 필요합니다.
AMP를 사용하여 페이지에서 Adobe Analytics를 구현할 방법 결정
Adobe는 AMP를 사용하여 페이지에서 Adobe Analytics를 구현하는 두 가지 방법을 만들었습니다. 둘 다 <amp-analytics> HTML 태그를 사용합니다. 자세한 내용은 AMP의 설명서에서 amp-analytics를 참조하십시오.
"adobeanalytics"템플릿 사용: 페이지에서 바로 Analytics 요청을 구성합니다."analytics_nativeConfig"템플릿 사용: 일반 사이트에서 배포하는 것과 동일한 AppMeasurement 코드가 들어 있는 iframe 사용
다음 표에서는 이 두 방법을 비교합니다.
"adobeanalytics"템플릿"adobeanalytics_nativeConfig"템플릿장단점을 따져 조직에 가장 적합한 구현 방법을 선택할 수 있습니다.
"adobeanalytics" 템플릿과 "adobeanalytics_nativeConfig" 템플릿을 동일한 페이지에서 모두 사용하지 마십시오. 그럴 경우 브라우저 콘솔에서 오류가 생성되고 방문자가 두 번 카운트될 수 있습니다.방법 1: "adobeanalytics" 템플릿에 <amp-analytics> 태그 사용
"adobeanalytics" 추적 템플릿은 <amp-analytics> HTML 태그를 사용하여 추적 요청을 바로 구성합니다. 페이지 표시 또는 클릭과 같이 특정 페이지 이벤트에서 실행되는 히트 요청을 지정할 수 있습니다. 선택기를 지정하여 특정 요소 ID나 클래스에 적용되도록 클릭 이벤트를 사용자 지정할 수 있습니다. type="adobeanalytics"를 amp-analytics 태그에 추가하여 템플릿을 로드할 수 있습니다.
다음의 코드 예제에는 두 개의 트리거 (pageLoad, click)가 정의되어 있습니다. pageLoad 트리거는 문서가 표시될 때 실행되며 vars 섹션에 정의되어 있는 대로 pageName 변수를 포함합니다. 두 번째 트리거인 click은 버튼을 클릭하면 실행됩니다. 값이 button clicked인 이 이벤트에 대해 eVar1 변수가 설정되었습니다.
<amp-analytics type="adobeanalytics">
<script type="application/json">
{
"requests": {
"myClick": "${click}&v1=${eVar1}",
},
"vars": {
"host": "example.data.adobedc.net",
"reportSuites": "reportSuiteID1,reportSuiteID2",
"pageName": "Adobe Analytics Using amp-analytics tag"
},
"triggers": {
"pageLoad": {
"on": "visible",
"request": "pageview"
},
"click": {
"on": "click",
"selector": "button",
"request": "myClick",
"vars": {
"eVar1": "button clicked"
}
}
}
}
</script>
</amp-analytics>
<amp-analytics> 태그는 AMP에서 인식하는 데이터 값을 제공할 수 있도록 변수 대체를 지원합니다. 자세한 내용은 GitHub의 amp-analytics에서 지원되는 변수를 참조하십시오.
Adobe는 내장된 AMP 함수를 사용하여 방문자를 식별하고 쿠키 adobe_amp_id를 설정합니다. 이 방문자 ID는 Adobe Analytics에서 설정한 다른 모든 ID에 대해 고유합니다. 방문자가 콘텐츠를 검색하는 각 CDN에 대해 서로 다른 고유 방문자가 계산되어 고유 방문자 수가 부풀려질 수 있습니다. AMP가 고유 방문자를 식별하는 방법 때문에 AMP 페이지에는 별도의 보고서 세트를 사용하는 것이 좋습니다. Adobe Experience Cloud ID 서비스는 지원되지 않습니다.
이 솔루션을 사용하려면 host 속성에서 지정하는 추적 서버가 주 사이트의 추적 서버와 일치하여 기존의 개인정보 처리방침 제어 사항이 준수되도록 해야 한다는 것입니다. 아니면, AMP를 사용하여 페이지에 대한 개인정보 처리방침을 만드십시오.
방법 2: "adobeanalytics_nativeConfig" 템플릿에 <amp-analytics> 태그 사용
"adobeanalytics_nativeConfig" 태그는 일반적인 웹 페이지에서 사용하는 것과 동일한 태깅 방식을 사용하게 되므로 구현하기가 더 쉽습니다. amp-analytics 태그에 다음 내용을 추가하십시오.
<amp-analytics type="adobeanalytics_nativeConfig">
<script type="application/json">
{
"requests": {
"base": "https://${host}",
"iframeMessage": "${base}/stats.html?campaign=${queryParam(campaign)}&pageURL=${ampdocUrl}&ref=${documentReferrer}"
},
"vars": {
"host": "example.data.adobedc.net"
},
"extraUrlParams": {
"pageName": "Example AMP page",
"v1": "eVar1 example value"
}
}
</script>
</amp-analytics>
웹 서버에 호스팅된 HTML 페이지도 필요합니다.
<html>
<head>
<title>Stats Example</title>
<script language="JavaScript" type="text/javascript" src="VisitorAPI.js"></script>
<script language="JavaScript" type="text/javascript" src="AppMeasurement.js"></script>
</head>
<body>
<script>
var v_orgId = "INSERT-ORG-ID-HERE";
var s_account = "examplersid1,examplersid2";
var s_trackingServer = "example.data.adobedc.net";
var visitor = Visitor.getInstance(v_orgId);
visitor.trackingServer = s_trackingServer;
var s = s_gi(s_account);
s.account = s_account;
s.trackingServer = s_trackingServer;
s.visitorNamespace = s_visitorNamespace;
s.visitor = visitor;
s.pageName = s.Util.getQueryParam("pageName");
s.eVar1 = s.Util.getQueryParam("v1");
s.campaign = s.Util.getQueryParam("campaign");
s.pageURL = s.Util.getQueryParam("pageURL");
s.referrer = s.Util.getQueryParam("ref");
s.t();
</script>
</body>
</html>
이 접근 방법에서는 iframeMessage 요청 매개 변수에 추가된 쿼리 문자열 매개 변수를 통해 데이터를 유틸리티 웹 페이지에 보냅니다. 이러한 쿼리 문자열 매개 변수의 이름은 stats.html 페이지가 이 매개 변수에서 데이터를 수집하도록 구성되어 있는 한 원하는 방식대로 지정할 수 있습니다.
"adobeanalytics_nativeConfig" 템플릿에서도 <amp-analytics> 태그의 extraUrlParams 섹션에 나열된 변수를 기반으로 쿼리 문자열 매개 변수를 추가합니다. 위의 예에는 pageName 및 v1 매개 변수가 포함되어 있습니다.
stats.html 페이지는 AMP 자체가 호스팅되는 도메인과는 별도의 하위 도메인에서 호스팅되어야 합니다. AMP 프레임워크는 AMP 페이지 자체가 존재하고 있는 것과 동일한 하위 도메인의 iframe을 허용하지 않습니다. 예를 들어 AMP가 amp.example.com에서 호스팅된다면 stats.html 페이지를 반드시 ampmetrics.example.com과 같은 별도의 하위 도메인에서 호스팅하십시오.이 방법을 사용하면 사용자가 기본 사이트의 추적을 옵트 아웃하는 경우 모든 AMP의 추적 또한 옵트 아웃하게 됩니다. 또한 이 유틸리티 페이지를 사용하는 것은 AMP가 Adobe Experience Cloud ID 서비스를 지원할 수 있음을 의미합니다. 별도의 보고서 세트는 필요하지 않습니다.
링크 추적 및 비디오 추적은 이 방법에서 사용할 수 없습니다. AMP의 iframeMessage 태그는 페이지당 한 번만 로드될 수 있으므로 프레임이 로드된 후 다른 이미지 요청을 전송할 수 없습니다. 또한 이 메서드를 실행하려면 더 많은 처리 리소스가 필요하며 이는 스크롤 성능에 영향을 줄 수 있습니다. 모든 리소스는 비동기적으로 로드되므로 이 방법은 페이지 로드 시간에는 영향을 주지 않습니다.
FAQ
AMP 방문자를 데이터에 있는 다른 방문자와 구별하려면 어떻게 해야 합니까?
모든 AMP 페이지의 경우 JavaScript 버전 차원은 AMP vX.X와 유사한 값을 수집합니다. 사용자 지정 차원을 'AMP'로 설정하여 이러한 방문자를 세그먼트화할 수도 있습니다.
이 구현 방법은 Facebook 인스턴트 아티클과 어떻게 비교할 수 있습니까?
Facebook 인스턴트 아티클에서는 "adobeanalytics_nativeConfig" 메서드와 유사한 솔루션을 지원합니다. 이 방법의 stats.html 페이지는 AMP와 FIA 모두에 대한 분석 요구를 동시에 충족할 수 있습니다. FIA에서의 추적 구현에 대한 자세한 내용은 Facebook 인스턴트 아티클을 참조하십시오.