소스를 등록하여 적절한 이벤트에 클릭 및 조회를 부여하는 방법을 알아보세요.
기여 분석 소스란 광고 관련 이벤트(클릭 또는 조회)로, 광고 기술이 다음과 같은 종류의 정보를 추가할 수 있습니다. - 문맥 보고서 데이터(예: 광고 소재 ID, 캠페인 정보, 지역) - 사용자가 전환할 것으로 예상되는 사이트에서와 같은 전환 도착 페이지
본 도움말에 나온 단계에 따라 소스(광고 노출 또는 클릭)를 등록하면 브라우저가 전환에 기여한 것으로 확인할 수 있습니다.
등록 방법
기여 분석 소스를 등록하려면 HTML 요소 또는 자바스크립트 호출을 사용합니다.
<a>
태그<img>
태그<script>
태그- 전화번호 애셋
fetch
개 XMLHttpRequest
window.open
그러면 소스 등록 HTTP 응답 헤더로 응답하는 네트워크 요청이 생성됩니다.
클릭 또는 조회에 대한 소스 등록
클릭수 또는 조회수에 대한 기여 분석 소스를 등록하려면 여기에 나온 단계를 따르세요. 전체 단계가 따라옵니다. 요약하면 다음과 같습니다.
- 소스 등록을 시작합니다. 요청하려면 HTML 요소 또는 자바스크립트 호출을 사용하세요. 클릭수 및 조회수의 경우에는 이 단계가 다르며, 이에 대해서는 다음 섹션에서 확인할 수 있습니다.
소스 등록 헤더로 응답하여 소스 등록을 완료합니다. 요청을 받으면
Attribution-Reporting-Register-Source
헤더를 사용하여 응답합니다. 이 헤더에서 원하는 Attribution Reporting 구성을 지정합니다. 이 단계는 클릭수와 조회수에 대해 동일합니다.요약 보고서의 예시:
{ "aggregation_keys": { "campaignCounts": "0x159", "geoValue": "0x5" }, "aggregatable_report_window": "86400", "destination": "https://example.com" }
이벤트 수준 보고서의 예:
{ "source_event_id": "12340873456", "destination": "[eTLD+1]", "expiry": "[64-bit signed integer]", "priority": "[64-bit signed integer]", "event_report_window": "[64-bit signed integer]" }
필수 및 선택 속성
HTML 요소를 사용하거나 자바스크립트를 호출하여 소스를 등록할 때 attributionsrc
또는 attributionReporting
를 사용해야 할 수도 있습니다. 이 작업이 필요한 경우에 대한 자세한 내용은 다음 표를 참조하세요.
attributionsrc
가 선택사항인 경우 이를 사용하면 요청이 Attribution Reporting에 적합하다는 의미입니다. attributionsrc
를 사용하면 브라우저에서 Attribution-Reporting-Eligible
헤더를 전송합니다. 앱에서 웹으로의 측정에도 유용합니다. attributionsrc
가 있으면 브라우저에서 Attribution-Reporting-Support
헤더를 전송합니다.
등록 방법 | 소스 |
---|---|
<a> 태그 |
(탐색 소스)attributionsrc 는 필수입니다. |
<img> 태그 |
(이벤트 소스)attributionsrc 는 필수입니다. |
<script> 태그 |
(이벤트 소스)attributionsrc 는 필수입니다. |
전화번호 애셋 fetch 개 |
attributionReporting 옵션은 필수입니다. |
XMLHttpRequest
|
attributionReporting 옵션은 필수입니다. |
window.open()
|
(탐색 소스)attributionsrc 은 필수 항목입니다. |
1단계: 소스 등록 시작하기
클릭수 및 조회수는 1단계가 다릅니다. 각각 해당하는 탭을 엽니다.
클릭에 대한 기여 분석 소스를 등록하려면 <a>
태그 또는 자바스크립트 window.open()
를 사용하면 됩니다.
앵커 사용
노출수 또는 클릭수를 측정하려는 기존 <a> 태그에 attributionsrc
을 추가합니다.
<a href="https://shoes.example/..."
attributionsrc>Click me</a>
자세한 내용은 예시 코드를 검토하세요.
스크립트 사용
attributionsrc
로 window.open()
를 호출합니다.
window.open(
"https://shoes.example/...",
"_blank",
"attributionsrc");
사용자 상호작용 후 5초 이내에 이 메서드가 호출되어야 고려됩니다.
attributionsrc
만 추가하는 대신 이미지 또는 스크립트에 단일 URL 값을 지정할 수 있습니다.
<a href=... attributionsrc="https://a.example/register-source">
자바스크립트의 경우 attributionsrc
에 값을 지정할 경우 '='와 같은 특수문자가 포함되어 있으면 매개변수가 부적절하게 파싱될 수 있으므로 URL을 인코딩해야 합니다.
다음과 같이 인코딩합니다.
const encodedUrl = encodeURIComponent(
'https://adtech.example/attribution_source?ad_id=...');
window.open(
"https://shoes.example/landing",
"_blank",
attributionsrc=${encodedUrl});
attributionsrc
는 앵커 태그를 사용하여 여기에 설명된 대로 공백으로 구분된 URL 목록을 가져올 수도 있습니다.
<!-- With an anchor tag -->
<a href=... attributionsrc="https://a.example/register-source
https://b.example/register-source">
또는 window.open()
를 사용하여 여기 있는 그대로의 모습일 수도 있습니다.
// With window.open()
window.open('...', '_blank', attributionsrc=${encodedUrl1}
attributionsrc=${encodedUrl2})
이러한 경우 두 URL 모두 navigation-source-eligible
attributionsrc
요청 (Attribution-Reporting-Eligible
헤더가 포함된 요청)을 수신합니다.
값이 있거나 없는 attributionsrc
앞에서 본 것처럼 URL 없이 attributionsrc
를 지정할 수 있습니다. 단일 URL을 지정할 수도 있습니다. 또한 소스에만 (트리거에는 해당되지 않음) 공백으로 구분된 URL 목록을 사용할 수 있습니다.
URL을 사용하면 브라우저에서 Attribution-Reporting-Eligible
요청 헤더가 포함된 별도의 연결 유지 가져오기 요청(URL마다 하나씩)을 시작합니다.
이는 요소의 기본 요청과는 별도의 요청에 응답하여 소스를 등록하려는 경우에 유용합니다.
예를 들어 앵커 요소의 클릭에 대한 소스를 등록해야 하는 경우 실제로 대상을 제어하지 못할 수 있습니다. 이 경우 탐색과는 별개인 요청에 대한 응답으로 소스 등록 헤더를 전송하고 완전히 제어할 수 있는 구성이 필요할 수 있습니다. attributionsrc
의 명시적 값을 지정하면 브라우저가 추가 요청을 실행하고 대상을 구성하도록 지시하게 됩니다.
뷰 등록 1단계의 경우 탭으로 이동하여 뷰 1단계를 선택합니다.
뷰의 기여 분석 소스를 등록하려면 attributionsrc
속성을 추가할 이미지 또는 스크립트 태그를 사용하면 됩니다.
또는 JavaScript fetch()
또는 XMLHttpRequest()
를 사용할 수 있습니다.
이미지 포함
<img attributionsrc
src="https://adtech.example/attribution_source?ad_id=..."/>
스크립트 사용
<script attributionsrc
src="https://adtech.example/attribution_source?ad_id=..."/>
원하는 경우 클릭과 동일한 방식으로 attributionsrc
의 URL 값을 지정할 수 있습니다. 즉, 이미지 또는 스크립트의 경우 다음과 같이 attributionsrc
URL을 설정할 수 있습니다.
단일 URL로:
attributionsrc="https://adtech.example/attribution_source?ad_id=123"
URL 목록:
attributionsrc="https://a.example/register-source
https://b.example/register-source"
fetch()
또는 XMLHttpRequest()
사용
이 코드는 attributionsrc
를 사용한 HTML 요청이 실행하는 작업을 효과적으로 시뮬레이션합니다.
// With fetch
const attributionReporting = {
eventSourceEligible: true,
triggerEligible: false,
};
// Optionally set keepalive to ensure the request outlives the page.
window.fetch("https://adtech.example/attribution_source?my_ad_id=123", {
keepalive: true, attributionReporting });
// With XHR
const attributionReporting = {
eventSourceEligible: true,
triggerEligible: false,
};
const req = new XMLHttpRequest();
req.open('GET', url);
req.setAttributionReporting(
attributionReporting);
req.send();
클릭을 등록하는 1단계에서 탭으로 이동하여 클릭수 1단계를 선택합니다.
2단계: 헤더로 응답 (클릭수 및 조회수)
클릭수와 조회수의 다음 단계는 Attribution-Reporting-Register-Source
헤더로 응답하는 것입니다.
자세한 내용은 예시 코드를 검토하세요.
서버에서 브라우저 요청을 받으면 Attribution-Reporting-Register-Source
헤더를 응답에 포함하여 응답합니다.
res.set(
'Attribution-Reporting-Register-Source',
JSON.stringify({
// Use source_event_id to map it to any granular information
// you need at ad-serving time
source_event_id: '412444888111012',
destination: 'https://advertiser.example',
// Optional fields
expiry: '604800',
priority: '100',
debug_key: '122939999'
})
);
문자열화되면 헤더는 다음과 같이 표시됩니다.
{"source_event_id":"412444888111012","destination":"https://advertiser.example","expiry":"604800","priority":"100","debug_key":"122939999"}
다음 단계
기여 분석 트리거를 등록하는 방법 알아보기