Register attribution sources

To register an attribution source for a click, you can use an <a> tag or JavaScript window.open().

# Using an anchor

Add attributionsrc to existing <a> tags for which you want to measure impressions or clicks:

<a href="https://shoes.example/..." 
  attributionsrc>Click me</a>

Review the example code for more information.

# Using a script

Call window.open() with attributionsrc:

window.open(
  "https://shoes.example/...",
  "_blank",
  "attributionsrc");

To be taken into account, this method must be called within 5 seconds of user interaction.

Instead of adding attributionsrc by itself, for an image or script you can specify a single URL value:

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

In the JavaScript case, if you give attributionsrc a value, make sure to encode that URL in case it contains special characters such as '=' that would cause the parameter to be improperly parsed.

Encode as follows:

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

attributionsrc can also take a space-separated list of URLs as illustrated here with an anchor tag:

<!-- With an anchor tag -->
<a href=... attributionsrc="https://a.example/register-source 
  https://b.example/register-source"> 

or as it is here using window.open().

// With window.open()
window.open('...', '_blank', attributionsrc=${encodedUrl1}
  attributionsrc=${encodedUrl2})

In such cases, both URLs receive navigation-source-eligible attributionsrc requests (requests that include the Attribution-Reporting-Eligible header).

# attributionsrc with or without a value

As you saw previously, you can specify attributionsrc without a URL. You can also specify a single URL. Additionally, for sources only (not applicable to triggers), you can use a space-separated list of URLs.

Using URLs causes the browser to initiate a separate keepalive fetch request—one for each URL—which includes the Attribution-Reporting-Eligible request header.

This is useful if you want to make the source registration by responding to a request that is separate from the element's main request.

For example, if you need to register sources for clicks on an anchor element, you may not actually be in control of the destination; in this case, you'll want a configuration whereby you send the source registration header as a response to a request that is separate from the navigation, and that you can completely control. By specifying an explicit value for attributionsrc, you're instructing the browser to make that extra request and configuring its destination.

For step 1 of registering views go to the tabs and select Views step 1.

To register an attribution source for a view, you can use an image or script tag to which you'll add the attributionsrc attribute.

Alternatively, you can use JavaScript fetch() or XMLHttpRequest().

# With an image

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

# With a script

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

Optionally, you can specify a URL value for attributionsrc in the same way as for clicks; that is, for an image or script , you can set the attributionsrc URL or URLs like so:

With a single URL:

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

With a list of URLs:

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

# Using fetch() or XMLHttpRequest()

This code effectively simulates what an HTML request with attributionsrc would do:

// 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();

For step 1 of registering clicks go to the tabs and select Clicks step 1.