Inhaltsverfolgung

Mit der Inhaltsverfolgung ( siehe Benutzerhandbuch ) kannst Du die Interaktion mit dem Inhalt einer Webseite oder Anwendung verfolgen.

Mit Content-Tracking kannst Du beispielsweise messen, wie oft eine bestimmte Anzeige auf Deiner Webseite geschaltet wurde oder wie oft darauf geklickt wurde.

Diese Funktion ist nicht nur auf Anzeigen oder Bilder beschränkt, Du kannst sie auch für jede Art von HTML-Inhalt verwenden.

Wortschatz

Manuelle Inhaltsverfolgung

Du kannst Inhalt-Impressionen und -Interaktionen vollständig programmatisch nachverfolgen. Sieh Dir dazu die Methoden trackContentImpressionundtrackContentInteraction in der JavaScript Tracker API-Referenz an.

Verfolge Inhalte auf diese Weise, wenn Du das Markup Deiner Webseite nicht einfach ändern kannst oder wenn Du die vollständige Kontrolle über alle erfassten Impressionen und Interaktionen wünschst.

Deklaratives Inhalts-Tracking

Anstatt den Inhalt programmgesteuert mit der JavaScript-API zu verfolgen, kannst Du HTML-Attribute in Deiner Webseite verwenden.

Initialisieren des Trackers

Damit die Dinge funktionieren, müssen wir zuerst den Tracker initialisieren. Du musst entscheiden, ob Du alle Inhaltsblöcke der Seite verfolgen möchtest oder nur die sichtbaren.

Weitere Informationen hierzu findest Du in der JavaScript Tracker API-Referenz: trackAllContentImpressionsundtrackVisibleContentImpressions

Beispiel für das Verfolgen aller Inhaltsblöcke:

var _paq = window._paq = window._paq || [];
_paq.push(['setTrackerUrl', 'psstats.php']);
_paq.push(['setSiteId', 1]);
_paq.push(['enableLinkTracking']);
_paq.push(['trackPageView']);
_paq.push(['trackAllContentImpressions']);

Beispiel für das Tracking nur sichtbarer Inhaltsblöcke:

[...]
_paq.push(['trackPageView']);
_paq.push(['trackVisibleContentImpressions']);

Inhalte markieren

Nachdem Du den Tracker initialisiert hast, musst Du HTML-Blöcke mit Tags versehen, um sie als Inhaltsblöcke zu deklarieren .

Dazu werden die folgenden Attribute und ihre entsprechenden CSS-Klassen verwendet und in den nächsten Kapiteln ausführlich erläutert:

Du kannst entweder HTML-Attribute oder CSS-Klassen verwenden, um Inhalt zu taggen.

Attribute haben immer Vorrang vor CSS-Klassen. Wenn Du dasselbe Attribut oder dieselbe Klasse auf mehrere Elemente innerhalb eines Blocks setzt, gewinnt immer das zuerst gefundene Element. Verschachtelte Inhaltsblöcke werden derzeit nicht unterstützt.

HTML-Attribute oder CSS-Klassen?

HTML-Attribute sind die empfohlene Vorgehensweise, da Du damit spezifische Werte für Inhaltsname, Inhaltsteil und Inhaltsziel festlegen kannst. Andernfalls müssen wir den Inhaltsnamen, das Stück und das Ziel automatisch anhand eines Regelwerks erkennen, das weiter unten erläutert wird. Wir versuchen beispielsweise, das Inhaltsziel aus einem hrefAttribut eines Links, den Inhalt aus einem srcAttribut eines Bildes und den Namen aus einem titleAttribut zu lesen . Wenn Du uns diese Werte automatisch erkennen lässt, kann dies Dein Tracking im Laufe der Zeit beeinflussen. Wenn Du beispielsweise dieselbe Seite in verschiedenen Sprachen bereitstellst, können wir in vielen verschiedenen Kombinationen von Inhaltsblöcken enden, die tatsächlich alle dasselbe darstellen. Auch wenn Du eintitle-Attribut zu einem Element hinzufügst kann sich der erkannte Inhaltsname ändern, obwohl Du dies nicht wolltest. Die Analyse der Entwicklung eines Inhaltsblocks funktioniert in diesem Fall nicht mehr. Daher wird empfohlen, die HTML-Attribute zu verwenden, um Deinen Inhalt mit Tags zu versehen und Werte anzugeben, die sich nur ändern, wenn Du möchtest, dass sie sich ändern.

