HTMLAnchorElement: attributionSrc プロパティ

Limited availability

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

attributionSrcHTMLAnchorElement インターフェイスのプロパティで、<a> 要素の attributionsrc 属性をプログラムから取得および設定ます。attributionsrc は、ブラウザーに Attribution-Reporting-Eligible ヘッダーを送信するように指定します。サーバー側では、レスポンスで Attribution-Reporting-Register-Source ヘッダーを送信し、ナビゲーションベースの帰属元を登録するために使用されます。

ブラウザーは、ナビゲーションレスポンスを受信すると、ナビゲーションベースの帰属ソース(Attribution-Reporting-Register-Source レスポンスヘッダーで指定されたもの)に関連付けられたソースデータを格納します。

詳細は、帰属レポート API を参照してください。

メモ: <a> 要素は帰属のトリガーとして使用することはできず、ソースのみです。

文字列です。このプロパティには、取得や設定ができる 2 つのバージョンがあります。

  • 空文字列、すなわち aElem.attributionSrc="" です。これは、href 属性が指し示すのと同じサーバーに Attribution-Reporting-Eligible ヘッダーが送信されることを指定します。この点は、帰属元の登録を同じサーバーで処理する場合は問題ありません。

  • 1 つ以上の URL を含む値、例えば次のようなものです。

    js
    aElem.attributionSrc =
      "https://a.example/register-source https://b.example/register-source";
    

    これは、リクエストされたリソースが管理下のサーバーにない場合や、別のサーバーでの帰属元の登録を処理したい場合に便利です。この場合、attributionSrc の値として 1 つ以上の URL を指定することができます。リソースへのリクエストが発生すると、リソースのオリジンに加えて、attributionSrcで指定された URL に Attribution-Reporting-Eligible ヘッダーが送信されます。これらの URL は、ソースを登録するために Attribution-Reporting-Register-Source で応答することができます。

    メモ: 複数の URL を指定するということは、同じ機能に複数の帰属ソースを登録できるということになります。例えば、成功を測定しようとしているさまざまなキャンペーンが、異なるデータに関する異なるレポートの生成に関与している場合、異なるキャンペーンを行うことができます。

空の attributionSrc の設定

html
<a href="https://shop.example"> Click to visit our shop </a>
js
const aElem = document.querySelector("a");
aElem.attributionSrc = "";

URL を格納するアトリビューション Src を設定するには

html
<a href="https://ourshop.example"> Click to visit our shop </a>
js
// 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 aElem = document.querySelector("a");
aElem.attributionSrc = `${encodedUrlA} ${encodedUrlB}`;

仕様書

Specification
Attribution Reporting
# dom-htmlattributionsrcelementutils-attributionsrc

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attributionSrc
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報