Event-Klassen auf Kajabi

Wie Sie spezifische Elemente auf Ihrer Kajabi-Website kennzeichnen und ihnen Events zuweisen

Informationen zum Tracking von Events durch Zuweisung eines spezifischen Events zu einer bestimmten URL finden Sie in diesem Leitfaden.

Um spezifische Elemente auf Ihrer Website zu kennzeichnen, die Sie tracken möchten, folgen Sie dem untenstehenden Leitfaden.

So verwenden Sie Event-Klassen auf Kajabi

Fügen Sie die Klasse aus dem Klassen-Dokument dem jeweiligen Element in Kajabi hinzu. Die Methode hängt davon ab, welche Seitenvorlage Sie verwenden:

Option 1: Verwendung von benutzerdefinierten Code-Blöcken (Empfohlen)

Diese Methode funktioniert sowohl für Kajabi Pages als auch für Premier Legacy Templates und gibt Ihnen die volle Kontrolle über das Button-Tracking.

1. Öffnen Sie den Tab Website in Ihrem Dashboard

2. Wählen Sie Website Pages oder Landing Pages und öffnen Sie Ihre Seite im Editor

3. Navigieren Sie zum Seitenleisten-Panel und klicken Sie auf Add Content

4. Wählen Sie aus der Liste Custom Code aus

5. Fügen Sie in das Code-Feld Ihr benutzerdefiniertes Button-HTML mit der PixelFlow-Klasse ein:

   <button class="action-btn-lead-011-pf" type="button">
     Get Started
   </button>

6. Ersetzen Sie action-btn-lead-011-pf durch die entsprechende Klasse aus dem Klassen-Dokument

7. Klicken Sie auf Save, um Ihre Änderungen zu speichern

Option 2: Verwendung von benutzerdefiniertem Code in den Seiteneinstellungen (Fortgeschritten)

Wenn Sie Klassen zu bestehenden Kajabi-Buttons oder Elementen hinzufügen müssen, ohne diese zu ersetzen, können Sie JavaScript in Ihren Seiteneinstellungen verwenden:

1. Öffnen Sie Ihre Seite im Editor

2. Klicken Sie auf Settings (Zahnrad-Symbol)

3. Wählen Sie Custom Code

4. Fügen Sie im Abschnitt Custom Javascript Code hinzu, um bestehende Elemente anzusprechen und zu modifizieren:

   <script>
   document.addEventListener('DOMContentLoaded', function() {
     // Add class to a specific button by its text content
     var buttons = document.querySelectorAll('button');
     buttons.forEach(function(button) {
       if (button.textContent.includes('Subscribe')) {
         button.classList.add('action-btn-sub-002-pf');
       }
     });
   });
   </script>

5. Klicken Sie auf Save

Beispiel: Tracking eines Abonnieren-Buttons

Wenn Sie jedes Mal ein „Subscribe“-Event tracken möchten, wenn jemand auf einen bestimmten „Abonnieren“-Button auf Ihrer Kajabi-Seite klickt:

1. Suchen Sie die Subscribe-Klasse aus dem Klassen-Dokument: action-btn-sub-002-pf

2. Fügen Sie einen Custom Code Block zu Ihrer Seite hinzu (siehe Option 1 oben)

3. Fügen Sie dieses HTML in den Custom Code Block ein:

   <button class="action-btn-sub-002-pf" style="background-color: #007bff; color: white; padding: 12px 24px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
     Subscribe Now
   </button>

4. Klicken Sie auf Save und veröffentlichen Sie Ihre Seite

Tracking von Formularübermittlungen

Um Formularübermittlungen zu tracken und Benutzerdaten (Name, E-Mail, Telefon) in Kajabi zu erfassen, müssen Sie Klassen sowohl für den Formular-Container als auch für die einzelnen Eingabefelder mithilfe von benutzerdefiniertem HTML hinzufügen:

1. Fügen Sie einen Custom Code Block zu Ihrer Seite hinzu

2. Erstellen Sie ein benutzerdefiniertes Formular mit PixelFlow-Klassen:

   <form class="info-frm-cntr-pf">
     <input type="text" class="info-cust-fn-pf" placeholder="First Name">
     <input type="text" class="info-cust-ln-pf" placeholder="Last Name">
     <input type="email" class="info-cust-em-pf" placeholder="Email">
     <input type="tel" class="info-cust-ph-pf" placeholder="Phone">
     <button type="submit" class="action-btn-lead-011-pf">Submit</button>
   </form>

3. Gestalten Sie Ihr Formular mithilfe von Inline-CSS oder benutzerdefiniertem CSS in den Seiteneinstellungen

4. Speichern und veröffentlichen Sie Ihre Änderungen

Wo keine benutzerdefinierten Klassen hinzugefügt werden können

Aufgrund von Plattformbeschränkungen bei Kajabi gibt es bestimmte Bereiche, in denen Sie keine benutzerdefinierten PixelFlow-Klassen hinzufügen können:

