Wie kann ich Videos und Audios, die in einer Lightbox abgespielt werden, tracken?

Mit Interesse habe ich zwar diesen alten Beitrag im Forum gelesen: Wie kann ich Videos und mp3 tracken lassen?
Aber die Lösungen dort benötige ich nicht. Denn ich lade grundsätzlich Videos und Audios von meiner eigenen Website. Zudem zeige ich die immer in einer Lightbox. Diese Lightbox wird immer in Verbindung mit bestimmten CSS-Klassen sowie in Verbindung mit dem video-tag und dem audio-tag gestartet. Das Audio bzw. Video startet dann automatisch in der Lightbox. Aber nicht jede Lightbox mit diesen Klassen hat auch diese Tags, sodass dort anderer Inhalt gezeigt wird.

Nachdem ich nun lange genug versucht habe, aus der riesigen Matomo-Developer-Lektüre den passenden Code zu finden, muss ich nun aufgeben und hier fragen:

Ich möchte, dass Matomo das Öffnen der Lightbox trackt und wann diese wieder geschlossen wird. Dies dürfte einfacher sein, als wenn man auch genau erfassen will, wie lange das Audio / Video abgespielt wurde, wann es angehalten wurde usw. Denn ich gehe davon aus, dass der Besucher, wenn er das Abspielen beenden will, die Lightbox wieder schließt. Und das Abspielen pausieren… wer macht das schon?

Frage also: Wie müsste der ergänzende Code im Tracking-Script der Website aussehen, damit die Events Lightbox mit Audio- / Video-Tag geöffnet sowie Lightbox mit Audio- / Video-Tag geschlossen von Matomo zuverlässig getrackt werden?

Am einfachsten ist es das Klicken des Play-Buttons im Videoplayer zu tracken. Das würde eine Statistik ergeben, wie oft ein Video gestartet wurde. Ob das auch bei autoplay funktioniert müsste getestet werden.

Das Tracken des Öffnens der Lightbox ist zu grob.

Es wird dazu Event Tracking benötigt.
Dazu speicherst du diese JavaScript Funktion unterhalb deines Matomo Tracking Codes:

function matomoeventtracking(category, action, name) {
	_paq.push(['trackEvent', category, action, name]);
}

und speicherst diesen OnPlay-Event in den HTML Video-Tag oder Audio-Tag:

<video controls onplay="matomoeventtracking('video', 'playing', 'videoname-mov-bbb');">
  <source src="videoname-mov-bbb.mp4" type="video/mp4">
  <source src="videoname-mov-bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Die Statistik ist dann unter Verhalten → Ereignisse zu finden.

Hier die Anleitung zum OnPlay-Event und unten weitere dieser On-*-Events. Vielleicht passt ja ein anderer besser.

Ansonsten: Wenn alle Mausbewegungen und Mausaktionen sowie Tastatur-Aktionen und Finger-Touch-Aktionen getrackt werden würden, würdest du dich wundern zu was die Besucher alles in der Lage sind anzustellen. Nicht nur ein simples Pause-Klicken.

Ich danke dir herzlich für deine ausführliche Antwort. Leider kann ich dein Codebeispiel für meine Links schlecht verwenden, da ich nicht mit src=“…” arbeite, sondern mit a href=“…”
In meiner Webseite sieht das HTML dann so aus:

<div uk-lightbox="animation: fade" video-autoplay>
    <a href="images/video/mein-tolles-video.mp4" title="Video: mein tolles Video">
        <img src="images/grafik/play_circle_white_72px.png" alt=""/>
    </a>
</div>

Als Videoplayer wird der HTML-5 Player des Browsers verwendet.

Wenn ich deinen Code richtig verstehe, wird der Start des Videos getrackt, nicht aber das Ende des Abspielens. Das aber ist das für mich Entscheidende, weil beim Standard-Tracking ja bereits der Klick auf die Lightbox mit dem Video als “Download” des Videos in Matomo getrackt wird. Dadurch weiß ich ja nur, dass jemand angefangen hat, das Video anzusehen, nicht aber, wie lange er geschaut hat. Genau diese Erfolgskontrolle benötige ich aber.
Vom fehlenden Tracking des Abspiel-Endes abgesehen… könnte das Tracking des Starts denn so funktionieren?

<div uk-lightbox="animation: fade" video-autoplay onplay="matomoeventtracking('video', 'playing', 'mein-tolles-video');">
    <a href="images/video/mein-tolles-video.mp4" title="Video: mein tolles Video">
        <img src="images/grafik/play_circle_white_72px.png" alt=""/>
    </a>
</div>

Wenn ja, fehlt nur noch das Tracking der Beendigung des Abspielens. Das Anhalten auf Pause interessiert mich nicht, da die Besucher in der Regel statt Pause eher das ganze Abspielen abbrechen.

