Ich habe bereits mehrfach diese Frage und Bitte um Unterstützung im Forum von Ui-Kit und bei YooTheme-Pagebuilder und in einem JS-Forum gestellt, aber keine Antworten erhalten. Im Matomo-Forum erhielt ich so weit eine Antwort, dass wenigstens die unten beschrieben Funktion, das Öffnen der Lightbox, als OnClick-Event getrackt wird. Ist ja auch klar, denn die sind auf Matomo spezialisiert und nicht auf Ui-Kit.
Auf meiner Joomla-Website verwende ich das Ui-Kit. Es stellt zahlreiche Standard-Funktionen typischer Websites bereit, so auch u.a. eine Lightbox-Funktion. Ich verwende die Lightbox, um darin Videos abzuspielen. Das Video startet automatisch, sobald es in die Lightbox geladen wird und das Abspielen wird automatisch beendet, sobald die Lightbox geschlossen wird. Die Lightbox schließt sich entweder durch Klick auf einen Close-Button in der Lightbox oder einen Klick in die Umgebung der Lightbox.
Ich möchte nun den Start des Videos und dessen Beendigung (incl. evtl. vorzeitiger Beendigung) als Events erfassen, um damit das Abspielen des Videos in Matomo zu tracken. Da bei Verwendung der Klasse uk-lightbox kein Video-Tag gesetzt wird, sondern anscheinend "intern" alles per JS veranlasst wird, kann ich nicht auf events wie video playing, pause, ended triggern. Da mich "Pause" nicht interessiert, kann ich die Sache vereinfachen und einfach nur den Start des "div" mit der Lightbox durch "onclick" registrieren. Mit Hilfe von jemandem aus dem Matomo-Forum, habe ich das nun hinbekommen.
Nun fehlt aber natürlich die Funktion, dass das Beenden des Videos durch Schließen der Lightbox ebenfalls erfasst werden soll. Da weiß ich nicht, wo und wie ich das "onclick" platzieren muss. Und Ihr merkt schon, ich habe von Events, JavaScript und ähnlichem fast keine Ahnung!
Hier erst mal der Code, der das Öffnen der Lightbox (durch das ja das Video dann automatisch startet) registriert wird:
<div uk-lightbox="animation: fade" video-autoplay="" onclick="matomoeventtracking('video', 'playing', 'Video: über mich und meine Angebote');"><a href="images/video/therapie/praxis-gesamt-interview.mp4" title="Video: Über mich und meine Therapie-Angebote"> <img src="images/grafik/play-circle-white-150.png" alt="" /> </a></div>
Demnach müsste irgendwo vermutlich dieser Codeschnippsel eingebaut werden:
Aber wo ist der zugehörige div-container in den ich das einfügen muss? Und an welcher Stelle?
Ich habe versucht, dies mit Hilfe des Inspectors in Firefox heraus zu finden. Ich dachte, wenn ein Click irgendwo außerhalb der Lightbox bereits diese schließen wird, dann müsste einfach nur jeder beliebige Klick in dieser Region als onclick- Event registriert werden. Aber da gibt es derart viele Möglichkeiten, weil die div-Containerstruktur so verschachtelt ist, dass ich keine geeignete Stelle finde. Zumal offensichtlich vieles durch Javascript in das Website-HTML eingefügt wird und ich da nirgendwo etwas statisch "einfügen" kann.
Diese Website ist gerade im Entstehen und beinhaltet auf dieser Webseite eine Lightbox mit Video, das bereits den o.g. Tracking-Code beinhaltet, sodass das Öffnen der Lightbox durch Matomo registriert wird:
Aber wie registriere ich nun das Schließen der Lightbox?