Breakdance Formulare mit Independent Analytics tracken – so geht’s

Independent Analytics (IAWP) bietet leider (noch) keine Integration zum Form-Tracking des Breakdance Formulars.

Mit einem einzigen globalen PHP-Snippet lässt sich das jedoch relativ einfach nachrüsten: Es funktioniert für alle Formulare auf der gesamten Website und jede Formulareinreichung erscheint in IAWP mit einem sauberen, klar definierten Namen. Die Lösung ist auch vollkommen unabhängig von JavaScript.

Wie funktioniert es?

Breakdance verarbeitet alle Formularübermittlungen serverseitig über das WordPress AJAX-System – konkret über die Action breakdance_form_custom. Wir hängen uns in genau diesen Hook ein und feuern anschließend den Independent Analytics Tracking-Hook iawp_custom_form_submissions. Kein Umweg über den Browser, kein Custom Event – direkt auf Serverseite.

Voraussetzungen

• Independent Analytics Pro (Form Tracking ist eine Pro-Funktion)
• Breakdance Builder
• Ein Snippet-Plugin wie WPCodeBox oder Code Snippets

Schritt-für-Schritt-Anleitung

Ich gehe davon aus, dass du bereits weißt, wie man Formulare in Breakdance erstellt – deshalb direkt zur Umsetzung.

Je nachdem, wie viele Formulare du auf deiner Website im Einsatz hast, unterscheidet sich die Implementierung.

Ein Formular auf der Website

Wenn du nur ein Formular auf deiner Website hast – zum Beispiel auf der Kontaktseite oder als globalen Block für verschiedene Stellen, aber technisch immer dasselbe Formular – reicht dieses sehr einfache Snippet aus.

Lege in deinem Code-Snippet-Plugin (z.B. Fluent Snippets, Code Snippets) folgendes PHP-Snippet an:

 add_action('wp_ajax_breakdance_form_custom', 'iawp_track_breakdance_form', 5);
add_action('wp_ajax_nopriv_breakdance_form_custom', 'iawp_track_breakdance_form', 5);

function iawp_track_breakdance_form() {
    $form_id   = isset($_POST['form_id']) ? intval($_POST['form_id']) : 1;
    $form_name = 'Kontaktformular'; // Name der im IAWP Dashboard erscheint

    do_action('iawp_custom_form_submissions', $form_id, $form_name);
}

Hier musst du lediglich den $form_name auf die gewünschte Bezeichnung an, die im Independent Analytics Dashboard erscheinen soll.

Als Konfiguration im Code-Snippet-Plugin würde ich folgendes wählen.

• How to execute: Always (on page load)
• Hook: plugins_loaded
• Where: Everywhere

Wenn du das so abgspeichert hast, musst du nur dein Formular ausfüllen und absenden, damit du es in IAWP im Dashboard unter Formulare aktivieren kannst. Mache das sicherheitshalber im Inkognito-Modus, weil du vermutlich das Tracking in IAWP für angemeldete Benutzer deaktiviert hast. Mehr dazu findest du unten bei “3. Testen”.

Mehrere Formulare auf der Website

Wenn du mehrere Formulare einsetzt, müssen wir im Code die ID des Formulars (form_id) und der Seite (post_id,) auf der das Formular platziert is, identifizieren und eine Kombination daraus erstellen. So erzeugen wir eine eindeutige unique_form_id und ermöglichen IAWP die Formularübermittlungen im Dashboard separat darzustellen.

1. Form-ID und Post-ID ermitteln

Um ein Formular korrekt zuzuordnen, benötigst du also zwei Werte, die Breakdance bei jedem Submit automatisch übermittelt:

• form_id – die ID des Formular-Elements in Breakdance
• post_id – die ID der Seite, auf der das Formular liegt

So findest du sie heraus:

1. Öffne die Seite mit dem Formular im Browser
2. Öffne die Entwicklertools (F12) → Tab Network
3. Filtere auf Fetch/XHR
4. Sende das Formular ab
5. Klicke auf den admin-ajax.php Request → Payload
6. form_id und post_id

Wichtig: Wenn dasselbe Formular-Element auf mehreren Seiten verwendet wird (weil es z.B. beim Anlegen dupliziert wurde), hat es zwar die gleiche form_id, aber eine unterschiedliche post_id und somit eine unterschiedliche Kombination zur eindeutigen Identifizierung in IAWP.

Das machst du für jedes einzelne Formular und notierst dir die IDs.

2. PHP-Snippet anlegen

Lege in deinem Snippet-Plugin (z.B. Fluent Snippets, Code Snippets) folgendes PHP-Snippet an:

add_action('wp_ajax_breakdance_form_custom', 'iawp_track_breakdance_form', 5);
add_action('wp_ajax_nopriv_breakdance_form_custom', 'iawp_track_breakdance_form', 5);

function iawp_track_breakdance_form() {
$form_id = isset($_POST['form_id']) ? intval($_POST['form_id']) : 1;
$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;

$form_names = [
'xxx_yy' => 'Formular 1', // x ist deine Form-ID, y ist deine Post-ID und in den '' den Namen eintragen, der in IAWP erscheinen soll
'xxx_yy' => 'Formular 2',
'xxx_yy' => 'Formular 3',
// weitere Formulare hier ergänzen
];

$key = $form_id . '_' . $post_id;
$form_name = isset($form_names[$key]) ? $form_names[$key] : 'Breakdance Form ' . $key;
$unique_form_id = $form_id * 100000 + $post_id;

do_action('iawp_custom_form_submissions', $unique_form_id, $form_name);
}

Die Priority 5 sorgt dafür, dass unser Code vor Breakdance läuft, ohne dessen eigene Verarbeitung zu unterbrechen.

Der wichtige Teil hier ist dieser hier:

$form_names = [
'xxx_yy' => 'Formular 1',
'xxx_yy' => 'Formular 2',
'xxx_yy' => 'Formular 3',
// füge weitere Formulare hinzu, indem du hier einfach weitere Formulare ergänzt
];

Das ‘xxx_yy’ ist unique_form_id und wird aus der form_id und post_id berechnet.

Auch hier wieder mit folgenden Einstellungen:

• How to execute: Always (on page load)
• Hook: plugins_loaded
• Where: Everywhere

Beispiel eines Kundenprojekts:

3. Testen

Independent Analytics trackt standardmäßig keine eingeloggten Nutzer. Teste daher immer im privaten Browser-Tab oder Inkognito-Modus (je nach Browser nennt ma das anders, ist aber dasselbe) oder aktiviere (vorübergehend!) das Tracking für eingeloggte Nutzer in den Independent Analytics Einstellungen.

Nach dem ersten erfolgreichen Submit erscheint das Formular unter Form Tracking.

Sobald Independent Analytics eine Formulareinreichung getrackt hat, kannst du das jeweilige Formular in den Dashboard-Einstellungen aktivieren:

Danach erscheinen die Formulareinreichungen in IAWP, in diesem Beispiel habe ich sie in den Site-Metriken aktiviert:

Fazit

Dank Breakdances AJAX-Architektur brauchen wir weder JavaScript noch HTML-Attribute – ein einziges PHP-Snippet reicht aus, um beliebig viele Formulare sauber in Independent Analytics zu tracken. Neue Formulare lassen sich jederzeit mit einer Zeile Code ergänzen.