HTMLImageElement: attributionSrc property
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The
attributionSrc
property of the HTMLImageElement
interface gets and sets the attributionsrc
attribute on an <img>
element programmatically, reflecting the value of that attribute. attributionsrc
specifies that you want the browser to send an Attribution-Reporting-Eligible
header along with the image request.
On the server-side this is used to trigger sending an Attribution-Reporting-Register-Source
or Attribution-Reporting-Register-Trigger
header in the response, to register an image-based attribution source or attribution trigger, respectively. Which response header should be sent back depends on the value of the Attribution-Reporting-Eligible
header that triggered the registration.
The source/trigger is registered once the browser receives the response containing the image file.
Note: Bear in mind that users might not necessarily be able to perceive the image at all — it might be a 1x1 transparent tracking pixel that is only being used for attribution reporting.
See the Attribution Reporting API for more details.
Value
A string. There are two versions of this property that you can get and set:
-
Empty string, i.e.
imgElem.attributionSrc=""
. This specifies that you want theAttribution-Reporting-Eligible
header sent to the same server as thesrc
attribute points to. This is fine when you are handling the attribution source or trigger registration on the same server. When registering an attribution trigger this property is optional, and an empty string value will be used if it is omitted. -
Value containing one or more URLs, for example:
jsimgElem.attributionSrc = "https://a.example/register-source https://b.example/register-source";
This is useful in cases where the requested resource is not on a server you control, or you just want to handle registering the attribution source on a different server. In this case, you can specify one or more URLs as the value of
attributionSrc
. When the resource request occurs theAttribution-Reporting-Eligible
header will be sent to the URL(s) specified inattributionSrc
in addition to the resource origin. These URLs can then respond with aAttribution-Reporting-Register-Source
orAttribution-Reporting-Register-Trigger
header as appropriate to complete registration.Note: Specifying multiple URLs means that multiple attribution sources can be registered on the same feature. You might for example have different campaigns that you are trying to measure the success of, which involve generating different reports on different data.
Examples
Setting an empty attributionSrc
<img src="advertising-image.png" />
const imgElem = document.querySelector("img");
imgElem.attributionSrc = "";
Setting an attributionSrc containing URLs
<img src="advertising-image.png" />
// encode the URLs in case they contain special characters
// such as '=' that would be improperly parsed.
const encodedUrlA = encodeURIComponent("https://a.example/register-source");
const encodedUrlB = encodeURIComponent("https://b.example/register-source");
const imgElem = document.querySelector("img");
imgElem.attributionSrc = `${encodedUrlA} ${encodedUrlB}`;
Specifications
Specification |
---|
Attribution Reporting # dom-htmlattributionsrcelementutils-attributionsrc |
Browser compatibility
BCD tables only load in the browser