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.
Begriff | Zweck |
---|---|
Inhaltsblock | Ist ein Container, der aus einem Inhaltsnamen, einem Stück und einem Ziel besteht. |
Inhaltsname | Ein Name, der einen Inhaltsblock darstellt. Der Name wird in Berichten angezeigt. Ein Name kann zu verschiedenen Inhaltsteilen gehören. |
Inhaltsteil | Dies ist der eigentliche Inhalt, der angezeigt wurde, z. B. ein Pfad zu einer Video-/Bild-/Audiodatei, ein Text, … |
Inhaltsziel | Zum Beispiel die URL einer Zielseite, zu der der Benutzer nach der Interaktion mit dem Inhaltsblock geführt wurde. In einer einseitigen Website kann es auch der Name eines Ankers sein. In einer mobilen App könnte dies der Name des Bildschirms sein, den Sie öffnen möchten. |
Inhaltseindruck | Jeder Inhaltsblock, der auf einer Seite angezeigt wurde, z. B. ein Banner oder eine Anzeige. Optional können Sie Matomo (ehemals Piwik) anweisen, nur Impressionen für sichtbare Inhaltsblöcke zu verfolgen. |
Inhaltsinteraktion | Eine Interaktion findet statt, wenn ein Besucher mit einem Inhaltsblock interagiert. Dies bedeutet normalerweise ein „Klick“ auf ein Banner oder eine Anzeige, es kann sich jedoch um eine beliebige Interaktion handeln. |
Inhalt-Interaktionsrate | Das Verhältnis von Inhaltsimpressionen zu Interaktionen. Zum Beispiel wurde eine Anzeige 100 Mal geschaltet und es gab 2 Interaktionen mit einer Rate von 2%. |
Du kannst Inhalt-Impressionen und -Interaktionen vollständig programmatisch nachverfolgen. Sieh Dir dazu die Methoden trackContentImpression
undtrackContentInteraction
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.
Anstatt den Inhalt programmgesteuert mit der JavaScript-API zu verfolgen, kannst Du HTML-Attribute in Deiner Webseite verwenden.
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: trackAllContentImpressions
undtrackVisibleContentImpressions
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']);
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:
Wähler | Beschreibung |
---|---|
[data-track-content] oder .psstatsTrackContent |
Definiert einen Inhaltsblock |
[data-content-name=""] |
Definiert den Namen des Inhaltsblocks |
[data-content-piece=""] oder .psstatsContentPiece |
Definiert den Inhaltsteil |
[data-content-target=""] oder .psstatsContentTarget |
Definiert das Inhaltsziel |
[data-content-ignoreinteraction] oder .psstatsContentIgnoreInteraction |
Erklärt, die Interaktion nicht automatisch zu verfolgen |
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 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 href
Attribut eines Links, den Inhalt aus einem src
Attribut eines Bildes und den Namen aus einem title
Attribut 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.
<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 href
Attributs erkannt , das normalerweise als ok angesehen wird.
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-content
oder die CSS-Klasse psstatsTrackContent
verwenden. 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 src
Attribut des Bildes. Das Inhaltsziel kann nicht erkannt werden, da ein Bild kein href
Attribut definiert. PS Stats verfolgt eine Interaktion automatisch, sobald ein Besucher auf das Bild klickt.
data-content-piece="foo"
mit einem Wert an einer beliebigen Stelle im Inhaltsblock oder im Inhaltsblockelement selbst bereitzustellen .data-content-piece
oder 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.data-content-piece
Attribut 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 a
Element gesetzt haben. Dazu später mehr. Das data-content-piece
Attribut kann auf jedes Element gesetzt werden, sogar im a
Element.
<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 src
Attributs 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-piece
Attribut definieren und ihm einen Wert setzen. Wir verwenden den Text dieses Elements nicht, weil
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
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“.
data-content-name
an einer beliebigen Stelle innerhalb eines Inhaltsblocks oder im Inhaltsblockelement selbst mit einem Wert zu versehen.title
Attribut im Inhaltsblockelement.title
Attribut im Inhaltselement-Element.title
Attribut im Inhaltszielelement.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-name
Attribut.
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-name
Attribut ü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-name
oder ein title
Attribut 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 title
Attribut des Inhaltsblocks zurück. Das title
Attribut des Block-Elements hat in diesem Beispiel Vorrang vor dem Stück-Element.
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-target
oder durch die Klasse .matomoContentTarget
. Wenn kein solches Element gefunden werden kann, greifen wir auf das Inhaltsblockelement zurück.
data-content-target
mit einem Wert an einer beliebigen Stelle innerhalb eines Inhaltsblocks oder im Inhaltsblockelement selbst bereit .href
Attribut im ZielelementBeispiele:
<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 href
Attribut 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 href
wird kein Attribut gesetzt, da der Link über JavaScript ausgeführt wird. Daher muss ein data-content-target
Attribut 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-target
Attribut noch ein href
Attribut 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-target
Attribut 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 href
Attribut hat, können wir das Inhaltsziel automatisch erkennen.
<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=/anylink
durch 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.
In PS Stats haben wir eine Methode logAllContentBlocksOnPage
hinzugefü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.
PS Stats verfolgt eine Interaktion automatisch, indem es Klicks auf das Zielelement abhört. Auf Mobilgeräten möchtest Du möglicherweise touch
Ereignisse 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.
Falls wir ein Link-Element entdecken, das ein href
Attribut zu derselben Domain wie die aktuelle Seite hat, ersetzen wir das href
Attribut durch einen Link zur psstats.php
Tracker-URL. Wenn ein Nutzer auf einen solchen psstats.php
Link 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 href
Attributs 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 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.php
und 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.
Anker und alle anderen Arten von Links werden mit einem XHR verfolgt.
Vielleicht möchtest Du nicht, dass wir jede Interaktion automatisch verfolgen, wie oben beschrieben. Dazu kannst Du entweder das Attribut data-content-ignoreinteraction
oder die CSS-Klasse psstatsContentIgnoreInteraction
auf 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.
Du hast alle Inhaltsblöcke beim Seitenladen mit trackContentImpression
oder 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 .
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, submittedForm
sobald der Benutzer ein Formular abschickt. Beachte, dass dies nur funktioniert, wenn sich die übergebene domNode
tatsächlich in einem Inhaltsblock befindet.
Weitere Informationen zum manuellen Verfolgen von Inhaltsinteraktionen findest Du im Handbuch zum JavaScript-Tracking .
Tags: Content, Entwickler, Inhaltsverfolgung, PS Stats, Tracking
Übergeordnet: PS Stats Entwickler-Handbuch