• E-Mail-Kampagnen-Buttons – E-Mail-Buttons unterstützen keine benutzerdefinierten CSS-Klassen. Verwenden Sie stattdessen Event-URL-Tracking, indem Sie auf eine spezifische Dankesseite verlinken

• Native Kajabi-Formulare – Der integrierte Kajabi-Formular-Builder erlaubt keine benutzerdefinierten Klassen für Eingabefelder. Erstellen Sie stattdessen benutzerdefinierte HTML-Formulare

• Kurs-/Produkt-Lektionsblöcke (Classic Courses) – Eingeschränkte Anpassungsmöglichkeiten im klassischen Kurs-Builder

• Mobile App – Die mobile App von Kajabi unterstützt keine benutzerdefinierten CSS-Klassen

• Checkout-Seiten – Native Kajabi-Checkout-Elemente können keine benutzerdefinierten Klassen erhalten. Tracken Sie Käufe stattdessen über Event-URL-Tracking auf der Dankesseite

Überprüfung Ihrer Einrichtung

Nachdem Sie Klassen zu Ihren Elementen hinzugefügt haben:

1. Veröffentlichen Sie Ihre Seite und rufen Sie diese auf der Live-Website auf (nicht im Vorschaumodus)

2. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie Untersuchen oder Element untersuchen

3. Überprüfen Sie in den Entwicklertools, ob die PixelFlow-Klasse im HTML-Code dieses Elements erscheint

4. Testen Sie das Tracking, indem Sie das Event auslösen (Button klicken, Formular absenden usw.)

5. Prüfen Sie Ihr PixelFlow-Dashboard, um zu bestätigen, dass das Event erfasst wurde

Häufige Probleme und Lösungen

Custom Code Block wird nicht angezeigt

• Überprüfen Sie, ob Sie nach dem Hinzufügen des Codes auf Save geklickt haben

• Stellen Sie sicher, dass Ihr HTML korrekt formatiert ist (alle Tags sind geschlossen)

• Prüfen Sie, ob Sie die Seite veröffentlicht und nicht nur als Entwurf gespeichert haben

• Versuchen Sie, Ihren Browser-Cache zu leeren und die Seite neu zu laden

Events werden nicht im PixelFlow-Dashboard getrackt

• Überprüfen Sie, ob das PixelFlow-Skript korrekt im Abschnitt Page Scripts von Kajabi installiert ist (siehe Kajabi-Einrichtungsanleitung)

• Bestätigen Sie, dass Sie den exakten Klassennamen aus dem Klassen-Dokument verwenden

• Stellen Sie sicher, dass die Klasse dem anklickbaren Element (Button, Link) hinzugefügt wurde und nicht einem umhüllenden Div-Container

• Prüfen Sie Ihre Browser-Konsole auf JavaScript-Fehler, die das Tracking verhindern könnten

• Stellen Sie sicher, dass Sie die live veröffentlichte Seite ansehen und keine Vorschau

Formulardaten werden nicht erfasst

• Stellen Sie sicher, dass info-frm-cntr-pf zum Formular-Container (dem <form>-Tag) hinzugefügt wurde

• Überprüfen Sie, ob die Klassen für Eingabefelder zu den tatsächlichen <input>-Elementen hinzugefügt wurden

• Stellen Sie sicher, dass das Formular mit benutzerdefiniertem HTML in einem Custom Code Block erstellt wurde und nicht mit Kajabis nativem Formular-Builder

• Bestätigen Sie, dass alle Eingabeelemente die korrekten Typ-Attribute haben (type="email", type="tel", etc.)

JavaScript-Methode funktioniert nicht

• Überprüfen Sie, ob der Skript-Code im Bereich Seiteneinstellungen → Custom Code → Custom Javascript platziert ist

• Prüfen Sie die Browser-Konsole auf JavaScript-Fehler

• Stellen Sie sicher, dass Ihr Selektor die korrekten Elemente anspricht (testen Sie dies mit console.log)

• Stellen Sie sicher, dass der DOMContentLoaded Event-Listener Ihren Code umschließt

Alternative: Event-URL-Tracking

Falls das Hinzufügen benutzerdefinierter Klassen zu komplex ist oder für Ihren Anwendungsfall nicht funktioniert, ziehen Sie stattdessen das Event-URL-Tracking in Betracht. Diese Methode trackt Events, wenn Benutzer auf bestimmten Seiten landen, was gut funktioniert für:

• Dankesseiten nach Formularübermittlungen

• Kaufbestätigungsseiten

• Registrierungsbestätigungsseiten

• Webinar-Anmeldebestätigungen

Nächste Schritte

• Sehen Sie sich die vollständige Liste der verfügbaren Klassen im Klassen-Dokument an

• Erfahren Sie mehr über das Tracking von Events über URLs als alternative Methode

• Überprüfen Sie die Kajabi-Einrichtungsanleitung, um Ihre PixelFlow-Installation zu verifizieren