Tracking breakdance forms with Independent Analytics - how it works

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.

How does it work?

Breakdance processes all form submissions on the server side via the WordPress AJAX system - specifically via the action breakdance_form_custom. We hook into exactly this hook and then fire the Independent Analytics tracking hook iawp_custom_form_submissions. No detour via the browser, no custom event - directly on the server side.

Requirements

• Independent Analytics Pro (Form Tracking is a Pro function)
• Breakdance Builder
• A snippet plugin such as WPCodeBox or Code Snippets

Step-by-Step Guide

I assume that you already know how to create forms in Breakdance - so let's get straight to the implementation.

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 to:

 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. Determine form ID and post ID

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

• form_id - the ID of the form element in Breakdance
• post_id - the ID of the page on which the form is located

So findest du sie heraus:

1. Open the page with the form in the browser
2. Open the developer tools (F12) → Tab Network
3. Filter to Fetch/XHR
4. Submit the form
5. Click on the admin-ajax.php Request → Payload
6. form_id and post_id

Important: Wenn dasselbe Formular-Element auf mehreren Seiten verwendet wird (weil es z.B. beim Anlegen dupliziert wurde), hat es zwar die gleiche form_id, but a different 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. Create PHP snippet

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

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' => 'Form 1', // x is your form ID, y is your post ID and in the '' enter the name that should appear in IAWP
'xxx_yy' => 'Form 2',
'xxx_yy' => 'Form 3',
// add further forms here
];

$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);
}

Priority 5 ensures that our code runs before Breakdance without interrupting its own processing.

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 and 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 does not track logged-in users by default. Therefore, always test in the 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.

As soon as Independent Analytics one form submission tracked has, you can use the Activate the respective form in the dashboard settings:

Then the form submissions appear in IAWP, in this example I have activated them in the site metrics:

Conclusion

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.