HTMLImageElement : propriété attributionSrc

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Contexte sécurisé: Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété attributionSrc de l'interface HTMLImageElement permet d'obtenir et de définir l'attribut attributionsrc sur un élément <img> de façon programmatique, en reflétant la valeur de cet attribut. attributionsrc indique que vous souhaitez que le navigateur envoie un en-tête Attribution-Reporting-Eligible avec la requête de l'image.

Du côté serveur, cela sert à déclencher l'envoi d'un en-tête Attribution-Reporting-Register-Source ou Attribution-Reporting-Register-Trigger dans la réponse, afin d'enregistrer respectivement une source d'attribution ou un déclencheur d'attribution basé·e sur une image. L'en-tête de réponse à envoyer dépend de la valeur de l'en-tête Attribution-Reporting-Eligible qui a déclenché l'enregistrement.

La source ou le déclencheur sont enregistrés une fois que le navigateur reçoit la réponse contenant le fichier image.

Note : Gardez à l'esprit que les utilisateur·ice·s ne perçoivent pas forcément l'image — il peut s'agir d'un pixel de suivi transparent 1x1 utilisé uniquement pour le reporting d'attribution.

Voir l'API Attribution Reporting pour plus de détails.

Valeur

Un chaîne de caractères. Il existe deux versions de cette propriété que vous pouvez obtenir et définir :

Un chaîne de caractères vide, c'est-à-dire imgElem.attributionSrc="". Cela indique que vous souhaitez que l'en-tête Attribution-Reporting-Eligible soit envoyé au même serveur que celui indiqué par l'attribut src. Cela convient lorsque vous gérez l'enregistrement de la source ou du déclencheur d'attribution sur le même serveur. Lors de l'enregistrement d'un déclencheur d'attribution, cette propriété est optionnelle, et une valeur vide sera utilisée si elle est omise.
Valeur contenant une ou plusieurs URL, par exemple :
js
```
imgElem.attributionSrc =
  "https://a.example/register-source https://b.example/register-source";
```
Cela est utile lorsque la ressource demandée n'est pas sur un serveur que vous contrôlez, ou si vous souhaitez gérer l'enregistrement de la source d'attribution sur un autre serveur. Dans ce cas, vous pouvez spécifier une ou plusieurs URL comme valeur de attributionSrc. Lors de la requête de la ressource, l'en-tête Attribution-Reporting-Eligible sera envoyé aux URL spécifiées dans attributionSrc en plus de l'origine de la ressource. Ces URL peuvent alors répondre avec un en-tête Attribution-Reporting-Register-Source ou Attribution-Reporting-Register-Trigger selon le cas pour compléter l'enregistrement.

Note : Définir plusieurs URL permet d'enregistrer plusieurs sources d'attribution sur la même fonctionnalité. Par exemple, vous pouvez avoir différentes campagnes dont vous souhaitez mesurer le succès, ce qui implique de générer différents rapports sur différentes données.

Exemples

Définir un `attributionSrc` vide

html

<img src="advertising-image.png" />

const imgElem = document.querySelector("img");
imgElem.attributionSrc = "";

Définir un `attributionSrc` contenant des URL

html

<img src="advertising-image.png" />

// Encoder les URL au cas où elles contiendraient des caractères spéciaux
// comme '=' qui seraient mal interprétés.
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}`;