Event-Tracking mit dem Piwik PRO Tag Manager

Published: September 21, 2016 Updated: May 22, 2019 Autor , Kategorie Best Practices, How Tos & Use Cases, Tag Manager

Bisher mussten Sie für die Einrichtung eines neuen Event-Trackings (Button, Formulare, ausgehende Links u.v.m.) Ihre IT und Admins involvieren. Dank des Piwik PRO Tag Managers ist es Ihnen jetzt auch möglich, Piwik- und Google Analytics-Events direkt zu implementieren – dafür ist nur technisches Grundlagenwissen notwendig. Sie sparen dadurch enorm viel Zeit und können neue Analysen viel schneller vornehmen und neue Kampagnen starten.

Dieser Blogpost zeigt Ihnen, wie Sie innerhalb weniger Minuten einen Piwik-Event mit dem Piwik PRO Tag Manager implementieren können.

Das Tracking von Button-Klicks mit dem Piwik PRO Tag Manager implementieren

Ein häufiger Anwendungsfall für Piwik-Events ist das Tracken von Button-Klicks, die keinen Reload der Seite zur Folge haben. Um diese Informationen zu erfassen, müssen Sie dem klickbaren Element, ein zusätzliches JavaScript-Event zuordnen. Dies können Sie nun sehr komfortabel und unkompliziert über den Piwik PRO Tag Manager implementieren. Hierzu definieren Sie zunächst, was Sie genau tracken möchten.

Im folgenden Beispiel werden Klicks auf den »Request a free demo« Button auf der
Piwik PRO Startseite getrackt.

Piwik PRO Startseite
Piwik PRO Startseite

Als erstes loggen Sie sich in Ihren Piwik PRO Tag Manager ein und erstellen einen Tag, der das entsprechende Piwik-Event beinhaltet. Das können Sie durch einen Klick auf den
»+ Add a tag« Button im Interface des Piwik PRO Tag Managers erledigen.

Piwik PRO Tag Manager - Tag erstellen
Piwik PRO Tag Manager - Tag erstellen

Klicken Sie auf das Tab »Asynchronous« und wählen Sie anschließend »Asynchronous custom HTML tag«.

Piwik PRO Tag Manager - Auswahl des Tag-Typen
Piwik PRO Tag Manager - Auswahl des Tag-Typen

Nun erscheint ein freies Editor-Fenster, um Ihr custom HTML-Tag zu definieren. In dieses Fenster kopieren Sie Ihren Piwik-Event. Um einen Event-Tracking-Code zu erstellen, können Sie dieses simple Template verwenden:


