{"id":4635,"date":"2025-12-10T11:14:32","date_gmt":"2025-12-10T10:14:32","guid":{"rendered":"https:\/\/trackboxx.com\/?post_type=helpcenter&#038;p=4635"},"modified":"2025-12-15T12:35:37","modified_gmt":"2025-12-15T11:35:37","slug":"conversion-tracking","status":"publish","type":"helpcenter","link":"https:\/\/trackboxx.com\/en\/helpcenter\/conversion-tracking","title":{"rendered":"Trackboxx Conversion Tracking"},"content":{"rendered":"\n<p>Mit dem Conversion Tracking von Trackboxx kannst du messen, welche Aktionen Besucher auf deiner Webseite ausf\u00fchren \u2013 z. B. Klicks auf wichtige Links, gesendete Formulare oder Aufrufe bestimmter Seiten.<br>Diese Daten helfen dir, den Erfolg deiner Marketing- und Website-Ma\u00dfnahmen pr\u00e4zise auszuwerten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Conversion-Arten kann Trackboxx erfassen?<\/h2>\n\n\n\n<p>Trackboxx unterst\u00fctzt folgende Ereignisse:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Klicks auf Links, Buttons oder Men\u00fceintr\u00e4ge<\/strong><\/li>\n\n\n\n<li><strong>Aufrufe bestimmter Seiten<\/strong> (z. B. eine Danke-Seite)<\/li>\n\n\n\n<li><strong>Formularversand<\/strong><\/li>\n\n\n\n<li><strong>Eigene JavaScript-Events<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Jeder Abschluss wird im Dashboard mit folgenden Daten angezeigt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name des Zielvorhabens<\/li>\n\n\n\n<li>Anzahl der Ausl\u00f6sungen<\/li>\n\n\n\n<li>Wert (optional)<\/li>\n\n\n\n<li>Conversion Rate im gew\u00e4hlten Zeitraum<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Conversion anlegen<\/h2>\n\n\n\n<p>So legst du ein neues Zielvorhaben an:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Klicke oben rechts auf das Zahnrad<\/li>\n\n\n\n<li>W\u00e4hle <strong>Webseiten<\/strong><\/li>\n\n\n\n<li>W\u00e4hle die Webseite und klicke auf <strong>Ziele<\/strong><\/li>\n\n\n\n<li>Klicke auf <strong>Zielvorhaben anlegen<\/strong><\/li>\n\n\n\n<li>Vergib Name &amp; Beschreibung<\/li>\n\n\n\n<li>Du erh\u00e4ltst Code wie diesen:<\/li>\n<\/ol>\n\n\n\n<script>\n    trackboxx('trackGoal', 'DEINE-ID');\n<\/script>\n\n\n\n<p>Diese Basis-ID wird sp\u00e4ter in die passenden Code-Beispiele integriert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Klicktracking<\/h2>\n\n\n\n<p>Du kannst Klicks auf verschiedene Arten tracken.<br>Trackboxx empfiehlt die <strong>JavaScript-Variante<\/strong>, da sie stabiler, flexibler und DSGVO-freundlicher ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 Klicktracking \u00fcber JavaScript<\/h3>\n\n\n\n<p><strong>a) Tracking \u00fcber eine CSS-ID<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/kontakt\/\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"kontakt-link\"<\/span>&gt;<\/span>Kontakt<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Tracking-Code:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'kontakt-link'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>b) Tracking \u00fcber eine CSS-Klasse<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.kontakt-link'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><br>\u26a0\ufe0f Hinweis:<br><code><span style=\"color: #0f0e17;background-color: #abb7c27d\" class=\"stk-highlight\">querySelector()<\/span><\/code> trackt <strong>nur das erste Element<\/strong> mit dieser Klasse.<\/p>\n\n\n\n<p>F\u00fcr mehrere Elemente gleichzeitig:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.kontakt-link'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">el<\/span> =&gt;<\/span> {\n    el.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n        trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n    });\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">2.2 Klicktracking mit sofortiger Weiterleitung (externe Links, Downloads, Mailto, Tel)<br><\/h2>\n\n\n\n<p>Wenn ein Link die Seite <strong>sofort verl\u00e4sst<\/strong>, kann der Browser das Tracking manchmal nicht rechtzeitig senden.<\/p>\n\n\n\n<p>L\u00f6sung:<br>\u25ba <strong>Weiterleitung kurz verz\u00f6gern<\/strong> und erst <strong>nach dem Tracking<\/strong> ausf\u00fchren.<\/p>\n\n\n\n<p>Beispiel:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.externer-link'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">el<\/span> =&gt;<\/span> {\n  el.addEventListener(<span class=\"hljs-string\">'click'<\/span>, (e) =&gt; {\n    e.preventDefault();\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n    setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n      <span class=\"hljs-built_in\">window<\/span>.location = el.href;\n    }, <span class=\"hljs-number\">150<\/span>);\n  });\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Empfohlen f\u00fcr:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>externe Links<\/li>\n\n\n\n<li>PDF-Downloads<\/li>\n\n\n\n<li>Mailto-Links<\/li>\n\n\n\n<li>Tel-Links<\/li>\n\n\n\n<li>Affiliate-Links<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2.3 Klicktracking \u00fcber Inline-HTML <span style=\"color: #222222;background-color: #abb7c282\" class=\"stk-highlight\">(<code>onclick<\/code>)<\/span><\/h2>\n\n\n\n<p>Diese Methode funktioniert, ist aber nicht optimal:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/kontakt\/\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"trackboxx('trackGoal', 'DEINE-ID');\"<\/span>&gt;<\/span>Kontakt<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u26a0\ufe0f Nachteile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>schlechter wartbar<\/li>\n\n\n\n<li>wird oft von Pagebuildern \u00fcberschrieben<\/li>\n\n\n\n<li>technisch unsauber<\/li>\n<\/ul>\n\n\n\n<p>Empfehlung: <strong>JavaScript statt inline.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Seitenaufrufe (Pageview-Conversions)<\/h2>\n\n\n\n<p>Um zu messen, wie oft eine bestimmte Seite aufgerufen wird:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">'DOMContentLoaded'<\/span>, () =&gt; {\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ideal f\u00fcr:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Danke-Seiten<\/li>\n\n\n\n<li>Bestellbest\u00e4tigungen<\/li>\n\n\n\n<li>Erfolgreich-versendet-Seiten<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. Formulartracking<\/h2>\n\n\n\n<p>Es gibt drei Wege:<\/p>\n\n\n\n<p><strong>4.1 Formular \u00fcberwachen \u00fcber <code>onsubmit<\/code> (wenn Zugriff m\u00f6glich)<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onsubmit<\/span>=<span class=\"hljs-string\">\"trackboxx('trackGoal', 'DEINE-ID');\"<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Einfach \u2013 funktioniert \u00fcberall, wo HTML bearbeitet werden kann.<\/p>\n\n\n\n<p><strong>4.2 Formularversand \u00fcber JavaScript tracken<\/strong><\/p>\n\n\n\n<p>Wenn eventListener ben\u00f6tigt wird:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#kontaktformular'<\/span>).addEventListener(<span class=\"hljs-string\">'submit'<\/span>, () =&gt; {\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">4.3 Formularsysteme mit eigener Erfolgslogik (z. B. smarte Builder)<\/h2>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"actionscript\">\nsk(<span class=\"hljs-string\">'form'<\/span>, <span class=\"hljs-string\">'init'<\/span>, {\n  onSuccess: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n  }\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u2192 korrekt f\u00fcr Tools, die ihren eigenen \u201esuccess\u201c-Hook besitzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4.4 Tracking \u00fcber Danke-Seite (Fallback)<\/h2>\n\n\n\n<p>Wenn nichts davon geht:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Formular erfolgreich<\/li>\n\n\n\n<li>Redirect auf neue Seite (z. B. \/danke\/)<\/li>\n\n\n\n<li>Auf dieser Seite Pageview-Tracking-Code verwenden<\/li>\n<\/ol>\n\n\n\n<p>Das ist die <strong>universellste L\u00f6sung<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. WordPress-spezifisches Tracking<\/h2>\n\n\n\n<p><strong>5.1 Men\u00fc-Klicktracking \u00fcber CSS-Klasse<\/strong><\/p>\n\n\n\n<p>WordPress-Men\u00fceintrag erh\u00e4lt z. B.:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTTP\" data-shcb-language-slug=\"http\"><span><code class=\"hljs language-http\"><span class=\"hljs-attribute\">CSS-Klasse<\/span>: neu-hier\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTTP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">http<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Tracking:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.neu-hier'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n    trackboxx(<span class=\"hljs-string\">'trackGoal'<\/span>, <span class=\"hljs-string\">'DEINE-ID'<\/span>);\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Automatischer Conversion Code Generator<\/h2>\n\n\n\n<div id=\"tbx-conversion-generator\" class=\"tbx-conversion-generator\">\n  <!-- Einleitung -->\n  <p class=\"tbx-intro\">\n    Mit diesem Tool erstellst du deinen individuellen Tracking-Code f\u00fcr Conversions. Gib deine Conversion-ID ein, w\u00e4hle den Event-Typ und kopiere den fertigen Code.\n  <\/p>\n\n  <!-- Schritt 1: Conversion-ID -->\n  <div class=\"tbx-section\">\n    <div class=\"tbx-step-header\">\n      <span class=\"tbx-step-badge\">1<\/span>\n      <h4 class=\"tbx-step-title\">Conversion-ID eingeben<\/h4>\n    <\/div>\n    <div class=\"tbx-step-content\">\n      <label for=\"tbx-goal-id\" class=\"tbx-label\">Deine Conversion-ID (Goal-ID)<\/label>\n      <input id=\"tbx-goal-id\" type=\"text\" class=\"tbx-input\" placeholder=\"z.B. PLEEVHNPRY\" maxlength=\"10\">\n      <p id=\"tbx-goal-id-error\" class=\"tbx-error\" style=\"display:none;\">\n        Die Conversion-ID muss genau 10 Zeichen lang sein und darf nur Gro\u00dfbuchstaben (A-Z) und Zahlen (0-9) enthalten.\n      <\/p>\n      <p id=\"tbx-goal-id-help\" class=\"tbx-help\">\n        Du findest deine Conversion-ID im Trackboxx-Dashboard unter \u201eConversions&#8220;.\n      <\/p>\n    <\/div>\n  <\/div>\n\n  <!-- Schritt 2: Event-Typ -->\n  <div class=\"tbx-section\">\n    <div class=\"tbx-step-header\">\n      <span class=\"tbx-step-badge\">2<\/span>\n      <h4 class=\"tbx-step-title\">Event-Typ w\u00e4hlen<\/h4>\n    <\/div>\n    <div class=\"tbx-step-content\">\n      <label for=\"tbx-event-type\" class=\"tbx-label\">Was m\u00f6chtest du tracken?<\/label>\n      <select id=\"tbx-event-type\" class=\"tbx-select\">\n        <option value=\"pageview\">Seitenaufruf (z. B. Danke-Seite)<\/option>\n        <option value=\"click\">Klick auf Button oder Link<\/option>\n        <option value=\"form\">Formular-Absenden<\/option>\n        <option value=\"custom\">Eigenes JavaScript-Event<\/option>\n      <\/select>\n    <\/div>\n  <\/div>\n\n  <!-- Schritt 3: Selektor-Definition (nur f\u00fcr Klick\/Formular) -->\n  <div id=\"tbx-selector-section\" class=\"tbx-section\" style=\"display:none;\">\n    <div class=\"tbx-step-header\">\n      <span class=\"tbx-step-badge\">3<\/span>\n      <h4 class=\"tbx-step-title\">Element ausw\u00e4hlen<\/h4>\n    <\/div>\n    <div class=\"tbx-step-content\">\n      <label for=\"tbx-selector-type\" class=\"tbx-label\">Wie m\u00f6chtest du das Element ansprechen?<\/label>\n      <select id=\"tbx-selector-type\" class=\"tbx-select\">\n        <option value=\"id\">ID<\/option>\n        <option value=\"class\">CSS-Klasse<\/option>\n        <option value=\"custom\">Eigener CSS-Selektor<\/option>\n      <\/select>\n\n      <label for=\"tbx-selector-value\" class=\"tbx-label tbx-label-spaced\">Name der ID \/ Klasse \/ Selektor<\/label>\n      <input id=\"tbx-selector-value\" type=\"text\" class=\"tbx-input\" placeholder=\"z.B. kontakt-button\">\n      <p class=\"tbx-help\">\n        Gib den Wert ohne <code>#<\/code> oder <code>.<\/code> ein. F\u00fcr eigene Selektoren kannst du komplette CSS-Selektoren verwenden.\n      <\/p>\n\n      <!-- Optionen f\u00fcr Klick-Events -->\n      <div id=\"tbx-click-options\" class=\"tbx-options-box\" style=\"display:none;\">\n        <div class=\"tbx-checkbox-row\">\n          <input type=\"checkbox\" id=\"tbx-redirect\" class=\"tbx-checkbox\">\n          <label for=\"tbx-redirect\" class=\"tbx-checkbox-label\">\n            Link leitet weiter <span class=\"tbx-checkbox-hint\">(externer Link, Download, Mailto, Tel, Affiliate etc.)<\/span>\n          <\/label>\n        <\/div>\n      <\/div>\n\n      <!-- Optionen f\u00fcr Formular-Events -->\n      <div id=\"tbx-form-options\" class=\"tbx-options-box\" style=\"display:none;\">\n        <div class=\"tbx-checkbox-row\">\n          <input type=\"checkbox\" id=\"tbx-form-delay\" class=\"tbx-checkbox\">\n          <label for=\"tbx-form-delay\" class=\"tbx-checkbox-label\">\n            Formular leitet sofort weiter <span class=\"tbx-checkbox-hint\">(Redirect nach Submit)<\/span>\n          <\/label>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Schritt 4: Code-Ausgabe -->\n  <div class=\"tbx-section tbx-section-output\">\n    <div class=\"tbx-step-header\">\n      <span class=\"tbx-step-badge\" id=\"tbx-output-step-badge\">3<\/span>\n      <h4 class=\"tbx-step-title\">Code generieren &#038; kopieren<\/h4>\n    <\/div>\n    <div class=\"tbx-step-content\">\n      <div class=\"tbx-output-options\">\n        <div class=\"tbx-checkbox-row\">\n          <input type=\"checkbox\" id=\"tbx-strip-comments\" class=\"tbx-checkbox\">\n          <label for=\"tbx-strip-comments\" class=\"tbx-checkbox-label\">Kommentare entfernen<\/label>\n        <\/div>\n      <\/div>\n\n      <div class=\"tbx-code-container\">\n        <div class=\"tbx-code-header\">\n          <span class=\"tbx-code-label\">Dein Tracking-Code<\/span>\n          <button id=\"tbx-copy-btn\" type=\"button\" class=\"tbx-button\">\n            <svg class=\"tbx-copy-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect>\n              <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path>\n            <\/svg>\n            <span id=\"tbx-copy-btn-text\">Code kopieren<\/span>\n          <\/button>\n        <\/div>\n        <pre class=\"tbx-code-block\"><code id=\"tbx-output-code\">\/\/ Bitte trage zuerst deine Conversion-ID ein.<\/code><\/pre>\n      <\/div>\n      <p class=\"tbx-help tbx-help-output\">\n        F\u00fcge den Code auf deiner Webseite ein \u2013 empfohlen: vor dem schlie\u00dfenden <code>&lt;\/body&gt;<\/code>-Tag.\n      <\/p>\n    <\/div>\n  <\/div>\n\n  <!-- Hinweise -->\n  <div class=\"tbx-info-box\">\n    <div class=\"tbx-info-icon\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n        <path d=\"M12 16v-4\"><\/path>\n        <path d=\"M12 8h.01\"><\/path>\n      <\/svg>\n    <\/div>\n    <div class=\"tbx-info-content\">\n      <p class=\"tbx-info-title\">Gut zu wissen<\/p>\n      <ul class=\"tbx-info-list\">\n        <li>Bei CSS-Klassen werden <strong>alle Elemente<\/strong> mit dieser Klasse getrackt.<\/li>\n        <li>Der Code ist kompatibel mit Page Buildern (Elementor, Divi, etc.).<\/li>\n        <li>Bei weiterleitenden Links die entsprechende Option aktivieren.<\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .tbx-conversion-generator {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    padding: 32px;\n    border-radius: 16px;\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    font-size: 14px;\n    color: #1e293b;\n    line-height: 1.6;\n    box-sizing: border-box;\n  }\n\n  .tbx-intro {\n    margin: 0 0 28px;\n    font-size: 15px;\n    color: #475569;\n    line-height: 1.7;\n  }\n\n  \/* Sektionen *\/\n  .tbx-section {\n    margin-bottom: 28px;\n    padding-bottom: 28px;\n    border-bottom: 1px solid #f1f5f9;\n  }\n\n  .tbx-section:last-of-type {\n    margin-bottom: 24px;\n  }\n\n  .tbx-section-output {\n    border-bottom: none;\n    padding-bottom: 0;\n  }\n\n  \/* Step Header mit Badge *\/\n  .tbx-step-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n  }\n\n  .tbx-step-badge {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 8px;\n    background: linear-gradient(90deg, #2563eb, #ec4899);\n    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n    color: #ffffff;\n    font-size: 13px;\n    font-weight: 600;\n    flex-shrink: 0;\n  }\n\n  .tbx-step-title {\n    margin: 0;\n    font-size: 14.5px;\n    font-weight: 600;\n    color: #0f172a;\n  }\n\n  .tbx-step-content {\n    padding-left: 40px;\n  }\n\n  \/* Labels & Inputs *\/\n  .tbx-label {\n    display: block;\n    margin-bottom: 6px;\n    font-weight: 500;\n    font-size: 13px;\n    color: #1e293b;\n  }\n\n  .tbx-label-spaced {\n    margin-top: 16px;\n  }\n\n  .tbx-input,\n  .tbx-select {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 10px 14px;\n    border-radius: 10px;\n    border: 1px solid #e2e8f0;\n    background: #f8fafc;\n    font-size: 14px;\n    color: #1e293b;\n    transition: all 0.15s ease;\n  }\n\n  .tbx-input:focus,\n  .tbx-select:focus {\n    outline: none;\n    border-color: #2563eb;\n    background: #ffffff;\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);\n  }\n\n  .tbx-input::placeholder {\n    color: #94a3b8;\n  }\n\n  .tbx-input.tbx-input-error {\n    border-color: #ef4444;\n    background: #fef2f2;\n  }\n\n  .tbx-input.tbx-input-error:focus {\n    border-color: #ef4444;\n    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);\n  }\n\n  .tbx-input.tbx-input-valid {\n    border-color: #22c55e;\n    background: #f0fdf4;\n  }\n\n  .tbx-input.tbx-input-valid:focus {\n    border-color: #22c55e;\n    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);\n  }\n\n  \/* Hilfe & Fehler *\/\n  .tbx-help {\n    margin: 8px 0 0;\n    font-size: 12px;\n    color: #475569;\n  }\n\n  .tbx-help code {\n    background: #f1f5f9;\n    padding: 1px 5px;\n    border-radius: 4px;\n    font-size: 11px;\n    color: #334155;\n  }\n\n  .tbx-help-output {\n    margin-top: 12px;\n  }\n\n  .tbx-error {\n    margin: 8px 0 0;\n    font-size: 12px;\n    color: #dc2626;\n    font-weight: 500;\n  }\n\n  \/* Options Box *\/\n  .tbx-options-box {\n    margin-top: 16px;\n    padding: 14px 16px;\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n  }\n\n  .tbx-output-options {\n    margin-bottom: 14px;\n  }\n\n  \/* Checkbox Styling *\/\n  .tbx-checkbox-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n  }\n\n  .tbx-checkbox {\n    width: 18px;\n    height: 18px;\n    margin: 0;\n    flex-shrink: 0;\n    cursor: pointer;\n    accent-color: #2563eb;\n  }\n\n  .tbx-checkbox-label {\n    font-size: 13px;\n    color: #1e293b;\n    font-weight: 500;\n    line-height: 1.4;\n    cursor: pointer;\n  }\n\n  .tbx-checkbox-hint {\n    font-weight: 400;\n    color: #64748b;\n  }\n\n  \/* Code Output *\/\n  .tbx-code-container {\n    border-radius: 12px;\n    overflow: hidden;\n    border: 1px solid #e2e8f0;\n  }\n\n  .tbx-code-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 14px;\n    background: #f8fafc;\n    border-bottom: 1px solid #e2e8f0;\n  }\n\n  .tbx-code-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #64748b;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .tbx-button {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 14px;\n    border-radius: 8px;\n    border: none;\n    cursor: pointer;\n    font-size: 12px;\n    font-weight: 600;\n    color: #ffffff;\n    background: linear-gradient(90deg, #2563eb, #ec4899);\n    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n    transition: all 0.15s ease;\n    white-space: nowrap;\n  }\n\n  .tbx-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);\n  }\n\n  .tbx-button:active {\n    transform: translateY(0);\n  }\n\n  .tbx-button.tbx-button-success {\n    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);\n  }\n\n  .tbx-copy-icon {\n    flex-shrink: 0;\n  }\n\n  .tbx-code-block {\n    margin: 0;\n    padding: 16px;\n    background: #0f172a;\n    color: #e2e8f0;\n    font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", Menlo, Monaco, monospace;\n    font-size: 12px;\n    line-height: 1.6;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    max-height: 320px;\n    overflow-y: auto;\n  }\n\n  \/* Info Box *\/\n  .tbx-info-box {\n    display: flex;\n    gap: 14px;\n    margin-top: 24px;\n    padding: 18px 20px;\n    background: #f0f9ff;\n    border: 1px solid #bae6fd;\n    border-radius: 12px;\n  }\n\n  .tbx-info-icon {\n    flex-shrink: 0;\n    color: #0284c7;\n  }\n\n  .tbx-info-content {\n    flex: 1;\n  }\n\n  .tbx-info-title {\n    margin: 0 0 10px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #0c4a6e;\n  }\n\n  .tbx-info-list {\n    margin: 0;\n    padding-left: 18px;\n    font-size: 14px;\n    color: #075985;\n    line-height: 1.7;\n  }\n\n  .tbx-info-list li {\n    margin-bottom: 6px;\n  }\n\n  .tbx-info-list li:last-child {\n    margin-bottom: 0;\n  }\n\n  .tbx-info-list strong {\n    font-weight: 600;\n  }\n\n  \/* Responsive *\/\n  @media (max-width: 640px) {\n    .tbx-conversion-generator {\n      padding: 24px 20px;\n      border-radius: 12px;\n    }\n\n    .tbx-step-content {\n      padding-left: 0;\n      margin-top: 12px;\n    }\n\n    .tbx-step-header {\n      margin-bottom: 0;\n    }\n\n    .tbx-code-header {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 10px;\n    }\n\n    .tbx-info-box {\n      flex-direction: column;\n      gap: 10px;\n    }\n  }\n<\/style>\n\n<script>\n(function() {\n  \/\/ Element-Referenzen\n  const el = {\n    goalInput: document.getElementById(\"tbx-goal-id\"),\n    goalError: document.getElementById(\"tbx-goal-id-error\"),\n    goalHelp: document.getElementById(\"tbx-goal-id-help\"),\n    eventType: document.getElementById(\"tbx-event-type\"),\n    selectorSection: document.getElementById(\"tbx-selector-section\"),\n    selectorType: document.getElementById(\"tbx-selector-type\"),\n    selectorValue: document.getElementById(\"tbx-selector-value\"),\n    clickOptions: document.getElementById(\"tbx-click-options\"),\n    formOptions: document.getElementById(\"tbx-form-options\"),\n    redirectCheckbox: document.getElementById(\"tbx-redirect\"),\n    formDelayCheckbox: document.getElementById(\"tbx-form-delay\"),\n    stripCommentsCheckbox: document.getElementById(\"tbx-strip-comments\"),\n    outputCode: document.getElementById(\"tbx-output-code\"),\n    outputStepBadge: document.getElementById(\"tbx-output-step-badge\"),\n    copyBtn: document.getElementById(\"tbx-copy-btn\"),\n    copyBtnText: document.getElementById(\"tbx-copy-btn-text\")\n  };\n\n  \/\/ Fehlermeldungen\n  const messages = {\n    noGoal: \"\/\/ Bitte trage zuerst deine Conversion-ID ein.\",\n    invalidGoal: \"\/\/ Ung\u00fcltige Conversion-ID. Format: 10 Zeichen (A-Z, 0-9).\",\n    noSelector: \"\/\/ Bitte gib einen Selektor an (z. B. ID oder Klasse).\"\n  };\n\n  \/\/ Goal-ID Validierung: Exakt 10 Zeichen, nur A-Z und 0-9\n  function isValidGoalId(id) {\n    return \/^[A-Z0-9]{10}$\/.test(id);\n  }\n\n  \/\/ CSS-Selektor aus Eingaben erstellen\n  function buildSelector() {\n    const type = el.selectorType.value;\n    const value = el.selectorValue.value.trim();\n    \n    if (!value) return null;\n    \n    if (type === \"id\") return \"#\" + value;\n    if (type === \"class\") return \".\" + value;\n    return value;\n  }\n\n  \/\/ Kommentare aus Code entfernen\n  function stripComments(code) {\n    \/\/ Einzeilige Kommentare entfernen (\/\/ ...)\n    let result = code.replace(\/^\\s*\\\/\\\/.*$\/gm, '');\n    \/\/ Mehrzeilige Kommentare entfernen (\/* ... *\/)\n    result = result.replace(\/\\\/\\*[\\s\\S]*?\\*\\\/\/g, '');\n    \/\/ Mehrfache Leerzeilen auf eine reduzieren\n    result = result.replace(\/\\n\\s*\\n\\s*\\n\/g, '\\n\\n');\n    \/\/ F\u00fchrende\/nachfolgende Leerzeilen in Script-Tags bereinigen\n    result = result.replace(\/<script>\\s*\\n\/g, '<script>\\n');\n    result = result.replace(\/\\n\\s*<\\\/script>\/g, '\\n<\\\/script>');\n    return result.trim();\n  }\n\n  \/\/ Hauptfunktion: Code generieren\n  function buildCode() {\n    const goalId = el.goalInput.value.trim().toUpperCase();\n    const eventType = el.eventType.value;\n    const shouldStripComments = el.stripCommentsCheckbox.checked;\n\n    \/\/ Keine ID eingegeben\n    if (!goalId) {\n      return messages.noGoal;\n    }\n\n    \/\/ Ung\u00fcltige ID\n    if (!isValidGoalId(goalId)) {\n      return messages.invalidGoal;\n    }\n\n    let code = \"\";\n\n    \/\/ === SEITENAUFRUF ===\n    if (eventType === \"pageview\") {\n      code = `<script>\n\/\/ Trackboxx Conversion: Seitenaufruf\n\/\/ Wird automatisch beim Laden der Seite ausgel\u00f6st\ndocument.addEventListener('DOMContentLoaded', function() {\n  trackboxx('trackGoal', '${goalId}');\n});\n<\\\/script>`;\n    }\n\n    \/\/ === CUSTOM EVENT ===\n    else if (eventType === \"custom\") {\n      code = `\/\/ Trackboxx Conversion: Eigenes Event\n\/\/ Rufe diese Funktion an der gew\u00fcnschten Stelle in deinem Code auf:\ntrackboxx('trackGoal', '${goalId}');`;\n    }\n\n    \/\/ F\u00fcr Klick und Formular: Selektor ben\u00f6tigt\n    else {\n      const selector = buildSelector();\n      if (!selector) {\n        return messages.noSelector;\n      }\n\n      \/\/ === KLICK-TRACKING ===\n      if (eventType === \"click\") {\n        const useRedirect = el.redirectCheckbox.checked;\n\n        if (useRedirect) {\n          code = `<script>\n\/\/ Trackboxx Conversion: Klick mit Weiterleitung\n\/\/ F\u00fcr externe Links, Downloads, Tel, Mailto, Affiliate-Links etc.\n\/\/ Kompatibel mit Page Buildern (Elementor, Divi, etc.)\ndocument.addEventListener('DOMContentLoaded', function() {\n  document.querySelectorAll('${selector}').forEach(function(wrapper) {\n    \/\/ Link im Element finden (Page Builder legen ID\/Klasse oft am Wrapper ab)\n    var link = wrapper.tagName === 'A' ? wrapper : wrapper.querySelector('a');\n    if (!link) return;\n    \n    link.addEventListener('click', function(e) {\n      e.preventDefault();\n      trackboxx('trackGoal', '${goalId}');\n      \n      var href = link.getAttribute('href');\n      \/\/ Kurze Verz\u00f6gerung damit das Tracking sicher gesendet wird\n      setTimeout(function() {\n        if (href) {\n          if (href.startsWith('tel:') || href.startsWith('mailto:')) {\n            window.location.href = href;\n          } else if (link.getAttribute('target') === '_blank') {\n            window.open(href, '_blank');\n          } else {\n            window.location.href = href;\n          }\n        }\n      }, 150);\n    });\n  });\n});\n<\\\/script>`;\n        } else {\n          code = `<script>\n\/\/ Trackboxx Conversion: Klick-Tracking\n\/\/ Trackt alle Elemente mit dem Selektor: ${selector}\n\/\/ Kompatibel mit Page Buildern (Elementor, Divi, etc.)\ndocument.addEventListener('DOMContentLoaded', function() {\n  document.querySelectorAll('${selector}').forEach(function(wrapper) {\n    \/\/ Klickbares Element finden (Link oder das Element selbst)\n    var clickTarget = wrapper.tagName === 'A' || wrapper.tagName === 'BUTTON' \n      ? wrapper \n      : (wrapper.querySelector('a') || wrapper.querySelector('button') || wrapper);\n    \n    clickTarget.addEventListener('click', function() {\n      trackboxx('trackGoal', '${goalId}');\n    });\n  });\n});\n<\\\/script>`;\n        }\n      }\n\n      \/\/ === FORMULAR-TRACKING ===\n      else if (eventType === \"form\") {\n        const useDelay = el.formDelayCheckbox.checked;\n\n        if (useDelay) {\n          code = `<script>\n\/\/ Trackboxx Conversion: Formular mit Weiterleitung\n\/\/ F\u00fcr Formulare die nach dem Submit direkt weiterleiten\ndocument.addEventListener('DOMContentLoaded', function() {\n  document.querySelectorAll('${selector}').forEach(function(element) {\n    \/\/ Formular finden (direkt oder als Kind-Element)\n    var form = element.tagName === 'FORM' ? element : element.querySelector('form');\n    if (!form) return;\n    \n    form.addEventListener('submit', function(e) {\n      e.preventDefault();\n      trackboxx('trackGoal', '${goalId}');\n      \n      \/\/ Kurze Verz\u00f6gerung damit das Tracking sicher gesendet wird\n      setTimeout(function() {\n        form.submit();\n      }, 150);\n    });\n  });\n});\n<\\\/script>`;\n        } else {\n          code = `<script>\n\/\/ Trackboxx Conversion: Formular-Tracking\n\/\/ Trackt alle Formulare mit dem Selektor: ${selector}\ndocument.addEventListener('DOMContentLoaded', function() {\n  document.querySelectorAll('${selector}').forEach(function(element) {\n    \/\/ Formular finden (direkt oder als Kind-Element)\n    var form = element.tagName === 'FORM' ? element : element.querySelector('form');\n    if (!form) return;\n    \n    form.addEventListener('submit', function() {\n      trackboxx('trackGoal', '${goalId}');\n    });\n  });\n});\n<\\\/script>`;\n        }\n      }\n    }\n\n    \/\/ Kommentare entfernen wenn gew\u00fcnscht\n    if (shouldStripComments && code && !code.startsWith(\"\/\/\")) {\n      code = stripComments(code);\n    }\n\n    return code || messages.noGoal;\n  }\n\n  \/\/ UI-Sichtbarkeit steuern\n  function updateVisibility() {\n    const eventType = el.eventType.value;\n\n    \/\/ Selektor-Sektion anzeigen\/verstecken\n    if (eventType === \"pageview\" || eventType === \"custom\") {\n      el.selectorSection.style.display = \"none\";\n      el.outputStepBadge.textContent = \"3\";\n    } else {\n      el.selectorSection.style.display = \"block\";\n      el.outputStepBadge.textContent = \"4\";\n    }\n\n    \/\/ Klick-Optionen\n    el.clickOptions.style.display = (eventType === \"click\") ? \"block\" : \"none\";\n    if (eventType !== \"click\") {\n      el.redirectCheckbox.checked = false;\n    }\n\n    \/\/ Formular-Optionen\n    el.formOptions.style.display = (eventType === \"form\") ? \"block\" : \"none\";\n    if (eventType !== \"form\") {\n      el.formDelayCheckbox.checked = false;\n    }\n  }\n\n  \/\/ Goal-ID Validierung mit visueller R\u00fcckmeldung\n  function validateGoalId() {\n    const value = el.goalInput.value.trim().toUpperCase();\n    \n    if (el.goalInput.value !== value) {\n      el.goalInput.value = value;\n    }\n\n    el.goalInput.classList.remove(\"tbx-input-error\", \"tbx-input-valid\");\n\n    if (!value) {\n      el.goalError.style.display = \"none\";\n      el.goalHelp.style.display = \"block\";\n    } else if (isValidGoalId(value)) {\n      el.goalInput.classList.add(\"tbx-input-valid\");\n      el.goalError.style.display = \"none\";\n      el.goalHelp.style.display = \"block\";\n    } else {\n      el.goalInput.classList.add(\"tbx-input-error\");\n      el.goalError.style.display = \"block\";\n      el.goalHelp.style.display = \"none\";\n    }\n  }\n\n  \/\/ Code-Ausgabe aktualisieren\n  function updateCode() {\n    el.outputCode.textContent = buildCode();\n    resetCopyButton();\n  }\n\n  \/\/ Copy-Button zur\u00fccksetzen\n  function resetCopyButton() {\n    el.copyBtn.classList.remove(\"tbx-button-success\");\n    el.copyBtnText.textContent = \"Code kopieren\";\n  }\n\n  \/\/ Code kopieren\n  function copyCode() {\n    const text = el.outputCode.textContent;\n    if (!text || text.startsWith(\"\/\/\")) {\n      return;\n    }\n\n    if (navigator.clipboard && navigator.clipboard.writeText) {\n      navigator.clipboard.writeText(text).then(function() {\n        showCopySuccess();\n      }).catch(function() {\n        fallbackCopy(text);\n      });\n    } else {\n      fallbackCopy(text);\n    }\n  }\n\n  \/\/ Erfolgs-Feedback\n  function showCopySuccess() {\n    el.copyBtn.classList.add(\"tbx-button-success\");\n    el.copyBtnText.textContent = \"Kopiert!\";\n    \n    setTimeout(function() {\n      resetCopyButton();\n    }, 2000);\n  }\n\n  \/\/ Fallback f\u00fcr \u00e4ltere Browser\n  function fallbackCopy(text) {\n    try {\n      const temp = document.createElement(\"textarea\");\n      temp.value = text;\n      temp.style.position = \"fixed\";\n      temp.style.left = \"-9999px\";\n      document.body.appendChild(temp);\n      temp.select();\n      document.execCommand(\"copy\");\n      document.body.removeChild(temp);\n      showCopySuccess();\n    } catch (e) {\n      console.error(\"Copy failed:\", e);\n    }\n  }\n\n  \/\/ Event-Listener\n  el.goalInput.addEventListener(\"input\", function() {\n    validateGoalId();\n    updateCode();\n  });\n\n  el.eventType.addEventListener(\"change\", function() {\n    updateVisibility();\n    updateCode();\n  });\n\n  el.selectorType.addEventListener(\"change\", updateCode);\n  el.selectorValue.addEventListener(\"input\", updateCode);\n  el.redirectCheckbox.addEventListener(\"change\", updateCode);\n  el.formDelayCheckbox.addEventListener(\"change\", updateCode);\n  el.stripCommentsCheckbox.addEventListener(\"change\", updateCode);\n  el.copyBtn.addEventListener(\"click\", copyCode);\n\n  \/\/ Initialisierung\n  updateVisibility();\n  updateCode();\n})();\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Weiterf\u00fchrende Artikel:<br><\/h4>\n\n\n\n<p><a href=\"https:\/\/trackboxx.com\/helpcenter\/ads-tracking-google-ads-meta-ads-etc\/\">Google Ads \/ Facebook Ads per UTM tracken<\/a>&nbsp;\u2013 in diesem Artikel zeigen wir dir wie du deine Paid Kampagnen bei Google oder auch Meta\/Facebook mit Trackboxx tracken und auswerten kannst.<\/p>\n","protected":false},"featured_media":0,"template":"","categories":[],"tags":[],"class_list":["post-4635","helpcenter","type-helpcenter","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter\/4635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter"}],"about":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/types\/helpcenter"}],"version-history":[{"count":3,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter\/4635\/revisions"}],"predecessor-version":[{"id":4726,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter\/4635\/revisions\/4726"}],"wp:attachment":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/media?parent=4635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/categories?post=4635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/tags?post=4635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}