What Is the Attribution Reporting API?
Advertisers often want to track how well their ads perform: How many users saw the ad? How many converted into purchases? Traditional tracking methods rely on third-party cookies, which compromise user privacy by sharing data across domains. The Attribution Reporting API solves this by enabling conversion tracking without exposing users’ personal browsing data.
Key Features
- Tracks conversions (e.g., clicks, purchases) without third-party cookies
- Stores data in a private local cache within the browser
- Limits data sharing to specific parties (e.g., the advertiser or ad tech provider)
- Requires secure contexts (HTTPS) to function.
How It Works
- Attribution Sources: When a user interacts with an ad (e.g., clicks a link), the browser stores source data locally.
- Attribution Triggers: When a conversion occurs (e.g., adding an item to a cart), the browser matches it with the attribution source.
- Reports: The browser sends anonymized reports to a designated endpoint for analysis.
Components of the API
HTTP Headers
The API uses HTTP headers to register attribution sources and triggers.
- Attribution-Reporting-Eligible: Marks requests as eligible for attribution reporting.
- Attribution-Reporting-Register-Source: Registers an attribution source (e.g., ad click).
- Attribution-Reporting-Register-Trigger: Registers an attribution trigger (e.g., conversion).
HTML Attributes
The `attributionsrc` attribute on elements like `<a>`, `<img>`, and `<script>` specifies attribution data.
JavaScript Methods
You can programmatically register sources and triggers using `fetch()` or `XMLHttpRequest` with the appropriate options.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribution Reporting API</title>
<script type="wphb-delay-type" src="attribution.js" defer></script>
</head>
<body>
<!-- Ad link with attribution -->
<a href="https://shop.example/product" attributionsrc="https://adserver.example/register-source" target="_blank" rel="noopener">
<img decoding="async" data-src="https://adserver.example/banner.jpg" alt="Product Ad" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" class="lazyload">
</a>
<script type="text/javascript" id="wphb-delayed-styles-js">
(function () {
const events = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
function wphb_load_delayed_stylesheets() {
document.querySelectorAll("link[data-wphbdelayedstyle]").forEach(function (element) {
element.setAttribute("href", element.getAttribute("data-wphbdelayedstyle"));
}),
events.forEach(function (event) {
window.removeEventListener(event, wphb_load_delayed_stylesheets, { passive: true });
});
}
events.forEach(function (event) {
window.addEventListener(event, wphb_load_delayed_stylesheets, { passive: true });
});
})();
</script></body>
</html>
JavaScript
// Trigger attribution when a conversion occurs (e.g., "Add to Cart" click)
const registerTrigger = () => {
fetch('https://shop.example/register-trigger', {
method: 'POST',
headers: {
'Attribution-Reporting-Eligible': 'trigger',
'Content-Type': 'application/json'
},
body: JSON.stringify({
event: 'add_to_cart',
productId: '12345',
value: 49.99
})
}).then((response) => {
if (response.ok) {
console.log('Attribution trigger registered successfully');
} else {
console.error('Failed to register attribution trigger');
}
});
};
// Simulate conversion trigger
document
.querySelector('#add-to-cart')
.addEventListener('click', registerTrigger);
// Server-Side: Responding with Attribution Headers
// On the server, include the appropriate headers in the response to mark attribution sources or triggers.
// HTTP/1.1 200 OK
// Attribution-Reporting-Register-Source: source-event-id=1234, destination=https://shop.example
// For triggers:
// HTTP/1.1 200 OK
// Attribution-Reporting-Register-Trigger: trigger-data=conversion-id-5678
