SVGAElement.ping — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.ping

Beschreibung

Die Eigenschaft ping des Interfaces SVGAElement spiegelt das gleichnamige Inhaltsattribut eines <a>-Elements in SVG. Ihr Wert ist ein String mit einer oder mehreren URLs, getrennt durch Leerzeichen. Folgt der Nutzer dem Link, sendet der Browser an jede dieser URLs eine kleine POST-Anfrage im Hintergrund. Fachlich heißt das Hyperlink Auditing. Der Anfrageinhalt ist der Text PING mit dem Content-Type text/ping. Die Kopfzeilen Ping-From und Ping-To nennen die Ausgangs- und die Zielseite.

Typischer Einsatz ist die Klickmessung in interaktiven SVG-Grafiken wie Karten, Diagrammen oder Infografiken. Das ursprüngliche href muss dafür nicht über eine Weiterleitung laufen und es braucht kein JavaScript-click-Handler, der den Seitenwechsel verzögert. Die Navigation selbst läuft unverändert weiter und wird durch den Ping nicht ausgebremst.

Die Eigenschaft ist lesbar und schreibbar. Beim Lesen erhältst du den aktuellen Attributwert. Fehlt das Attribut, ist das ein leerer String. Beim Schreiben wird das Attribut ping am Element gesetzt, als hättest du setAttribute('ping', …) aufgerufen. Der Wert wird nicht geprüft: Ungültige URLs werden erst beim Versand verworfen.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs ping, also eine durch Leerzeichen getrennte Liste von URLs. Ist das Attribut nicht gesetzt, ist der Wert ein leerer String "".

Beispiele

Ping-URLs eines SVG-Links auslesen

// <svg><a id="karte-link" href="/berlin" ping="/stats/klick https://analytics.example.com/p">…</a></svg>
const link = document.querySelector('#karte-link');

console.log(link instanceof SVGAElement);
console.log(link.ping);

// Als Array weiterverarbeiten
const urls = link.ping.split(/\s+/).filter(Boolean);
console.log(urls.length);

true /stats/klick https://analytics.example.com/p 2

Klickmessung dynamisch für alle Links einer Grafik aktivieren

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg#infografik');

svg.querySelectorAll('a').forEach((a, index) => {
  // Jeder Link bekommt eine eigene Tracking-URL
  a.ping = `/api/ping?region=${index}`;
});

// Neues Link-Element anlegen und mit Ping versehen
const neuerLink = document.createElementNS(SVG_NS, 'a');
neuerLink.setAttribute('href', '/details');
neuerLink.ping = '/api/ping?region=neu';
svg.append(neuerLink);

console.log(neuerLink.getAttribute('ping'));

/api/ping?region=neu

Weitere URL anhängen und Ping wieder entfernen

const link = document.querySelector('svg a');

const addPing = (el, url) => {
  const liste = new Set(el.ping.split(/\s+/).filter(Boolean));
  liste.add(url);
  el.ping = [...liste].join(' ');
};

addPing(link, '/stats/a');
addPing(link, '/stats/b');
addPing(link, '/stats/a'); // Duplikat wird ignoriert
console.log(link.ping);

// Tracking vollständig abschalten
link.removeAttribute('ping');
console.log(JSON.stringify(link.ping));

/stats/a /stats/b ""

// Wichtig · Fallstricke

Browser-Unterstützung: SVGAElement.ping gilt als experimentell. Die Browser unterstützen die Eigenschaft deutlich uneinheitlicher als HTMLAnchorElement.ping. Prüfe vorher mit 'ping' in SVGAElement.prototype, ob sie vorhanden ist.
Versand nicht garantiert: Auch wenn die Eigenschaft existiert, verschickt nicht jeder Browser Pings. In Firefox ist Hyperlink Auditing standardmäßig abgeschaltet (browser.send_pings). Datenschutz-Erweiterungen blockieren Pings häufig. Für verlässliche Statistiken eignet sich eher navigator.sendBeacon().
Datenschutz: Pings geben Ausgangs- und Zielseite an Dritte weiter. Nach der DSGVO kann dafür eine Einwilligung nötig sein.
Anfrageformat: Der Browser sendet ein POST mit dem Inhalt PING. Für fremde Ursprünge gelten eingeschränkte Regeln zu Kopfzeilen und Referrer. Der Server sollte kurz antworten, zum Beispiel mit 204 No Content.
Pings werden nur verschickt, wenn wirklich ein Link verfolgt wird, also bei gesetztem href und ohne preventDefault().

Siehe auch

SVGAElement HTMLAnchorElement.ping SVGAElement.href SVGAElement.referrerPolicy Navigator.sendBeacon() Element.setAttribute() MathMLElement.nonce