Button-Klick-Events mit Google Tag Manager verfolgen

Es gibt zahlreiche Anleitungen, die erklären, wie Sie Button-Klicks als Ziel in verfolgen. Google Analytics.

Fast alle, darunter auch offizielle Handbücher von Google, verwenden das onclick-Event auf einer bestimmten Schaltfläche.

Der größte Nachteil dieser Methode besteht darin, dass zahlreiche „Fake“-Ziele erfasst werden , wenn das Kontaktformular mit falschen Angaben ausgefüllt wird. Das führt bei der PPC-Verwaltung zu irreführenden Statistiken und falschen Entscheidungen.

In diesem Artikel zeigen wir Ihnen, wie Sie mithilfe von JavaScript und Google Tag Manager die Zahl der „Fake-Klicks“ in Ihren Statistikdaten minimieren. Für die Fehlerbehebung habe ich Google Chrome verwendet.

Die Lösung besteht darin, einen eigenen JavaScript-Validator zu schreiben, der das Formular prüft, sobald es mit korrekten Angaben ausgefüllt wurde.

Zur Veranschaulichung habe ich das Formular unten platziert, damit Sie es als Beispiel verwenden können:

[supsystic-form id=12]

In unserem Fall sind Name, E-Mail-Adresse und Telefonnummer Pflichtfelder.

Damit unser Skript die erforderlichen Daten prüfen kann, müssen wir diese Angaben zunächst erhalten. In unserem Beispiel verwenden wir den folgenden Ablauf:

– CSS-Selektorfeld definieren: Klicken Sie dazu mit der rechten Maustaste auf den gewünschten Bereich und wählen Sie „Untersuchen“. Klicken Sie im geöffneten Fenster mit der rechten Maustaste auf das ausgewählte Element und wählen Sie „Selektor kopieren“:

– Verwenden Sie den Selektor, um die Formulardaten mit der JavaScript-Methode query abzurufen.

Selector:

var name = document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value; var name = document.querySelector('form > div:nth-child(2) > div > div > input[type="text"]').value; var name = document.querySelector('form > div:nth-child(3) > div > div > input[type="text"]').value;

Sie können die Korrektheit über Ihre Entwicklerkonsole prüfen. Dazu geben Sie einen beliebigen Wert in das Feld ein, übernehmen den passenden Code und führen ihn in der Konsole aus. Beispiel für den Code des Namensfelds:

1. document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value

Damit funktioniert alles, wunderbar! 🙂

Einige Beispiele, die ich zum Testen verschiedener Felder verwendet habe, finden Sie unten.

Prüfung des E-Mail-Felds:

function validateEmail(e) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(e); }

Prüfung des Telefonnummernfelds:

function validateNumber(e) { var re = /^[0-9._\s()+-]+$/; return re.test(e); }

Date field checking:

function validateDate(e) { var re = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/; return re.test(e); }

Ähnliche reguläre Ausdrücke finden Sie ganz einfach über die Google-Suche, indem Sie beispielsweise „email regex“ eingeben.

Zur Überprüfung der Funktionsweise können Sie Dienste wie https://regex101.com/ (https://regex101.com/r/eZ7aX5/1) verwenden.

Sobald Sie alle erforderlichen Informationen erhalten und überprüft haben, können Sie sich dem eigentlichen Code und seiner Integration in den Google Tag Manager widmen.

Unten sehen Sie den vollständigen Code mit Kommentaren:

Anpassungen im Google Tag Manager

Für die Einrichtung des Triggers habe ich Details des CSS-Selektors verwendet.

Nun installieren wir unsere Codes für Analytics und Yandex Metrica.

In beiden Fällen löst der Code das Event „valid_click“ aus, das wir über unser benutzerdefiniertes HTML senden, wenn unser Formular mit korrekten Angaben ausgefüllt wurde.

Wir haben die Einrichtung von Analytics und Yandex Metrica beschrieben, ohne ins Detail zu gehen, da Sie an vielen Stellen ausführliche Beschreibungen dieser Prozesse finden.

Wenn Sie Fragen haben, kontaktieren Sie uns, wir sind gerne bereit, dieses Thema ebenfalls zu vertiefen.