Analytics-Eventtracking-über-CSS

Alles rund um die Webanalyse und Suchmaschienen Marketing

Analytics-Eventtracking-über-CSS

Google Analztics Eventtracking über CSS. Ohne Javascript Teil 1

Wenn Besucher auf Ihrer Webseite gelangen und Javascript deaktiviert haben, wird Analytics nicht mitgeladen. Dann bewegt sich der Nutzer im regelfall unsichtbar auf Ihrer Seite. Rein theoretisch ist es möglich, Analytics komplett ohne Javascript anzusteuern bei Seitenaufrufen sowie auch bei Ereignissen bis hin zu Transaktionen. In diesem Teil erfahren Sie wir Sie ein Event über die Nutzung von CSS auslösen können.

Hintergrund erstellen

Als erstes müssen wir ein Hintergrundbild erstellen, bzw laden. Dieses ist 1 pixel und ca. 42 bytes groß. Das Grundgerüsst sieht wie folgt aus:

background-image: url("https://www.google-analytics.com/collect?v=1

Diesen URL Link zu dem Pixel kann jetzt mit wie auch beim normalen Eventtracking mit Kategorie, Aktion, Label erweitert werden. Dazu müssen wir einfach weitere Parameter an die URL anhängen. Der Erste Parameter ist immer durch ein “?” gekennzeichnet. Folgende durch ein “&”.

Das Hintergrundbild sieht mit Parametern wie folgt aus:

background-image: url("https://www.google-analytics.com/collect?v=1&t=event&tid=UA-77337668-1&cid=a0b8d128-5ed1-4a0b-a755-b375ce2bb0ab&ec=Email%20Marketing&ea=Interaktion&el=Klick%20-%20auf%20Button!");

Nehmen wir nun die URL einmal auseinander:

  1. &t=event = Bedeutet es ist ein EVENT
  2. &tid=UA-77337668 = tid steht für Tracking ID
  3. cid=a0b8d128-5ed1-4a0b-a755-b375ce2bb0ab = Die Client ID wird benötigt wenn keine User Id zu verfügung steht
  4. &ec = Event Kategorie
  5. &ea = Event Aktion
  6. &el = Event Label

Die Client ID können Sie so übernehmen die anderen Werte sind anpassbar. Wenn Sie einen Wert hinzufügen möchten, müssen sie am ende der URL z.B. “&val=12” für einen Wert von 12 anhängen.

Dieses Hintergrundbild kann nun direkt in die CSS Datei reingeschrieben werden oder als <Style> in die HTML, PHP inkludiert werden.

Pseudo Klassen zum tracken einer Aktion

Pseudo Klassen bestimmen einen bestimmten Status eines Elementes. Die wichtigsten werden kurz genannt:

  1. :active = Bedeutet ein Element wurde vom Benutzer aktiviert
  2. :focus = Fokusiert ein Element z.B Kontaktform bei der Eingabe
  3. :checked = Radiobutton oder Checkbox ist angehakt

Kommen wir nun zu einem Beispiel. Klicken eines Knopfes.

<input type="button" value="Klick mich"/>

input[type="button"]:active {
    background-image: url('https://www.google-analytics.com/collect?v=1&t=event&tid=UA-77337668-1&cid=a0b8d128-5ed1-4a0b-a755-b375ce2bb0ab&ec=Email%20Marketing&ea=Interaktion&el=Klick%20-%20auf%20Button!');
}

Von <input bis /> ist der HTML Teil. Der Teil von Input bis } muss entweder in die CSS Datei oder in das HTML Dokument zwischen <Style>Hier den Kode rein</style> hinzugefügt werden.

Überprüfen können Sie dann das Event im Analytics unter Echtzeit –> Ereignisse

Zum 2 Teil “Seitenaufruf, Pageview tracken ohne Javascript” gelangen Sie mit diesem Link.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.