3.5 Mediaelement Click mit Google tracken

[pipkin]

Hallo zusammen,

ich möchte die Klicks auf ein Audio-File tracken, das ich mit dem Mediaelement einbinde.

Am Ende muss ich sowas einbinden:
onclick="gtag('event', 'Klick auf Audiodatei', {'parameter': 'value'});"

Steh auf dem Schlauch... muss ich dafür das Javasript (mediaelement-and-player.min.js) aufbohren oder gibt es da einen besseren Weg..?

Danke für Eure Anregungen....

[Kahmoon]

j_mediaelement.html5 im Ordner /templates ist das Template das du bearbeiten musst. Niemals! Core Dateien!


Ich habe das damals für die Clicks auf einen Bildslider gemacht. Eventuell kannst du das adaptieren.

Hier wird nach Sliderelementen li (cameraslideshow) gesucht und ein onclick Event hinzugefügt. Das müsste für Bilder auch gehen.

<script type="text/javascript">
$( document ).ready(function() {
    if ( $(".camera_pag_ul").length) {
        $('.camera_pag_ul li').each(function(){
            $(this).click(function(){
                ga('send', 'event', $(location).attr('pathname'), 'Slideshow', 'Bildslider-Buttons');
            });
        });
    }
});
</script>

Alternativ kannst du dir auch ein eigenes js_xxxx.html Template erstellen und dort die Elemente abfragen und mit onclick Events versehen. Das wäre vermutlich die sauberere Lösung.

Aber nicht vergessen das neue Template im Layout auszuwählen!

[pipkin]

Vielen Dank.

Ich hätte natürlich eh ein eigenes Template j_mediaelement.html5 erstellt. Darin wird ja das Javascript mediaelement-and-player.min.js geladen, das ich, falls eine Modifikation nötig gewesen wäre, in meinen files abgespeichert hätte.

Tricky ist, dass ich ja nur den Klick auf "play" tracken will. Nicht auf "Pause" oder auf eine andere Funktion innerhalb des Players. (Und optimalerweise auch nicht auf einen zweiten Klick auf Play, aber das ist schon sehr viel gewollt, nehm ich an..)
Das Element bleibt bei play/ pause allerdings ein button-Element.

Aber ich seh schon, das ist zu hoch für mich... Ich hab von Javascript leider zu wenig Ahnung.

[Kahmoon]

Wenn du ein eigenes Template erstellst, darf es nicht den Namen von einem default Template haben. Damit würdest du es überschreiben.

[pipkin]

Huch?
Ich benenne sie eigentlich immer um, schon für die Übersichtlichkeit. Aber da die eigenen Templates im Verzeichnis /templates abgespeichert werden, also nicht dort, wo das Original liegt, dachte ich bisher, das wäre auch gar kein Problem... Contao "guckt" doch zuerst in dem Verzeichnis, ob es ein entsprechendes Template gibt, und nutzt nur dann das Original, wenn es keins gibt - oder hab ich da etwas völlig falsch verstanden?

[Kahmoon]

Ja, aber würdest du ein j_mediaelement.html5 verwenden und dort komplett neuen Code schreiben, kann es sein das du damit die Grundfunktionen (die ja sonst im j_medialement.html5 wäre) nicht mehr da ist.

[pipkin]

Achso meinst Du das!
Eine eigene neue Funktion würde ich eh woanders integrieren, da bieten sich ja verschiedene Möglichkeiten. Das wäre auch nicht das Problem. Das Problem ist, dass ich nicht weiß, wie ich das Element ansprechen soll. "Button" hat keine ID oder Klasse, und ist gleichsam Playbutton und Pausebutton.

Ich müsste ihm erstmal per Script dem "button" eine Klasse, z.B. "playbutton-ersterklick" adden, die sich dann per Klick dann ändert ("hat-sich-erledigt-button").
onclick auf "playbutton-ersterklick" könnte ich dann die Trackingfunktion ausführen. Hmmm. Ich denke vermutlich viel zu umständlich.

[JamesdK]

Hast du dir schon mal den Google Tag Manager angesehen? Damit kannst du unabhängig von einem eigenen Skript in deiner Seite (den GTM musst du natürlich einbinden, über den GTM dann dein Analytics) per passendem Selektor einen Trigger setzen, der etwas an dein Analytics-Script übergibt.
https://www.seo-kueche.de/blog/googl...er-einrichten/
https://blog.bloofusion.de/google-ta...cking-anlegen/