Beispiel

<a href="/purchase" data-track-content data-content-name="Mein Produktname" data-content-piece="Kaufe jetzt">
    translate('Kaufe es jetzt')
</a>

Hier definieren wir einen Inhaltsblock mit dem Namen „Mein Produktname“. Der verwendete Inhaltsteil ist immer „Jetzt kaufen“, auch wenn Du eine übersetzte Version für verschiedene Besucher basierend auf ihrer Sprache verwendest. Dies kann die Analyse der Daten erleichtern. Das Inhaltsziel wird anhand des hrefAttributs erkannt , das normalerweise als ok angesehen wird.

Wie definiere ich einen Inhaltsblock?

Das Definieren eines Inhaltsblocks ist obligatorisch, um Inhalte zu verfolgen. Für jede Anzeige, jedes Banner oder jeden anderen Inhalt, den Du verfolgen möchtest, musst Du einen Inhaltsblock erstellen. Du kannts entweder das Attribut data-track-contentoder die CSS-Klasse psstatsTrackContentverwenden. Das Attribut erfordert keinen Wert.

Beispiele:

<img src="img-en.jpg" data-track-content/>
// content name   = absolutePath(img-en.jpg)
// content piece  = absoluteUrl(img-en.jpg)
// content target = ""

// oder
<img src="img-en.jpg" class="psstatsTrackContent"/>
// content name   = absolutePath(img-en.jpg)
// content piece  = absoluteUrl(img-en.jpg)
// content target = ""

Wie Du in diesen Beispielen sehen kannst, erkennen wir den Inhalt und den Namen automatisch basierend auf dem srcAttribut des Bildes. Das Inhaltsziel kann nicht erkannt werden, da ein Bild kein hrefAttribut definiert. PS Stats verfolgt eine Interaktion automatisch, sobald ein Besucher auf das Bild klickt.

Wie erkennen wir den Inhaltsteil?

• Das einfachste Szenario besteht darin, ein HTML-Attribut data-content-piece="foo"mit einem Wert an einer beliebigen Stelle im Inhaltsblock oder im Inhaltsblockelement selbst bereitzustellen .
• Wenn kein solches Attribut vorhanden ist, prüfen wir, ob das Inhaltselement ein Medium ist (Audio, Video, Bild, PDF, …) und versuchen, die URL des Mediums automatisch zu finden.
  • Um das Inhaltselement zu finden, suchen wir nach einem Element mit dem Attribut data-content-pieceoder der CSS-Klasse psstatsContentPiece. Dieses Attribut/diese Klasse kann überall innerhalb eines Inhaltsblocks angegeben werden. Wenn wir kein bestimmtes Inhaltselement finden, verwenden wir das Inhaltsblockelement.
  • Bei Video- oder Audioelementen wählen wir, wenn mehrere Quellen definiert sind, die URL der ersten Quelle.
  • Wir erstellen automatisch eine vollständig qualifizierte URL der Quelle, falls wir eine finden. Auf diese Weise kannst Du eine Vorschau in der Benutzeroberfläche anzeigen und genau wissen, welche Medien angezeigt wurden, falls relative Pfade verwendet werden.
• Wenn wir nichts gefunden haben, greifen wir auf den Wert „Unbekannt“ zurück. In einem solchen Fall solltest Du das data-content-pieceAttribut setzen, das uns explizit den Inhalt mitteilt.

Beispiele:

<a href="https://www.example.com" data-track-content>
    <img src="img-en.jpg" data-content-piece="img.jpg"/>
</a>
// content name   = img.jpg
// content piece  = img.jpg
// content target = https://www.example.com

