Event Classes on Kajabi

How to tag specific elements on your Kajabi website and assign events to them

For information on how to track events by assigning a specific event to a particular URL, follow this guide.

To tag specific elements on your website that you'd like to track, follow the guide below.

How to Use Event Classes on Kajabi

Add the class from the Classes Document to the particular element in Kajabi. The method depends on which page template you're using:

Option 1: Using Custom Code Blocks (Recommended)

This method works for both Kajabi Pages and Premier Legacy Templates and gives you full control over button tracking.

1. Open the Website tab from your Dashboard

2. Select Website Pages or Landing Pages and open your page in the editor

3. Navigate to the sidebar panel and click Add Content

4. From the list, select Custom Code

5. In the Code field, paste your custom button HTML with the PixelFlow class:

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

6. Replace action-btn-lead-011-pf with the appropriate class from the Classes Document

7. Click Save to keep your changes

Option 2: Using Page Settings Custom Code (Advanced)

If you need to add classes to existing Kajabi buttons or elements without replacing them, you can use JavaScript in your Page Settings:

1. Open your page in the editor

2. Click Settings (gear icon)

3. Select Custom Code

4. In the Custom Javascript section, add code to target and modify existing elements:

   <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. Click Save

Example: Tracking a Subscribe Button

If you want to track a "Subscribe" event every time someone clicks a specific "Subscribe" button on your Kajabi page:

1. Find the Subscribe class from the Classes Document: action-btn-sub-002-pf

2. Add a Custom Code Block to your page (see Option 1 above)

3. Paste this HTML into the Custom Code Block:

   <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. Click Save and publish your page

Tracking Form Submissions

To track form submissions and capture user data (name, email, phone) in Kajabi, you'll need to add classes to both the form container and individual input fields using custom HTML:

1. Add a Custom Code Block to your page

2. Create a custom form with PixelFlow classes:

   <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. Style your form using inline CSS or Page Settings custom CSS

4. Save and publish your changes

Where Custom Classes Cannot Be Added

Due to Kajabi's platform limitations, there are certain areas where you cannot add custom PixelFlow classes:

• Email Campaign Buttons - Email buttons do not support custom CSS classes. Use Event URL tracking instead by linking to a specific thank-you page

• Native Kajabi Forms - The built-in Kajabi form builder doesn't allow custom classes on input fields. Create custom HTML forms instead

• Course/Product Lesson Blocks (Classic Courses) - Limited customization options in the classic course builder

• Mobile App - The Kajabi mobile app does not support custom CSS classes

• Checkout Pages - Native Kajabi checkout elements cannot have custom classes added. Track purchases using Event URL tracking on the thank-you page instead

Verifying Your Setup

After adding classes to your elements:

1. Publish your page and visit it on the live website (not in preview mode)

2. Right-click the element and select Inspect or Inspect Element

3. In the developer tools, verify that the PixelFlow class appears in the HTML code for that element

4. Test the tracking by triggering the event (clicking the button, submitting the form, etc.)

5. Check your PixelFlow dashboard to confirm the event was captured

Common Issues and Solutions

Custom Code Block Not Displaying

• Verify you clicked Save after adding the custom code

• Make sure your HTML is properly formatted (all tags are closed)

• Check that you published the page, not just saved it as a draft

• Try clearing your browser cache and reloading the page

Events Not Tracking in PixelFlow Dashboard

• Verify the PixelFlow script is installed correctly in Kajabi's Page Scripts section (check the Kajabi Setup guide)

• Confirm you're using the exact class name from the Classes Document

• Make sure the class is added to the clickable element (button, link) not a wrapper div

• Check your browser console for JavaScript errors that might prevent tracking

• Ensure you're viewing the live published page, not a preview

Form Data Not Being Captured

• Ensure info-frm-cntr-pf is added to the form container (the <form> tag)

• Verify input field classes are added to the actual <input> elements

• Check that the form is created using custom HTML in a Custom Code Block, not Kajabi's native form builder

• Confirm all input elements have the correct type attributes (type="email", type="tel", etc.)

JavaScript Method Not Working

• Verify the script is placed in Page Settings → Custom Code → Custom Javascript section

• Check browser console for JavaScript errors

• Ensure your selector is targeting the correct elements (test with console.log)

• Make sure the DOMContentLoaded event listener is wrapping your code

Alternative: Event URL Tracking

If adding custom classes proves too complex or isn't working for your use case, consider using Event URL tracking instead. This method tracks events when users land on specific pages, which works well for:

• Thank-you pages after form submissions

• Purchase confirmation pages

• Registration success pages

• Webinar registration confirmations

What's Next

• View the complete list of available classes in the Classes Document

• Learn about tracking events via URLs as an alternative method

• Review the Kajabi Setup guide to verify your PixelFlow installation