Nebenbei: Und ja, ich weiß, dass es ein Media-Tracking-PlugIn gibt. Es kostet pro Jahr so viel, wie der Betrieb meiner drei Websites mit Nextcloud und Matomo incl. Serverkosten pro Jahr. Und das würde ja dann drei mal anfallen für jede Website. Natürlich soll der Programmierer sein Geld bekommen. Aber ich muss es mir auch leisten können! Und deshalb benötige ich diesen Codeschnippsel hier.

Überlege mal selbst. Wo soll denn der Tracking Code in dem Browser-Fenster/Tab eingefügt werden, in dem das Video abgespiel wird? Das ist nicht möglich, weil dort NUR die Videodatei und sonst kein weiteres HTML von dir angezeigt wird.

Beispiel (Firefox):
öffnen: https://www.w3schools.com/tags/movie.mp4
Quelltext:

<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height;">
<link rel="stylesheet" href="resource://content-accessible/TopLevelVideoDocument.css">
<script type="text/javascript" src="chrome://global/content/TopLevelVideoDocument.js"></script>
<title>movie.mp4</title>
</head>
<body>
<video autoplay="" controls="">
</video>
</body>
</html>

So kannst du nur den Klick auf den Link tracken, was - wie du schreibst - eh schon als Download getrackt wird.

Du müsstest das Video in einem eigenen HTML-Document anzeigen und in diesem dann den Matomo-Tracking-Code einbinden plus dem OnPlay und OnEnded und sonstigen On-Events.

Oh danke, ja das macht Sinn, das geht nicht. Aber meine Idee war ja auch, den Klick auf den Link zum Öffnen einer Lightbox auszuwerten, in dem ein video tag oder audio tag steht. Denn dann weiß ich ja, dass dadurch die Lightbox öffnet und das Medium abgespielt wird.
Nun möchte ich tracken, wann das Abspielen beendet wird. Und dazu reicht doch die Auswertung, wenn die Lightbox wieder geschlossen wird. Denn damit endet auch der Abspielvorgang automatisch.
Die Lightbox bedeckt die ganze Website und kann durch Klick auf ein “Schließen-X” oder durch einen Klick in den Rand um die Lightbox herum geschlossen werden. Bevor die nicht geschlossen ist, kann kein anderes Element auf der Webseite durch Klick usw. erreicht werden.

Siehst du dafür eine Möglichkeit?

Mit Lightbox im selben Browser-Fenster/Tab ist das ja was ganz anderes, da dort der Matomo JavaScript-Code im HTML Document bereits vorhanden ist. Die Lightbox ist ja nur ein Teil davon. Dann können in dem Video-Tag in der Lightbox auch alle On-*-Events verwendet werden.

  • onplay
  • onplaying
  • onpause
  • onended

Siehe Link oben.

Das Tracken des öffnens und schließens der Lightbox sagt ja nichts über das Abspielen des Videos aus. Zumal manche eventuell ohne Play schließen oder mittendrin das gesamte Browser-Fenster/Tab schließen, was zum Abbruch des Trackings führt. Ein 100-prozentig sicheres Tracking gibt es nicht.

Du hast bedeutend mehr Erfahrung als ich, wenn es um solche Codeschnippsel geht. Ich danke dir für deine Anleitung, aber ich habe es nicht umsetzen können, sodass das Video korrekt getrackt wird.

Zunächst bin ich nicht sicher, ob ich das Event-Tracking korrekt in den Gesamt-Tracking-Code richtig eingefügt habe:

<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://matomo.meine-domaine.de/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
function matomoeventtracking(category, action, name) {
	_paq.push(['trackEvent', category, action, name]);
}
</script>
<noscript><p><img src="https://matomo.lebenslust-jetzt.de/matomo.php?idsite=1&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->

Und dann bin ich mir unsicher, wie ich den Code im HTML für die Lightbox korrekt einfüge:

<div uk-lightbox="animation: fade" video-autoplay onplay="matomoeventtracking('video', 'playing', 'mein-tolles-video');">
    <a href="images/video/mein-tolles-video.mp4" title="Video: mein tolles Video">
        <img src="images/grafik/play_circle_white_72px.png" alt=""/>
    </a>
</div>

Die Website gestalte ich mittels UiKit und die Funktion “Lightbox” wird durch die Klasse uk-lightbox ausgelöst. “video-autoplay” sorgt dafür, dass das Video sofort startet, sobald die Lightbox geöffnet und der Anfang des Videos dort hinein geladen ist.
Im obigen Code – falls er denn so funktionieren würde – würde nach meinem Verständnis aber nur der Start des Videos getrackt. Es sollte aber auch das Ende bzw. der Abbruch des Abspielens getrackt werden. Und es wäre Luxus, wenn auch eine Pause erfasst würde. Wie muss dann der Code aussehen, wenn alle drei Events getrackt werden sollen? Muss ich dann drei Mal ein Event in dem div container anlegen:

