Ui-Kit-Lightbox: wie kann ich das Schließen der Lightbox erfassen? (event listener onclick)

    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:

    Code
    <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:

    Code
    onclick="matomoeventtracking('video', 'playing', 'Video: über mich und meine Angebote')

    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?

    Es tut mir Leid, dass ich den Code oben so unübersichtlich reinkopiert habe. Hier also mal in übersichtlicherer Form:

    Code
    <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>

    Danke für den Hinweis. Aber von dort komme ich ja gerade! GetUI-Kit.com wird von YooTheme.com betrieben und ich nutze ja deren Pagebuilder. YooTheme hat auch ein Support-Forum. Genau dort hatte ich bereits zwei Mal angefragt, aber man sieht sich hierfür als "nicht zuständig". Und eigentlich möchte man dort nur Hilfe leisten, wenn es wirklich ein Problem mit deren Komponenten gibt und nichts darüber hinaus!

    Muss jetzt doch noch mal nachfragen, denn die Frage ging ja weniger um Ui-Kit, sondern darum, wie ich zuverlässig das Schließen einer Lightbox per KLick als Event erfassen kann.

    Die ganze restliche Schilderung, wo / wie ich das verwenden will, dient ja nur dem besseren Verständnis anhand eines konkreten Anwendungsfalls.

    Steht doch eigentlich alles oben in dem Beispiel beschrieben. Aber hier halt noch mal, ganz ohne Erwähnung von Ui-Kit:


    Über einen Link, der keinen Video-Tag oder ähnliches, was mit event / onclick versehen werden kann, wird eine Lightbox geöffnet, die sich über die ganze Webseite ausdehnt. Es wird kein Iframe in der Lightbox geöffnet / dargestellt.


    Das Öffnen der Lightbox über Anklicken des Link kann ich mittels event / onclick erfassen. Aber wo kann der Klick erfasst werden, mit dem der Besucher die Lightbox wieder schließt? Das ist nämlich oft nicht der "Schließen-Button", sondern ein Klick irgendwo rings um den Inhalt der Lightbox herum.


    Das HTML, das die Lightbox repräsentiert, wird ja erst nach dem ersten Klick erzeugt. Es ist also nicht schon vor Öffnen der Lightbox verfügbar, sodass ich daher nicht weiß, wo ich denn "onclick=..." einfügen kann.

    Onclick findet in der gesamten Ebene statt, über die der Inhalt der Lightbox liegt. Und die ist sehr wohl durch einen oder gar mehrere div container definiert. Aber in die Definition dieser Container kann ich nichts per HTML reinschreiben wie z.B. onclick="....." weil diese Container anscheinend durch die Funktion "lightbox" erzeugt werden.

    Zitat von Clemens-XS

    Steht doch eigentlich alles oben in dem Beispiel beschrieben.

    Ja, sorry. Habe ich nicht gelesen.


    Zitat von Clemens-XS

    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.

    Das habe immer noch nicht verstanden.

    Ich nutze auch Matomo nicht.

    Aber es gibt bestimmt noch Supporter, die hier helfen können..


    Schönen Rest-Sonntag.

    Zitat

    Das habe immer noch nicht verstanden.

    Mit einem Klick veranlasse ich, dass sich eine Lightbox öffnet. Diesen Klick registriere ich über onclick="...."


    Wenn die Lightbox geöffnet ist, kann ich sie schließen, indem ich entweder auf den Schließen-Button oder auf irgendeinen Bereich der Webseite klicke, in dem der Inhalt der Lightbox nicht gezeigt wird. Diesen Klick zum Schließen der Lightbox möchte ich nun ebenfalls durch onclick="...." registrieren können.


    Registrieren heißt hier für mich, dass ich bei "onclick" bestimmte Daten an Matomo sende. Aber das ist auch Wumpe, ich könnte damit auch Daten nach China oder die NSA senden! :)

    DAs Event kann also innerhalb und außerhalb der Light-Box erfolgen, wenn ich dich richtig verstehe. Dann hilft ein auf die Light-Box beschränktes onclick wahrscheinlich nicht. Ggf. wäre ein onclose-event bei der Light-Box das richtige.

    Beim tracken immer Datenschutzerklärung im Auge haben.

    Zitat von Clemens-XS

    ging ja weniger um Ui-Kit

    Na ja, halt doch, weil da ja das JavaScript herkommt. Niemand kann wissen, was UI-Kit alles mit dem Container anstellt (wenn man es nicht bis in's tiefste Detail kennt). Vielleicht sind Inline-JavaScripts eh verboten auf deiner Seite und/oder wird vielleicht mit einem preventDefault "aufgefressen".


    Jedenfalls solltest du erst mal probieren mit einem

    Code
    onclick="alert('hallo');"

    was so rauskommt, je nachdem, wo du es reintust. Vielleicht auch mal direkt aufs Bild und/oder einen umgebenden Container.

    onclose="...." ist sicher eine gute Idee. Aber wo im HTML setze ich das hin? Ich habe den Eindruck, dass das HTML, in den ich onclose="..." setzen will, dynamisch generiert wird.


    Vielleicht ist es doch hilfreich, wenn ich meine Website nenne, auf der solch eine Lightbox mit Video eingesetzt ist. Es ist schon auf der Homepage zu sehen.


    Mit dem Inspector des Browsers ist leicht erkennbar, wie der Link zum Start der Lightbox aufgebaut ist einschließlich des Tracking "onclick="...."


    Und wenn ich mit dem Inspector auf den Bereich der geöffneten Lightbox gehe, in dem der Klick zum Schließen funktioniert, dann kann ich nirgends einen Ansatz dafür erkennen, wo ich das "onclose="...." im HTML hinsetzen sollte.

    Was jetzt mit onclose? ;)


    Meine Testzeile kannst, wie geschrieben mal von außen nach innen in den einzelnen Elementen ausprobieren, ob denn überhaupt ein 'hallo' angezeigt wird. Weil, wenn du auf eine Bild klickst, das in einem DIV liegt, wird das DIV natürlich auch geklickt.


    Klar kannst das auch mit onclose probieren ;)


    JavaScript-Frameworks sind, wie oben angedeutet, komplizierter als reines selbst geklöppeltes, weil es sich gegen dieses oder jenes abschottet.

    Hab ich jetzt an verschiedenen Stellen versucht, das onclick="alert..." einzufügen, aber ohne Erfolg. Entweder zeigt es sich noch bevor das Video zu spielen beginnt oder gar nicht. Danach habe ich es sofort mit dem Matomo-Code versucht, da ich dann sofort in den Netzwerkprotokollen den Aufruf zu Matomo sehen könnte. Aber nix da!


    Das ist das HTML dazu:

    Ich glaube mittlerweile, das krieg ich auf diese Weise nicht hin.

    Wenn die Lightbox geöffnet ist, sehe ich mit dem Inspector einen container mit der Klasse html.uk-lightbox-page. Darin befindet sich der Container mit der ID und Klasse:

    Code
    ul id="uk-lightbox-panel-*** uk-lightbox-items

    Und an dritter Stelle sehe ich darin einen Container mit den Klassen uk-active uk-transition-active

    Vielleicht kann ich in der custom.css eine dieser Klassen oder die ID mit dem event "onclose" irgendwie verknüpfen? Besonders die ID könnte dazu geeignet sein, denn die ID erhält eine von einem Script eingefügte Kennung, wo ich die Sternchen hingesetzt habe.



    Als Alternative könnte ich statt der Lightbox die Modalbox von YooTheme bzw. Ui-Kit verwenden, weil dort das Video Tag verwendet wird und dieses einfacher zu tracken ist. Die Modalbox hat aber Probleme mit der automatischen Größenanpassung der Videos an Höhe und Breite des Bildschirms, sodass das ausscheidet. Die Nachteile sind zu groß gegenüber dem Vorteil, feststellen zu können, wie viel von dem Video angeschaut worden ist.



    Betr. der rechtlichen Tracking-Problematik sehe ich keine Probleme, da ich alle Daten ohne Cookies erfasse und diese sämtlich noch vor der Ablage in der Datenbank von Matomo anonymisiert werden. Und damit sind es keine personenbezogenen Daten im Rechtssinne des TTDSG (= Telekommunikations- und Telemedien-Datenschutz-Gesetz) und auch nicht im Sinne der DSGVO mehr. Zusätzlich habe ich ein berechtigtes Interesse im Sinne des Besuchers, die Website technisch ständig zu optimieren und die Inhalte gemäß der sich zeigenden Interessen zu optimieren. Und als Luxux biete ich demnächst noch ein OptOut an.

    Danke für deinen Tipp. Ja mit der Modalbox würde es wahrscheinlich schon deshalb einfacher, weil dort im Link das Video-Tag genutzt wird. Aber die Modalbox hat erhebliche Probleme mit der automatischen Anpassung der Abmessungen an die Screen-Abmessungen. Und relative Abmessungen können nicht im Link übergeben werden wie z.B. Prozentwerte oder vw-Werte.


    Das hat die UK-Lightbox aber bereits per Script integriert. Nur wenn Iframes in die Lightbox geladen werden sollen, dann hat man dort das gleiche Problem.


    Die Idee, sich in die bereits von UiKit genutzten events "reinzuhängen" hatte ich auch schon, weiß aber nicht, wie das zu machen geht. (Wie gesagt, von JS usw. habe ich keine Ahnung und habe auch keine Zeit, mich dort einzuarbeiten.


    Wenn ich in der o.g. Webseite in die geöffnete Lightbox mit dem Inspector rein gehe, sehe ich mehrere events. Wie könnte ich mich da "reinhängen"?