Wie Du siehst, ist ein bestimmter Wert für den Inhaltsteil definiert, der nützlich sein kann, wenn Dein Text oder Deine Bilder für jede Sprache unterschiedlich sind. Diesmal können wir auch das Inhaltsziel automatisch erkennen, da wir den Inhaltsblock auf ein aElement gesetzt haben. Dazu später mehr. Das data-content-pieceAttribut kann auf jedes Element gesetzt werden, sogar im aElement.

<a href="https://www.example.com" data-track-content>
    <img src="img-en.jpg" data-content-piece/>
</a>

// oder
<a href="https://www.example.com" data-track-content>
    <img src="img-en.jpg" class="psstatsContentPiece"/>
</a>
// content name   = absolutePath(img-en.jpg)
// content piece  = absoluteUrl(img-en.jpg)
// content target = https://www.example.com

In diesen Beispielen konnten wir den Namen und den Inhalt automatisch anhand des srcAttributs erkennen. Wir erstellen automatisch eine vollständig qualifizierte URL für das Bild.

<a href="https://www.example.com" data-track-content>
    <p data-content-piece>Lorem ipsum dolor sit amet</p>
</a>

// oder
<a href="https://www.example.com" data-track-content>
    <p class="psstatsContentPiece">Lorem ipsum dolor sit amet</p>
</a>
// content name   = Unknown
// content piece  = Unknown
// content target = https://www.example.com

Da das Inhaltselement kein Medium ist, können wir den Inhalt nicht automatisch erkennen. In einem solchen Fall musst Du das data-content-pieceAttribut definieren und ihm einen Wert setzen. Wir verwenden den Text dieses Elements nicht, weil

• der Text kann sich oft ändern, was zu vielen verschiedenen Inhaltsteilen führt
• der Text könnte sehr lang sein und das automatische Schneiden des Textes könnte ungenau sein
• der Text könnte übersetzt werden, was zu vielen verschiedenen Inhalten führen würde, obwohl er immer gleich ist
• der Text kann benutzerspezifische oder sensible Inhalte enthalten

Besser:

<a href="https://www.example.com" data-track-content>
    <p data-content-piece="Mein Inhalt">Lorem ipsum dolor sit amet...</p>
</a>
// content name   = Mein Inhalt
// content piece  = Mein Inhalt
// content target = https://www.example.com

Wie erkennen wir den Inhaltsnamen?

Der Inhaltsname stellt einen Inhaltsblock dar, der Dir in der PS Stats-Benutzeroberfläche hilft, einen bestimmten Block leicht zu identifizieren. Ein Inhaltsname gruppiert verschiedene Inhaltsteile. Während ein Inhaltsname beispielsweise „Mein Produkt 1“ lauten könnte, könnte es viele verschiedene Inhaltsteile geben, um genau zu wissen, welcher Inhalt angezeigt und mit welchem ​​interagiert wurde. Zum Beispiel „Jetzt kaufen“, „Klicke hier, um zu kaufen“, „/image.png“.

• Das einfachste Szenario besteht darin, ein HTML-Attribut data-content-namean einer beliebigen Stelle innerhalb eines Inhaltsblocks oder im Inhaltsblockelement selbst mit einem Wert zu versehen.
• Wenn kein solches Attribut vorhanden ist, verwenden wir den Wert des Inhaltsteils, falls es einen gibt (wenn !== Unknown).
  • Wenn der Inhaltsteil eine URL ist, die mit der aktuellen Domain der Website identisch ist, entfernen wir die Domain aus der URL
• Wenn wir keinen Wert für das Inhaltselement finden, suchen wir nach einem titleAttribut im Inhaltsblockelement.
• Wenn wir keinen Namen finden, suchen wir nach einem titleAttribut im Inhaltselement-Element.
• Wenn wir keinen Namen finden, suchen wir nach einem titleAttribut im Inhaltszielelement.
• Wenn wir keinen Namen finden, greifen wir auf „Unbekannt“ zurück