onplay="matomoeventtracking('video', 'playing', 'mein-tolles-video');
onpause="matomoeventtracking('video', 'pause', 'mein-tolles-video');
onended="matomoeventtracking('video', 'end', 'mein-tolles-video');

Da meine Versuche nicht funktioniert haben, könnte es sein, dass der Eventlistener gar nicht in den div conainer, sondern vor den Link zum VIdeo gehört, nämlich:

<div uk-lightbox="animation: fade" video-autoplay>
    <a onplay="matomoeventtracking('video', 'playing', 'mein-tolles-video'); href="images/video/mein-tolles-video.mp4" title="Video: mein tolles Video">
        <img src="images/grafik/play_circle_white_72px.png" alt=""/>
    </a>
</div>

Es sind schlichtweg zu viele Möglichkeiten, wo ich Fehler machen kann. Und ich verstehe nix davon, wie jeder hier sehen kann. :slight_smile:
Daher würde ich mich sehr freuen, wenn mir jemand meine Fragen hier beantwortet und am besten doch die benötigten Codeschnippsel zeigt. – Herzlichen Dank!

Wenn es im HTML Header eingefügt wird, dann passt das so.
Es muss im HTML-Document über dem Verwenden der Funktion stehen.
Also zuerst die Funktion programmieren, danach erst verwenden.
Aber ich denke da wird alles korrekt sein.

Das ist falsch, weil ein onplay-Event in einer DIV-Box nichts bringt, weil eine DIV-Box nichts “playt”. Da wäre allerhochstens ein onclick-Event angebracht, falls erwünscht.

Tja, da biste hier falsch mit deinen Fragen, weil das ist hier kein Forum für UiKit. Wenn die keinen Support haben, Pech gehabt.

Der onplay-Event muss in das HTML <video>-Tag. Nur dort ergibt er Sinn. Wie das mit UiKit zu schaffen ist - keine Ahnung.

Schön und gut. Aber all das muss in den HTML <video>-Tag. Ich schätze mal, dass der HTML <video>-Tag per JavaScript nach Klick auf die div-Box geladen wird. Also müssen die on*-Events in den UiKit-Code integriert werden.

Also von meiner Seite aus kann dir hier nicht weitergeholfen werden.

So müsste es im Endeffekt aussehen:

 <video width="320" height="240" controls onplay="matomoeventtracking('video', 'playing', 'mein-tolles-video');" onpause="matomoeventtracking('video', 'pause', 'mein-tolles-video');" onended="matomoeventtracking('video', 'end', 'mein-tolles-video');">
  <source src="movie.mp4" type="images/video/mein-tolles-video.mp4">
</video> 

Aus eigener Erfahrung:
Zuviele Daten tracken bringts nicht immer wirklich. Da müllt man sich nur die Matomo-Datenbank voll. Das Anklicken der div-Box zum starten der Lightbox sollte genügen:

<div uk-lightbox="animation: fade" video-autoplay onclick="matomoeventtracking('video', 'playing', 'mein-tolles-video');">
    <a href="images/video/mein-tolles-video.mp4" title="Video: mein tolles Video">
        <img src="images/grafik/play_circle_white_72px.png" alt=""/>
    </a>
</div>

Zusätzlich bei UiKit fragen, wie ein autoplay für die Videos aktiviert werden kann. Dann starten die Videos automatisch.

Ganz herzlichen Dank dir für deine detaillierte Hilfe. Sicher hast du mit deiner Kritik Recht, ich solle mich doch an das UiKit-Forum wenden. Was wollen wir wetten, dass die dann sagen werden, dass die Einbettung von Matomo-Tracking eine Sache für dieses Forum hier sei und nicht für deren? :slight_smile:

Übrigens habe ich noch kein echtes UiKIt-Forum gefunden. Es gibt eine Github-Community, aber dort hab ich noch nie eine Antwort erhalten. Eine Dokumentation von YooTheme speziell für die Anwendung von UiKit im Webdesign findet sich hier: https://getuikit.com/

Jedenfalls kann ich jetzt erst mal weiter versuchen. Wichtig ist ja eigentlich nur der Start und das Beenden des Videos. Der Start erfolgt immer mit Öffnen der Lightbox automatisch über den Zusatz video-autoplay in der Klasse uk-lightbox. Und das Beenden wird wohl fast immer durch Schließen der Lightbox erfolgen.
Ein Video-Tag ist nicht erforderlich und würde vermutlich stören, weil es bereits in der CSS oder in einem JS enthalten ist. Folglich kann ich den Link zum Video nicht als src=“…” einfügen, sondern nur als a href=“…”

Hätte ich einen Event-Listener für das Öffnen und Schließen der Lightbox, wäre die Sache möglicherweise einfacher, als durch Einfügen des Codes in die Link-Konstruktion zum Video.