기여 분석 소스 등록

소스를 등록하여 클릭 및 조회를 적절한 이벤트에 부여하는 방법을 알아봅니다.

기여 분석 소스는 광고 기술에서 다음과 같은 종류의 정보를 첨부할 수 있는 광고 관련 이벤트 (클릭 또는 조회)입니다.

  • 광고 소재 ID, 캠페인에 대한 정보, 지역과 같은 문맥 보고 데이터
  • 사용자가 전환할 것으로 예상되는 사이트의 전환 도착 페이지

이 문서의 단계에 따라 브라우저에서 전환 기여도를 부여하는 소스(광고 노출 또는 클릭)를 등록할 수 있습니다.

등록 방법

기여 분석 소스를 등록하려면 HTML 요소 또는 JavaScript 호출을 사용합니다.

  • <a> 태그
  • <img> 태그
  • <script> 태그
  • fetch 통화
  • XMLHttpRequest
  • window.open 통화

이렇게 하면 소스 코드로 응답하는 네트워크 요청이 생성됩니다. 등록 HTTP 응답 헤더입니다.

클릭 또는 조회 소스 등록

클릭 또는 조회에 대한 기여 분석 소스를 등록하려면 여기에 설명된 단계를 따르세요. 전체 단계를 따르면 됩니다. 요약하면 다음과 같습니다.

  1. 소스 등록을 시작합니다. HTML 요소 또는 JavaScript 호출을 사용하여 요청을 만듭니다. 다음 섹션에서 확인할 수 있듯이 이 단계는 클릭수 및 조회수의 경우 다릅니다.

  2. 소스로 응답하여 소스 등록을 완료합니다. 등록 헤더의 캡션을 확인할 수 있습니다. 요청을 받으면 Attribution-Reporting-Register-Source 이 헤더에서 기여 분석 보고 구성을 선택합니다. 이 단계는 클릭수와 조회수 모두 동일합니다.

    요약 보고서의 예:

    {
  "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 요소를 사용하거나 JavaScript를 호출하여 소스를 등록할 때 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> 태그 또는 JavaScript를 사용하면 됩니다. 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">Click me</a>

JavaScript의 경우 attributionsrc에 값을 지정하면 를 사용하여 URL을 인코딩하는 특수 문자(예: =)가 포함되어 있으면 매개변수가 잘못 파싱될 수 있습니다.

다음과 같이 인코딩합니다.

const encodedUrl = encodeURIComponent(
  "https://adtech.example/attribution_source?ad_id=...");
window.open(
  "https://shoes.example/landing",
   "_blank",
   `attributionsrc=${encodedUrl}`);

attributionsrc는 <a> 태그를 사용하여 여기 표시된 대로 공백으로 구분된 URL 목록을 사용할 수도 있습니다.

<a href=... attributionsrc="https://a.example/register-source
  https://b.example/register-source">Click me</a>

또는 window.open()를 사용하여 지금처럼 말이죠.

window.open("...", "_blank", `attributionsrc=${encodedUrl1}
  attributionsrc=${encodedUrl2}`)

이 경우 두 URL 모두 탐색 소스에 적합한 attributionsrc를 수신합니다. 요청 (Attribution-Reporting-Eligible 헤더를 포함하는 요청)

값이 있거나 없는 attributionsrc

이전에 살펴본 것처럼 URL 없이 attributionsrc를 지정할 수 있습니다. 또한 포드의 단일 URL일 수 있습니다. 또한 공백으로 구분된 URL 목록을 사용할 수 있습니다.

URL을 사용하면 브라우저에서 별도의 연결 유지 가져오기 요청(하나의 각 URL - Attribution-Reporting-Eligible 요청 포함 헤더를 클릭하세요.

이 메서드는 요청을 받습니다.

예를 들어 앵커 요소 클릭에 대한 소스를 등록해야 하는 경우 실제로 도착 페이지를 직접 제어하지 못할 수도 있습니다. 이 경우 요청에 대한 응답으로 소스 등록 헤더를 전송하는 구성 탐색과 분리되어 있으며 완전히 제어할 수 있습니다. 작성자: attributionsrc에 명시적 값을 지정하면 브라우저에서 추가 요청을 하고 대상을 구성할 수 있습니다.

보기의 기여 분석 소스를 등록하려면 attributionsrc 속성을 추가할 이미지 또는 스크립트 태그를 사용하면 됩니다.

또는 JavaScript fetch() 또는 XMLHttpRequest()를 사용할 수 있습니다.

이미지 포함

<img attributionsrc
src="https://adtech.example/attribution_source?ad_id=...">

스크립트 사용

<script attributionsrc
  src="https://adtech.example/attribution_source?ad_id=..."></script>

원하는 경우 attributionsrc 클릭수 즉, 이미지나 스크립트의 경우 다음과 같이 attributionsrc URL을 설정할 수 있습니다.

단일 URL 사용:

<img attributionsrc="https://adtech.example/attribution_source?ad_id=123">

URL 목록 사용:

<img attributionsrc="https://a.example/register-source
  https://b.example/register-source">

fetch() 또는 XMLHttpRequest() 사용

이 코드는 attributionsrc를 사용하는 HTML 요청이 하는 작업을 효과적으로 시뮬레이션합니다.

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 });

const attributionReporting = {
  eventSourceEligible: true,
  triggerEligible: false,
};

const req = new XMLHttpRequest();
req.open("GET", url);
req.setAttributionReporting(attributionReporting);
req.send();

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"}

다음 단계

기여 분석 트리거를 등록하는 방법을 알아보세요.