Die automatische Erkennung des Namens basierend auf einem Titel oder einem Inhaltsteil kann zu vielen verschiedenen Inhaltsnamen führen. Auch hier empfehlen wir die Angabe eines Namens über das data-content-nameAttribut.

Beispiele:

<img src="img-en.jpg" data-track-content data-content-name="Image1"/>
// content name   = Image1
// content piece  = absoluteUrl(img-en.jpg)
// content target = ""

In diesem Beispiel kannst Du ein data-content-nameAttribut überall dort definieren , wo wir den Namen des Inhalts leicht erkennen können.

<img src="img-en.jpg" data-track-content/>
// content name   = absolutePath(img-en.jpg)
// content piece  = absoluteUrl(img-en.jpg)
// content target = ""

Wenn kein Inhaltsname festgelegt ist, wird standardmäßig der Inhaltsteil verwendet, falls einer vorhanden ist. Da das Bild dieselbe Domain wie die aktuelle Seite hat, wird nur der absolute Pfad des Bildes als Name verwendet.

<img src="https://www.example.com/path/img-en.jpg" data-track-content/>
// content name   = /path/img-en.jpg
// content piece  = https://www.example.com/path/img-en.jpg
// content target = ""

Wenn ein Inhaltsteil eine Domain enthält, die mit der Domain der aktuellen Website identisch ist, werden wir sie entfernen.

<a href="https://www.example.com" data-track-content>Lorem ipsum...</a>
// content name   = Unknown
// content piece  = Unknown
// content target = https://www.example.com

Falls kein Inhaltsname, kein Inhaltsteil und kein Titel festgelegt ist, wird standardmäßig „Unbekannt“ verwendet. Um einen sinnvollen Inhaltsnamen zu erhalten, solltest Du entweder das data-content-nameoder ein titleAttribut setzen.

<a href="https://www.example.com" data-track-content title="Block Title">
    <span title="Inner Title" data-content-piece>Lorem ipsum...</span>
</a>
// content name   = Block Title
// content piece  = Unknown
// content target = https://www.example.com

Falls kein Inhaltsname und kein Inhaltsteil vorhanden ist, greifen wir auf das titleAttribut des Inhaltsblocks zurück. Das titleAttribut des Block-Elements hat in diesem Beispiel Vorrang vor dem Stück-Element.

Wie erkennen wir das Inhaltszielelement?

Das Inhaltszielelement wird verwendet, um eine URL zu finden, da dieses Element normalerweise ein Link oder eine Schaltfläche ist. Wir erkennen das Zielelement entweder durch das Attribut data-content-targetoder durch die Klasse .matomoContentTarget. Wenn kein solches Element gefunden werden kann, greifen wir auf das Inhaltsblockelement zurück.

Wie erkennen wir das Inhaltsziel?

• Idealerweise stellst Du ein HTML-Attribut data-content-targetmit einem Wert an einer beliebigen Stelle innerhalb eines Inhaltsblocks oder im Inhaltsblockelement selbst bereit .
• Wenn kein solches Element vorhanden ist, suchen wir nach einem hrefAttribut im Zielelement
• Wenn kein solches Attribut vorhanden ist, verwenden wir eine leere Zeichenfolge „“

Beispiele:

<a href="https://www.example.com" data-track-content>Klick mich</a>
// content name   = Unknown
// content piece  = Unknown
// content target = "https://www.example.com"

Da kein bestimmtes Zielelement festgelegt ist, lesen wir das hrefAttribut des Inhaltsblocks.

<a onclick="location.href='https://www.example.com'" data-content-target="http://www.example.com" data-track-content>Click me</a>
// content name   = Unknown
// content piece  = Unknown
// content target = "https://www.example.com"

Es hrefwird kein Attribut gesetzt, da der Link über JavaScript ausgeführt wird. Daher muss ein data-content-targetAttribut mit einem Wert angegeben werden.

<div data-track-content><input type="submit"/></div>
// content name   = Unknown
// content piece  = Unknown
// content target = ""

Da es weder ein data-content-targetAttribut noch ein hrefAttribut gibt, können wir das Ziel nicht erkennen.