_paq.push(['trackEvent', 'Event Category', 'Event Action', 'Event Name’, Numeric Value]);

In diesem Beispiel werden nur die Kategorie Event und die Event-Action-Parameter verwendet. Des Weiteren sollten Sie daran denken, dass ein Piwik-Event innerhalb des <script> Tags stehen muss, um ordnungsgemäß zu funktionieren. Ihr Piwik-Event sollte also folgendermaßen aussehen:

<script>
  _paq.push(['trackEvent', 'Click', 'CTA-Homepage']);
</script>
Piwik PRO Tag Manager - Einfügen des HTML-Codes
Piwik PRO Tag Manager - Einfügen des HTML-Codes

Damit der Piwik PRO Tag Manager weiß, wann der Event genau abgefeuert werden muss und welcher Button-Klick getrackt werden soll, richten Sie für den Tag entsprechende Trigger und Bedingungen ein – eines der leistungsstärksten Features des Piwik PRO Tag Managers.

Kostenlose Tag Manager Demo

Lernen Sie alle Vorzüge unseres leistungsstarken Tag Managers in einer persönlichen Demo kennen.

Kostenlosen Demo-Termin vereinbaren

Unter dem Editor-Fenster finden Sie den Button »Add a new trigger«. Nach dem Klick öffnet sich der Trigger-Editor, um Ihr Event den entsprechenden Aktionen auf der Webseite zuzuordnen. Wählen Sie zunächst aus den vordefinierten Optionen aus. Dabei kommt es darauf an, welche Art von Trigger Ihrem Event zugeordnet werden soll. Im Fall des Button-Klick-Trackings wählen Sie »Click«.

Achtung: Falls Sie den Click-Trigger ohne eine Bedingung gewählt haben, wird das dazu führen, dass Ihr Event durch jeden Klick auf der Seite abgefeuert wird. Sogar dann, wenn es sich dabei nicht um den gewünschten Button handelt. Sie müssen deshalb genau definieren, welche Klicks dafür sorgen sollen, dass Ihr Event abgefeuert wird. Daher ordnen Sie Ihrem Event, den dafür bestimmten Button auf der Seite zu.

Piwik PRO Tag Manager - Trigger-Konfiguration
Piwik PRO Tag Manager - Trigger-Konfiguration

Zunächst geben Sie Ihrem Trigger einen aussagekräftigen Namen, sodass Sie ihn später auch für andere Tags verwenden können. In diesem Beispiel ist der Name des Triggers »Home Video Button«. Anschließend legen Sie noch zwei Bedingungen fest, die den Trigger eindeutig definieren.

Die erste Bedingung besteht darin, dem Piwik PRO Tag Manager mitzuteilen, dass er den Tag nur auf einer speziellen Seite abfeuern soll – in diesem Fall der piwik.pro Startseite.

Die zweite Bedingung besteht darin, dem Piwik PRO Tag Manager mitzuteilen, dass er den Event nur abfeuern soll, wenn der »Request a free demo« Button auf der Seite geklickt wird. Um das zu realisieren, müssen Sie DOM-Elemente verwenden (Ausschnitte aus dem HTML- und CSS-Sourcecode, die den Button beschreiben). Diese können Sie im Sourcecode der Webseite finden und leicht entnehmen. Klicken Sie im Chrome mit der rechten Maustaste auf den infrage kommenden Button und wählen Sie im Menü »untersuchen«. Sie sollten jetzt folgenden Code unterhalb der Seite angezeigt bekommen:

Der große Tag Manager Anbieter Vergleich

40 Key Features der 6 führenden Tag Management Anbieter haben wir für Sie verglichen: Google Tag Manager, Tealium, Adobe Dynamic, Segment, Ensighten und Piwik PRO

Zum kostenlosen Tag Manager Vergleich
Piwik PRO - Code-Preview
Piwik PRO - Code-Preview

Wie Sie im Code von Piwik.pro sehen, wird der Button anhand des class-Elements dargestellt und erkannt.

class="btn _btn-video"

Diese Information benutzen Sie, um die nächste Bedingung zu definieren. Wählen Sie dafür im Drop-Down-Menü Click Classes contains btn-video (der Wert des class-Elements, den Sie im Sourcecode herausgefunden haben).

Anschließend klicken Sie den Save-Button am unteren Ende der Seite und Sie haben das Event-Tracking für den Button definiert und den Tag angelegt. Als letztes sollten Sie noch über den Debug-Modus des Piwik PRO Tag Managers überprüfen, ob der Event ordnungsgemäß funktioniert, Mithilfe des Debug-Modus können Sie überprüfen, welche Tags abgefeuert werden und welche Trigger für selbige verantwortlich sind. Anschließend können Sie den Tag auf Ihrer Seite veröffentlichen.

Piwik PRO Tag Manager - Debug-Einstellungen
Piwik PRO Tag Manager - Debug-Einstellungen

Wechseln Sie in den Debug-Modus und geben Sie dort die URL der Seite ein, die Sie untersuchen möchten – in diesem Fall die Startseite piwik.pro. Klicken Sie dann auf Debug, Sie werden automatisch auf eine Preview-Version der Seite geleitet, die Sie mit zusätzlichen Informationen über die abgefeuerten Tags versorgt. Hier können Sie nun den Klick auf den Button testen.

Piwik PRO Tag Manager - Debug-Modus
Piwik PRO Tag Manager - Debug-Modus

Wie Sie sehen, führt ein Klick auf den Button dazu, dass das Piwik-Event abgefeuert wird. Nachdem Sie sich davon überzeugt haben, dass alles richtig funktioniert, können Sie den tag veröffentlichen und damit anfangen, die gewünschten Daten zu sammeln.

Auf diese Weise können Sie mit dem Piwik PRO Tag Manager komfortabel und zeitsparend weitere Events anlegen.

Kostenlose Tag Manager Demo

Lernen Sie alle Vorzüge unseres leistungsstarken Tag Managers in einer persönlichen Demo kennen.

Kostenlosen Demo-Termin vereinbaren

Autor:

Timo Mueller, Content Marketer

Mehr Artikel von diesem Autor

Autor:

Marek Juszczyński, Marek Juszczyński - Head of Marketing Piwik PRO

Marek ist Head of Marketing bei Piwik PRO. Seine Fachgebiete sind Growth Hacking und Conversion-Optimierung im E-Commerce, B2B & Start-ups. Er veröffentlicht regelmäßig Artikel zu den Themen Web Analytics und Conversion-Optimierung in Blogs und Online-Magazinen.

Mehr Artikel von diesem Autor

Share