Ich kann einfach keinen Button richtig tracken


#1

Hallo zusammen,

ich möchte auf einer Landingpage einfach wissen, ob jemand das enthaltene Video ansieht oder ob er einen der drei Button betätigt, um auf die Website zu kommen. Aber leider bekomme ich das nicht hin.

Ich habe folgenden Code in den Head-Bereich kopiert:

<script>
function trackingFunction() {
	_paq.push(['trackEvent', 'action', 'label', 'value']);
}
</script>

Beim Video habe ich »onplay=“trackingFunction()”« und bei den Buttons »onclick=“trackingFunction()”« bei den Attributen angeführt.
Matomo zeigt mir dann auch an, dass etwas passiert, aber leider nicht, was passiert, sondern nur »Ereignis - action - label - value«

Könnt Ihr mir erklären, wie und vor allem wo ich diese Ereignisse benenne, so dass ich diese unterscheiden kann? Leider komme ich mit der Anleitung zu Matomo überhaupt nicht klar, schon gar nicht auf englisch…

Danke und viele Grüße
doescher


(Lukas Winkler) #2

Hallo,

Das Programm macht genau, was du angibst: Es trackt ein Event mit der Aktion 'action', dem Label 'label' und dem Wert `‘value’. Wenn du gerne anstelle der fixen Texte dynamisch etwas tracken willst, musst du auch die Variable mit dem gewünschten Werts angeben.

Ich empfehle auch anstelle von onplay, “richtige” eventlistener zu verwenden.

So könnte zum Beispiel eine dynamische Funktion aussehen.

<video src="videofile.ogg" autoplay data-label="Das ist der Label" data-value="ein optionaler Wert">
    Test test
</video>

<button type="button">Test</button>
<button type="button" data-label="label" data-value="test">dsfdsfds</button>
<button type="button">fdgffdgdgd</button>

<script>
    [].forEach.call(
        document.querySelectorAll('video'),
        function (video) {
            video.addEventListener("play", function () {
                _paq.push(['trackEvent', 'Video startet', video.dataset.label, video.dataset.value]);
            });
        }
    );

    [].forEach.call(
        document.querySelectorAll('button'),
        function (button) {
            button.addEventListener("click", function () {
                _paq.push(['trackEvent', 'Button angeklickt', button.dataset.label, button.dataset.value]);
            });
        }
    );

</script>

Ich empfehle aber selbst die Funktionen anzupassen.

Wenn du kein Javascript schreiben willst, könnte dich auch der neue Open Source TagManager interessieren:
https://plugins.matomo.org/TagManager


#3

Hallo Lukas,
vielen Dank für Deine Antwort.
Leider hat mir das nicht helfen können, eher im Gegenteil: Nachdem ich das Script in den Header kopiert habe und versucht habe, die Attribute anzupassen, wurde mir leider gar nichts mehr angezeigt.
Auch konnte ich keine Ziele in Matomo festlegen (oder habe einfach keine Ahnung, wie das geht).
Insgesamt scheint mir, dass ich als reiner Anwender und Nicht-Profi mit Matomo überfordert bin, was sicherlich auch an der extrem schlechten Beschreibung der einzelnen Komponenten liegt.
Ich war froh, dass ich das Seitentracking hinbekommen habe, aber offensichtlich kommt man ohne profunde Programmierkenntnisse nicht zu Ergebnissen beim Tracken von einzelnen Events.
Deinen Link zm TagManager habe ich noch nicht ausprobiert, denn – ehrlich gesagt – ist hier die Beschreibung dieses Tool wieder einmal Matomo-Like, also für mich als Einsteiger nicht zu verstehen.
Außer dass da steht, dass es durchaus meine Website zerschießen könnte. Na klasse…
Vielleicht kennt jemand eine Dokumentation, in der man die grundsätzlichen Einstellungen für das Tracken mit Matomo gut (und vielleicht sogar auf Deutsch) beschrieben findet? Schritt für Schritt?
Gruß, doescher


(Thomas) #4

Hallo,

Ich wollte mich auch informieren, wie ich gedrückte Buttons im Webshop tracken kann. Dachte nicht, dass das so kompliziert wird (Conversion Tracking habe ich ja auch hinbekommen).

In der Anleitung finde ich nur einen Teil des nötigen Codes, aber nicht wie das bei einem Button eingebunden werden muss:
https://matomo.org/docs/event-tracking/

Und beim Beispielcode von @Lukas steige ich als Javascript Laie aus.

Ich möchte beispielsweise tracken, ob/wann die Buttons “Warenkorb öffnen” bzw. “zur Kasse” geklickt werden. Der Code im Shop System sieht so aus:

		<div class="clearfix margin-bottom-025">
			<div class="pull-left">
				<a class="btn btn-default pull-right" href="{% Link_Basket() %}" rel="nofollow"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> <span class="hidden-xs">Warenkorb </span><span class="capitalize-xs">öffnen</span></a>
			</div>
			<div class="pull-right">
				<a class="btn btn-primary" href="{% if( $CustomerID ) { Link_Checkout(3); } else { Link_Checkout(2); } %}"><span class="glyphicon glyphicon-euro" aria-hidden="true"></span> Zur Kasse</a>
			</div>
		</div>

Also eigentlich normale “a href” links die dank CSS eben wie Buttons aussehen.
(der code in diesen Klammern: {% ist vom Template System)

Wo/wie müsste man da den Trackingcode einbauen?

danke,

lg Thomas


#5

ich würde einfach die Funktion wie folgt ändern:
<script> function trackingFunction(action, label, value) { _paq.push(['trackEvent', action, label, value]); } </script>
und dann im Video onplay=“trackingFunction(‘click’, ‘video’, 1);”
bei den Buttons onclick=“trackingFunction(‘click’, ‘button’, 1);”
wobei du die 1 durch eine Nummerierung ersetzt wenn noch ein zweites Video folgt 2 usw. und bei den Buttons entsprechend.
Achte in meinem Code genau auf die Anführungszeichen.