<div data-track-content>
    <input type="submit" data-content-target="https://www.example.com"/>
</div>
// content name   = Unknown
// content piece  = Unknown
// content target = "https://www.example.com"

Da das data-content-targetAttribut mit einem Wert festgelegt ist, können wir das Inhaltsziel erkennen.

<div data-track-content>
    <a href="https://www.example.com" class="psstatsContentTarget">Klick mich</a>
</div>
// content name   = Unknown
// content piece  = Unknown
// content target = "https://www.example.com"

Da das Zielelement ein hrefAttribut hat, können wir das Inhaltsziel automatisch erkennen.

Alles zusammenfügen

<a href="https://ad.example.com" data-track-content>
    <img src="https://www.example.com/path/xyz.jpg" data-content-piece />
</a>
// content name   = /path/xyz.jpg
// content piece  = https://www.example.com/path/xyz.jpg
// content target = https://ad.example.com

Ein typisches Beispiel für einen Inhaltsblock, der eine Bannerwerbung anzeigt.

<a href="https://ad.example.com" data-track-content data-content-name="My Ad">
    Lorem ipsum....
</a>
// content name   = Meine Werbung
// content piece  = Unknown
// content target = https://ad.example.com

Ein typisches Beispiel für einen Inhaltsblock, der eine Textanzeige anzeigt.

<div data-track-content data-content-name="Meine Werbung">
    <img src="https://www.example.com/path/xyz.jpg" data-content-piece />
    <a href="/anylink" data-content-target>In den Warenkorb legen</a>
</div>
// content name   = Meine Werbung
// content piece  = https://www.example.com/path/xyz.jpg
// content target = /anylink

Ein typisches Beispiel für einen Inhaltsblock, der ein Bild – das ist der Inhaltsteil – und einen Call-to-Action-Link – der das Inhaltsziel ist – unten anzeigt. Wir würden das href=/anylinkdurch einen Link zur psstats.php Deiner PS Stats-Installation ersetzen, der den Benutzer wiederum zum eigentlichen Ziel umleitet, um die Interaktion tatsächlich zu verfolgen.

Wie debuggst / testest Du, ob alle Inhaltsblöcke richtig erkannt werden?

In PS Stats haben wir eine Methode logAllContentBlocksOnPagehinzugefügt, um alle gefundenen Inhaltsblöcke innerhalb einer Seite in der Konsole zu protokollieren. Es wird ein Array aller Inhaltsblöcke wie folgt in der Konsole protokollieren:

[{name: '...', target:'...', piece: "..."},...]

Um sie zu protokollieren, öffne einfach die Entwicklertools des verwendeten Browsers und rufe _paq.push(['logAllContentBlocksOnPage'])auf.

Inhaltsinteraktionen

Wie verfolgen wir eine Interaktion automatisch?

PS Stats verfolgt eine Interaktion automatisch, indem es Klicks auf das Zielelement abhört. Auf Mobilgeräten möchtest Du möglicherweise touchEreignisse verfolgen. In diesem Fall musst Du möglicherweise die automatische Verfolgung von Inhaltsinteraktionen deaktivieren, siehe unten.

Die Art und Weise, wie wir Interaktionen verfolgen, hängt von der Art des Links ab.

Links zur gleichen Domain

Falls wir ein Link-Element entdecken, das ein hrefAttribut zu derselben Domain wie die aktuelle Seite hat, ersetzen wir das hrefAttribut durch einen Link zur psstats.phpTracker-URL. Wenn ein Nutzer auf einen solchen psstats.phpLink klickt, leiten wir den Nutzer zunächst auf die Seite Deiner PS Stats-Installation und von dort auf die eigentliche Seite um. Dadurch wird sichergestellt, dass eine Interaktion auch dann verfolgt wird, wenn jemand die URL mit einem Rechtsklick öffnet.

Wenn sich die URL des ersetzten hrefAttributs zwischenzeitlich durch Deinen Code ändert, respektieren wir den neuen Link.

