Clases de eventos en Kajabi

Cómo etiquetar elementos específicos en tu sitio web de Kajabi y asignarles eventos

Para obtener información sobre cómo realizar el seguimiento de eventos asignando un evento específico a una URL particular, sigue esta guía.

Para etiquetar elementos específicos en tu sitio web que te gustaría rastrear, sigue la guía a continuación.

Cómo usar clases de eventos en Kajabi

Agrega la clase del Documento de Clases al elemento particular en Kajabi. El método depende de la plantilla de página que estés utilizando:

Opción 1: Uso de bloques de código personalizados (Recomendado)

Este método funciona tanto para las páginas de Kajabi como para las plantillas Premier heredadas (Legacy) y te brinda un control total sobre el seguimiento de los botones.

1. Abre la pestaña Website desde tu Panel de Control

2. Selecciona Website Pages o Landing Pages y abre tu página en el editor

3. Navega al panel de la barra lateral y haz clic en Add Content

4. De la lista, selecciona Custom Code

5. En el campo de Código, pega el HTML de tu botón personalizado con la clase PixelFlow:

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

6. Reemplaza action-btn-lead-011-pf con la clase adecuada del Documento de Clases

7. Haz clic en Save para guardar tus cambios

Opción 2: Uso del código personalizado en la configuración de la página (Avanzado)

Si necesitas agregar clases a botones o elementos existentes de Kajabi sin reemplazarlos, puedes usar JavaScript en la Configuración de tu página:

1. Abre tu página en el editor

2. Haz clic en Settings (icono de engranaje)

3. Selecciona Custom Code

4. En la sección Custom Javascript, agrega código para apuntar y modificar elementos existentes:

   <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. Haz clic en Save

Ejemplo: Seguimiento de un botón de suscripción

Si deseas rastrear un evento de "Suscripción" cada vez que alguien haga clic en un botón de "Suscribirse" específico en tu página de Kajabi:

1. Busca la clase de suscripción en el Documento de Clases: action-btn-sub-002-pf

2. Agrega un bloque de código personalizado a tu página (ver Opción 1 arriba)

3. Pega este HTML en el bloque de código personalizado:

   <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. Haz clic en Save y publica tu página

Seguimiento de envíos de formularios

Para rastrear los envíos de formularios y capturar datos de usuario (nombre, correo electrónico, teléfono) en Kajabi, deberás agregar clases tanto al contenedor del formulario como a los campos de entrada individuales utilizando HTML personalizado:

1. Agrega un bloque de código personalizado a tu página

2. Crea un formulario personalizado con clases de PixelFlow:

   <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. Dale estilo a tu formulario usando CSS en línea o el CSS personalizado de la configuración de la página

4. Guarda y publica tus cambios

Donde no se pueden agregar clases personalizadas

Debido a las limitaciones de la plataforma de Kajabi, existen ciertas áreas donde no se pueden agregar clases personalizadas de PixelFlow:

• Botones de campañas de correo electrónico: Los botones de correo no admiten clases CSS personalizadas. Usa el seguimiento de URL de eventos en su lugar, enlazando a una página de agradecimiento específica

• Formularios nativos de Kajabi: El constructor de formularios integrado de Kajabi no permite clases personalizadas en los campos de entrada. Crea formularios HTML personalizados en su lugar

• Bloques de lecciones de Cursos/Productos (Cursos Clásicos): Opciones de personalización limitadas en el constructor de cursos clásicos

• Aplicación móvil: La aplicación móvil de Kajabi no admite clases CSS personalizadas

• Páginas de pago (Checkout): Los elementos nativos de pago de Kajabi no permiten añadir clases personalizadas. Rastrea las compras usando el seguimiento de URL de eventos en la página de agradecimiento

Verificación de tu configuración

Después de agregar las clases a tus elementos:

1. Publica tu página y visítala en el sitio web en vivo (no en modo de vista previa)

2. Haz clic derecho en el elemento y selecciona Inspeccionar o Inspeccionar elemento

3. En las herramientas para desarrolladores, verifica que la clase de PixelFlow aparezca en el código HTML de ese elemento

4. Prueba el seguimiento activando el evento (haciendo clic en el botón, enviando el formulario, etc.)

5. Revisa tu panel de PixelFlow para confirmar que el evento fue capturado

Problemas comunes y soluciones

El bloque de código personalizado no se muestra

• Verifica que hiciste clic en Save después de agregar el código personalizado

• Asegúrate de que tu HTML esté correctamente formateado (que todas las etiquetas estén cerradas)

• Comprueba que publicaste la página y no solo la guardaste como borrador

• Intenta borrar el caché de tu navegador y recargar la página

Los eventos no se rastrean en el panel de PixelFlow

• Verifica que el script de PixelFlow esté instalado correctamente en la sección Page Scripts de Kajabi (consulta la guía de configuración de Kajabi)

• Confirma que estás usando el nombre exacto de la clase del Documento de Clases

• Asegúrate de que la clase se haya agregado al elemento en el que se puede hacer clic (botón, enlace) y no a un div contenedor

• Revisa la consola de tu navegador para ver si hay errores de JavaScript que puedan impedir el seguimiento

• Asegúrate de que estás viendo la página publicada en vivo, no una vista previa

No se capturan los datos del formulario

• Asegúrate de que info-frm-cntr-pf esté agregado al contenedor del formulario (la etiqueta <form>)

• Verifica que las clases de los campos de entrada se hayan agregado a los elementos <input> reales

• Confirma que el formulario se haya creado con HTML personalizado en un bloque de código, no con el constructor nativo de Kajabi

• Confirma que todos los elementos de entrada tengan los atributos de tipo correctos (type="email", type="tel", etc.)

El método de JavaScript no funciona

• Verifica que el script esté colocado en Page Settings → Custom Code → sección Custom Javascript

• Revisa la consola del navegador para ver si hay errores de JavaScript

• Asegúrate de que tu selector esté apuntando a los elementos correctos (prueba con console.log)

• Asegúrate de que el detector de eventos DOMContentLoaded esté envolviendo tu código

Alternativa: Seguimiento de URL de eventos

Si agregar clases personalizadas resulta demasiado complejo o no funciona para tu caso de uso, considera usar el seguimiento de URL de eventos en su lugar. Este método rastrea eventos cuando los usuarios aterrizan en páginas específicas, lo cual funciona bien para:

• Páginas de agradecimiento después de enviar un formulario

• Páginas de confirmación de compra

• Páginas de éxito de registro

• Confirmaciones de registro a seminarios web (webinars)

Qué sigue

• Mira la lista completa de clases disponibles en el Documento de Clases

• Aprende sobre el seguimiento de eventos a través de URLs como método alternativo

• Revisa la guía de configuración de Kajabi para verificar tu instalación de PixelFlow