Event-Klassen auf Kajabi

So kennzeichnen Sie spezifische Elemente auf Ihrer Kajabi-Website und weisen ihnen Events zu

Informationen zum Tracking von Events durch Zuweisung eines speziellen Events zu einer bestimmten URL finden Sie in dieser Anleitung.

Befolgen Sie die untenstehende Anleitung, um bestimmte Elemente auf Ihrer Website zu markieren, die Sie tracken möchten.

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 Custom Code-Blöcken (Empfohlen)

Diese Methode funktioniert sowohl für Kajabi-Seiten als auch für Premier Legacy-Vorlagen 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 im Feld "Code" 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 Custom 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 vorhandene 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 ein „Abonnieren“-Event (Subscribe) jedes Mal tracken möchten, wenn jemand auf einen bestimmten „Abonnieren“-Button auf Ihrer Kajabi-Seite klickt:

1. Suchen Sie die Subscribe-Klasse im 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 mithilfe von benutzerdefiniertem HTML Klassen sowohl zum Formular-Container als auch zu den einzelnen Eingabefeldern 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 mit Inline-CSS oder benutzerdefiniertem CSS in den Seiteneinstellungen

4. Speichern und veröffentlichen Sie Ihre Änderungen

Bereiche, in denen 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 das Event-URL-Tracking, indem Sie auf eine spezifische Dankesseite verlinken

• Native Kajabi-Formulare – Der integrierte Formular-Builder von Kajabi 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 – Nativen Kajabi-Checkout-Elementen können keine benutzerdefinierten Klassen hinzugefügt werden. Tracken Sie Käufe stattdessen über das Event-URL-Tracking auf der Dankesseite

Überprüfung Ihres Setups

Nachdem Sie die Klassen zu Ihren Elementen hinzugefügt haben:

1. Veröffentlichen Sie Ihre Seite und besuchen Sie diese auf der Live-Website (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 für dieses Element erscheint

4. Testen Sie das Tracking, indem Sie das Event auslösen (Klicken des Buttons, Absenden des Formulars usw.)

5. Überprü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 benutzerdefinierten 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 haben und nicht nur als Entwurf gespeichert haben

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

Events werden im PixelFlow-Dashboard nicht getrackt

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

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

• Stellen Sie sicher, dass die Klasse zum anklickbaren Element (Button, Link) hinzugefügt wurde und nicht zu einem umschließenden Div

• 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 betrachten, nicht eine 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 den tatsächlichen <input>-Elementen hinzugefügt wurden

• Prüfen Sie, ob das Formular mittels benutzerdefiniertem HTML in einem Custom Code-Block erstellt wurde und nicht mit dem nativen Formular-Builder von Kajabi

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

JavaScript-Methode funktioniert nicht

• Überprüfen Sie, ob das Skript 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 richtigen Elemente anspricht (testen Sie dies mit console.log)

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

Alternative: Event-URL-Tracking

Wenn 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

• Seiten nach erfolgreicher Registrierung

• Bestätigungen für Webinar-Anmeldungen

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

• Gehen Sie die Kajabi Setup-Anleitung durch, um Ihre PixelFlow-Installation zu überprüfen