Hinweis: Die Referrer-Informationen gehen verloren, wenn Du von psstats.php auf Deine Seite umleiten. Wenn Du darauf angewiesen bist, musst Du das automatische Tracking einer Interaktion deaktivieren, siehe unten.

Outlinks und Downloads

Outlinks und Downloads werden wie bisher über XHR abgewickelt. Wenn ein Benutzer auf einen Download oder einen Outlink klickt, verfolgen wir diese Aktion wie gewohnt zusammen mit einigen Informationen zur Inhaltsinteraktion. Wenn das Link-Tracking nicht aktiviert ist, verfolgen wir Downloads mit derselben Domain über psstats.phpund alle anderen über XHR.

Die Verfolgung über XHR kann das Laden einer neuen Seite um einige hundert ms verzögern, da wir den Outlink verfolgen müssen, bevor wir den Benutzer auf die neue Seite verschieben.

Ankerlinks

Anker und alle anderen Arten von Links werden mit einem XHR verfolgt.

Wie verhindert man das automatische Tracking einer Interaktion?

Vielleicht möchtest Du nicht, dass wir jede Interaktion automatisch verfolgen, wie oben beschrieben. Dazu kannst Du entweder das Attribut data-content-ignoreinteractionoder die CSS-Klasse psstatsContentIgnoreInteractionauf das Inhaltszielelement setzen. Bei einer Einzelseitenanwendung musst Du möglicherweise die automatische Verfolgung einer Interaktion deaktivieren, da ansonsten ein Neuladen der Seite und eine Weiterleitung erfolgen würde.

Beispiele

<a href="https://outlink.example.com" class="psstatsTrackContent psstatsContentIgnoreInteraction">In den Warenkorb legen</a>
//
<div data-track-content>
    <a href="https://outlink.example.com" data-content-target data-content-ignoreinteraction>In den Warenkorb legen</a>
</div>

In allen Beispielen würden wir die Impression automatisch verfolgen, aber nicht die Interaktion.

FAQ

Wie kann ich dynamisch geladene Elemente verfolgen?

Du hast alle Inhaltsblöcke beim Seitenladen mit trackContentImpressionoder trackVisibleContentImpressions initialisiert. Jetzt füge dem DOM weitere HTML-Elemente hinzu, zum Beispiel ein neues Banner, und möchtest sicherstellen, dass sowohl eine Impression als auch eine Interaktion, wenn ein Benutzer damit interagiert, erfasst werden.

Rufe _paq.push(['trackContentImpressionsWithinNode', domNode]);an, um sicherzustellen, dass eine Impression für alle darin enthaltenen Inhaltsblöcke erfasst wird domNode. Eine Interaktion wird automatisch nachverfolgt, sobald der Benutzer mit einem Inhaltsblock interagiert.

Weitere Informationen zum programmatischen Verfolgen von Inhaltsimpressionen findest Du im Handbuch zum JavaScript-Tracking .

Was kann ich tun, wenn eine Impression automatisch erfasst wird, aber keine Interaktion?

Sicherlich fragst Du Dich, warum die Interaktion nicht automatisch getrackt wird. Dafür kann es viele Gründe geben. Zum Beispiel, wenn der Zielknoten nicht wirklich anklickbar ist oder wenn bereits ein Klick-Listener für dieses Element vorhanden ist, der das Ereignis stoppt.

Wenn die Interaktion aus irgendeinem Grund nicht automatisch verfolgt wird, kannst Du sie manuell auslösen, indem Du _paq.push(['trackContentInteractionNode', domNode, typeOfInteraction])aufrufst.

Beispiel:

formElement.addEventListener('submit', function () {
    _paq.push(['trackContentInteractionNode', this, 'submittedForm']);
});

Dadurch wird eine Interaktion mit dem Namen verfolgt, submittedFormsobald der Benutzer ein Formular abschickt. Beachte, dass dies nur funktioniert, wenn sich die übergebene domNodetatsächlich in einem Inhaltsblock befindet.

Weitere Informationen zum manuellen Verfolgen von Inhaltsinteraktionen findest Du im Handbuch zum JavaScript-Tracking .