{"id":262314,"date":"2026-03-26T12:45:52","date_gmt":"2026-03-26T08:45:52","guid":{"rendered":"https:\/\/cs-webdesigns.com\/?p=262314"},"modified":"2026-04-01T20:39:51","modified_gmt":"2026-04-01T16:39:51","slug":"tracking-breakdance-forms-with-independent-analytics-how-it-works","status":"publish","type":"post","link":"https:\/\/cs-webdesigns.com\/en\/webinsights\/tutorials\/breakdance-formulare-mit-independent-analytics-tracken-so-gehts\/","title":{"rendered":"Tracking breakdance forms with Independent Analytics - how it works"},"content":{"rendered":"<p><a href=\"https:\/\/independentwp.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Independent Analytics<\/a> (IAWP) bietet leider (noch) keine Integration zum Form-Tracking des Breakdance Formulars.<\/p>\n<p>Mit einem einzigen globalen PHP-Snippet l\u00e4sst sich das jedoch relativ einfach nachr\u00fcsten: Es funktioniert f\u00fcr alle Formulare auf der gesamten Website und jede Formulareinreichung erscheint in IAWP mit einem sauberen, klar definierten Namen. Die L\u00f6sung ist auch vollkommen unabh\u00e4ngig von JavaScript.<\/p>\n<h2>Wie funktioniert es?<\/h2>\n<p>Breakdance verarbeitet alle Formular\u00fcbermittlungen serverseitig \u00fcber das WordPress AJAX-System \u2013 konkret \u00fcber die Action <code>breakdance_form_custom<\/code>. Wir h\u00e4ngen uns in genau diesen Hook ein und feuern anschlie\u00dfend den Independent Analytics Tracking-Hook <code>iawp_custom_form_submissions<\/code>. Kein Umweg \u00fcber den Browser, kein Custom Event \u2013 direkt auf Serverseite.<\/p>\n<h2>Voraussetzungen<\/h2>\n<ul>\n<li>Independent Analytics Pro (Form Tracking ist eine Pro-Funktion)<\/li>\n<li>Breakdance Builder<\/li>\n<li>Ein Snippet-Plugin wie WPCodeBox oder Code Snippets<\/li>\n<\/ul>\n<h2>Schritt-f\u00fcr-Schritt-Anleitung<\/h2>\n<p>Ich gehe davon aus, dass du bereits wei\u00dft, wie man Formulare in Breakdance erstellt \u2013 deshalb direkt zur Umsetzung.<\/p>\n<p>Je nachdem, wie viele Formulare du auf deiner Website im Einsatz hast, unterscheidet sich die Implementierung.<\/p>\n<h3>Ein Formular auf der Website<\/h3>\n<p>Wenn du nur ein Formular auf deiner Website hast \u2013 zum Beispiel auf der Kontaktseite oder als globalen Block f\u00fcr verschiedene Stellen, aber technisch immer dasselbe Formular \u2013 reicht dieses sehr einfache Snippet aus.<\/p>\n<p>Lege in deinem Code-Snippet-Plugin (z.B. Fluent Snippets, Code Snippets) folgendes <strong>PHP-Snippet<\/strong> an:<\/p>\n<pre style=\"background-color: #f5f5f5; padding: 20px; border-radius: 5px; overflow-x: auto;\"><code> add_action('wp_ajax_breakdance_form_custom', 'iawp_track_breakdance_form', 5);\r\nadd_action('wp_ajax_nopriv_breakdance_form_custom', 'iawp_track_breakdance_form', 5);\r\n\r\nfunction iawp_track_breakdance_form() {\r\n    $form_id   = isset($_POST['form_id']) ? intval($_POST['form_id']) : 1;\r\n    $form_name = 'Kontaktformular'; \/\/ Name der im IAWP Dashboard erscheint\r\n\r\n    do_action('iawp_custom_form_submissions', $form_id, $form_name);\r\n}<\/code><\/pre>\n<p>Hier musst du lediglich den <code>$form_name<\/code> auf die gew\u00fcnschte Bezeichnung an, die im Independent Analytics Dashboard erscheinen soll.<\/p>\n<p>Als Konfiguration im Code-Snippet-Plugin w\u00fcrde ich folgendes w\u00e4hlen.<\/p>\n<ul>\n<li>How to execute: Always (on page load)<\/li>\n<li>Hook: plugins_loaded<\/li>\n<li>Where: Everywhere<\/li>\n<\/ul>\n<p>Wenn du das so abgspeichert hast, musst du nur dein Formular ausf\u00fcllen und absenden, damit du es in IAWP im Dashboard unter Formulare aktivieren kannst. Mache das sicherheitshalber <strong>im Inkognito-Modus<\/strong>, weil du vermutlich das Tracking in IAWP f\u00fcr angemeldete Benutzer deaktiviert hast. Mehr dazu findest du unten bei &#8222;3. Testen&#8220;.<\/p>\n<h3>Mehrere Formulare auf der Website<\/h3>\n<p>Wenn du mehrere Formulare einsetzt, m\u00fcssen wir im Code die ID des Formulars (<code>form_id<\/code>) und der Seite (<code>post_id<\/code>,) auf der das Formular platziert is, identifizieren und eine Kombination daraus erstellen. So erzeugen wir eine eindeutige <code>unique_form_id<\/code> und erm\u00f6glichen IAWP die Formular\u00fcbermittlungen im Dashboard separat darzustellen.<\/p>\n<p><strong>1. Form-ID und Post-ID ermitteln<\/strong><\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Um ein Formular korrekt zuzuordnen, ben\u00f6tigst du also zwei Werte, die Breakdance bei jedem Submit automatisch \u00fcbermittelt:<\/p>\n<ul>\n<li><code>form_id<\/code> &#8211; die ID des Formular-Elements in Breakdance<\/li>\n<li><code>post_id<\/code> \u2013 die ID der Seite, auf der das Formular liegt<\/li>\n<\/ul>\n<p>So findest du sie heraus:<\/p>\n<ol>\n<li>\u00d6ffne die Seite mit dem Formular im Browser<\/li>\n<li>\u00d6ffne die Entwicklertools (F12) \u2192 Tab <strong>Network<\/strong><\/li>\n<li>Filtere auf <strong>Fetch\/XHR<\/strong><\/li>\n<li>Sende das Formular ab<\/li>\n<li>Klicke auf den <code>admin-ajax.php<\/code> Request \u2192 <strong>Payload<\/strong><\/li>\n<li><code>form_id<\/code> und <code>post_id<\/code><\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-262324\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/konsole-netzwerk-form-id-herausfinden.jpg\" alt=\"konsole netzwerk form id herausfinden\" width=\"788\" height=\"351\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/konsole-netzwerk-form-id-herausfinden.jpg 788w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/konsole-netzwerk-form-id-herausfinden-480x214.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 788px, 100vw\" \/><\/p>\n<p><strong>Wichtig:<\/strong> Wenn dasselbe Formular-Element auf mehreren Seiten verwendet wird (weil es z.B. beim Anlegen dupliziert wurde), hat es zwar die gleiche <code>form_id<\/code>, aber eine unterschiedliche <code>post_id<\/code> und somit eine unterschiedliche Kombination zur eindeutigen Identifizierung in IAWP.<\/p>\n<p>Das machst du f\u00fcr jedes einzelne Formular und notierst dir die IDs.<\/p>\n<p><strong>2. PHP-Snippet anlegen<\/strong><\/p>\n<p>Lege in deinem Snippet-Plugin (z.B. Fluent Snippets, Code Snippets) folgendes <strong>PHP-Snippet<\/strong> an:<\/p>\n<pre style=\"background-color: #f5f5f5; padding: 20px; border-radius: 5px; overflow-x: auto;\"><code>add_action('wp_ajax_breakdance_form_custom', 'iawp_track_breakdance_form', 5);\r\nadd_action('wp_ajax_nopriv_breakdance_form_custom', 'iawp_track_breakdance_form', 5);\r\n\r\nfunction iawp_track_breakdance_form() {\r\n$form_id = isset($_POST['form_id']) ? intval($_POST['form_id']) : 1;\r\n$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;\r\n\r\n$form_names = [\r\n'xxx_yy' =&gt; 'Formular 1', \/\/ x ist deine Form-ID, y ist deine Post-ID und in den '' den Namen eintragen, der in IAWP erscheinen soll\r\n'xxx_yy' =&gt; 'Formular 2',\r\n'xxx_yy' =&gt; 'Formular 3',\r\n\/\/ weitere Formulare hier erg\u00e4nzen\r\n];\r\n\r\n$key = $form_id . '_' . $post_id;\r\n$form_name = isset($form_names[$key]) ? $form_names[$key] : 'Breakdance Form ' . $key;\r\n$unique_form_id = $form_id * 100000 + $post_id;\r\n\r\ndo_action('iawp_custom_form_submissions', $unique_form_id, $form_name);\r\n}<\/code><\/pre>\n<p>Die Priority 5 sorgt daf\u00fcr, dass unser Code vor Breakdance l\u00e4uft, ohne dessen eigene Verarbeitung zu unterbrechen.<\/p>\n<p>Der wichtige Teil hier ist dieser hier:<\/p>\n<pre style=\"background-color: #f5f5f5; padding: 20px; border-radius: 5px; overflow-x: auto;\"><code>$form_names = [\r\n'xxx_yy' =&gt; 'Formular 1',\r\n'xxx_yy' =&gt; 'Formular 2',\r\n'xxx_yy' =&gt; 'Formular 3',\r\n\/\/ f\u00fcge weitere Formulare hinzu, indem du hier einfach weitere Formulare erg\u00e4nzt\r\n<\/code><code>];<\/code><\/pre>\n<p>Das &#8218;xxx_yy&#8216; ist <code>unique_form_id<\/code> und wird aus der <code>form_id<\/code> und <code>post_id<\/code> berechnet.<\/p>\n<p>Auch hier wieder mit folgenden Einstellungen:<\/p>\n<ul>\n<li>How to execute: Always (on page load)<\/li>\n<li>Hook: plugins_loaded<\/li>\n<li>Where: Everywhere<\/li>\n<\/ul>\n<p>Beispiel eines Kundenprojekts:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-262323\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/php-snippet-beispiel.jpg\" alt=\"php snippet beispiel\" width=\"1001\" height=\"509\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/php-snippet-beispiel-980x498.jpg 980w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/php-snippet-beispiel-480x244.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1001px, 100vw\" \/><\/p>\n<p><strong>3. Testen<\/strong><\/p>\n<p>Independent Analytics trackt standardm\u00e4\u00dfig keine eingeloggten Nutzer. Teste daher immer im <strong>privaten Browser-Tab oder Inkognito-Modus (je nach Browser nennt ma das anders, ist aber dasselbe)<\/strong> oder aktiviere (vor\u00fcbergehend!) das Tracking f\u00fcr eingeloggte Nutzer in den Independent Analytics Einstellungen.<\/p>\n<p>Nach dem ersten erfolgreichen Submit erscheint das Formular unter Form Tracking.<\/p>\n<p>Sobald Independent Analytics <strong>eine Formulareinreichung getrackt<\/strong> hat, kannst du das <strong>jeweilige Formular in den Dashboard-Einstellungen aktivieren<\/strong>:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-262325\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/form-submissions-in-iawp-aktivieren.jpg\" alt=\"form submissions in iawp aktivieren\" width=\"426\" height=\"291\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/form-submissions-in-iawp-aktivieren.jpg 426w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/form-submissions-in-iawp-aktivieren-150x102.jpg 150w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/form-submissions-in-iawp-aktivieren-18x12.jpg 18w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/p>\n<p>Danach erscheinen die Formulareinreichungen in IAWP, in diesem Beispiel habe ich sie in den Site-Metriken aktiviert:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-262326\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/beispiel-iawp-dashboard-site-metrics.jpg\" alt=\"beispiel iawp dashboard site metrics\" width=\"1001\" height=\"402\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/beispiel-iawp-dashboard-site-metrics-980x394.jpg 980w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/beispiel-iawp-dashboard-site-metrics-480x193.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1001px, 100vw\" \/><\/p>\n<h2>Fazit<\/h2>\n<p>Dank Breakdances AJAX-Architektur brauchen wir weder JavaScript noch HTML-Attribute \u2013 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\u00e4nzen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is no official integration between Breakdance and Independent Analytics - this can be implemented for all forms with a single global PHP snippet.<\/p>","protected":false},"author":1,"featured_media":262327,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"%%post_title%%","_seopress_titles_desc":"%%post_excerpt%%","_seopress_robots_index":"","_seopress_analysis_target_kw":"Breakdance Formulare,Independent Analytics,tracken","_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":14,"footnotes":""},"categories":[333],"tags":[],"class_list":["post-262314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/262314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/comments?post=262314"}],"version-history":[{"count":0,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/262314\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media\/262327"}],"wp:attachment":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media?parent=262314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/categories?post=262314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/tags?post=262314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}