Pixelflow
Instrucciones específicas por plataforma

Clases de Eventos en Framer

Recommended: Visual Tagger

Recomendamos usar el Etiquetador Visual como una opción más sencilla para configurar el seguimiento; tiene la misma funcionalidad de seguimiento en un widget simple.

Click here to learn more about the visual tagger

Esta guía explica cómo etiquetar elementos en tu sitio web de Framer con una "clase" que permite a PixelFlow rastrear ese elemento, sección o datos específicos para activar o enviar junto con un evento a Meta.

Nota: Hemos lanzado una experiencia de seguimiento más fluida para Framer mediante el uso del Etiquetador Visual, un widget que se carga en tu sitio web de Framer y te permite hacer clic en cualquier elemento y etiquetarlo con un evento. Lee más información aquí.

Cómo usar el Seguimiento por Clase en Framer

Añade la clase del Documento de Clases a los elementos usando la función de Code Overrides de Framer.

Antes de hacer esto por primera vez, sigue los pasos en "Configuración inicial para Clases de Eventos en Framer" a continuación, y luego sigue los pasos posteriores.

Debes seguir las instrucciones de "Configuración inicial" a continuación antes de poder usar esto; haz clic para expandir la sección de abajo.

IMPORTANTE: Configuración inicial para el Seguimiento por Clase en Framer

Solo necesitas crear este archivo una vez. Después de crearlo, puedes reutilizarlo para todos los elementos que quieras rastrear en tu sitio de Framer.

Antes de poder usar el seguimiento basado en clases en Framer, debes seguir estos pasos por única vez.

  1. En Framer Designer, haz clic en cualquier elemento que quieras rastrear

  2. En el panel derecho, desplázate hacia abajo hasta la sección Code Overrides y expándela

El panel derecho de Framer Designer que muestra la sección Code Overrides expandida con el menú desplegable de archivos visible

  1. En el campo file, haz clic en el menú desplegable, selecciona New file, nombra tu anulación (por ejemplo, PixelFlowClasses) y haz clic en Create

    Panel de Code Overrides de Framer Designer que muestra el menú desplegable con la opción New file seleccionada para crear un archivo de anulación de código

  2. Elimina el contenido que crea y reemplázalo con el siguiente código (IMPORTANTE: presiona el botón de copiar o expándelo y selecciónalo todo)

    import type { ComponentType } from 'react';
export function AddPaymentInfo(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-pymt-001-pf')
			: (props.className = 'action-btn-pymt-001-pf');
		return <Component {...props} />;
	};
}

export function Subscribe(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-sub-002-pf')
			: (props.className = 'action-btn-sub-002-pf');
		return <Component {...props} />;
	};
}

export function Contact(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-cntct-003-pf')
			: (props.className = 'action-btn-cntct-003-pf');
		return <Component {...props} />;
	};
}

export function InitiateCheckout(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-buy-004-pf')
			: (props.className = 'action-btn-buy-004-pf');
		return <Component {...props} />;
	};
}

export function AddToCart(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-cart-005-pf')
			: (props.className = 'action-btn-cart-005-pf');
		return <Component {...props} />;
	};
}

export function AddToWishlist(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-wl-006-pf')
			: (props.className = 'action-btn-wl-006-pf');
		return <Component {...props} />;
	};
}

export function CompleteRegistration(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-reg-007-pf')
			: (props.className = 'action-btn-reg-007-pf');
		return <Component {...props} />;
	};
}

export function CustomizeProduct(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-cstm-008-pf')
			: (props.className = 'action-btn-cstm-008-pf');
		return <Component {...props} />;
	};
}

export function Donate(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-don-009-pf')
			: (props.className = 'action-btn-don-009-pf');
		return <Component {...props} />;
	};
}

export function Lead(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-lead-011-pf')
			: (props.className = 'action-btn-lead-011-pf');
		return <Component {...props} />;
	};
}

export function StartTrial(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-trial-012-pf')
			: (props.className = 'action-btn-trial-012-pf');
		return <Component {...props} />;
	};
}

export function SubmitApplication(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-submit-013-pf')
			: (props.className = 'action-btn-submit-013-pf');
		return <Component {...props} />;
	};
}

export function SearchInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-inpt-srch-014-pf')
			: (props.className = 'action-inpt-srch-014-pf');
		return <Component {...props} />;
	};
}

export function SearchButton(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-srch-015-pf')
			: (props.className = 'action-btn-srch-015-pf');
		return <Component {...props} />;
	};
}

export function FindLocationInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-inpt-loc-016-pf')
			: (props.className = 'action-inpt-loc-016-pf');
		return <Component {...props} />;
	};
}

export function FindLocationButton(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-loc-017-pf')
			: (props.className = 'action-btn-loc-017-pf');
		return <Component {...props} />;
	};
}

export function Purchase(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-plc-ord-018-pf')
			: (props.className = 'action-btn-plc-ord-018-pf');
		return <Component {...props} />;
	};
}

export function ViewContent(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-vc-019-pf')
			: (props.className = 'action-btn-vc-019-pf');
		return <Component {...props} />;
	};
}

export function ProductsListContainer(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-chk-itm-ctnr-pf')
			: (props.className = 'info-chk-itm-ctnr-pf');
		return <Component {...props} />;
	};
}

export function ProductsListTotalPrice(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-totl-amt-pf')
			: (props.className = 'info-totl-amt-pf');
		return <Component {...props} />;
	};
}

export function ProductContainer(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-chk-itm-pf')
			: (props.className = 'info-chk-itm-pf');
		return <Component {...props} />;
	};
}

export function ProductId(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-itm-id-pf')
			: (props.className = 'info-itm-id-pf');
		return <Component {...props} />;
	};
}

export function ProductPrice(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-itm-prc-pf')
			: (props.className = 'info-itm-prc-pf');
		return <Component {...props} />;
	};
}

export function ProductQuantity(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-itm-qnty-pf')
			: (props.className = 'info-itm-qnty-pf');
		return <Component {...props} />;
	};
}

export function FormContainer(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-frm-cntr-pf')
			: (props.className = 'info-frm-cntr-pf');
		return <Component {...props} />;
	};
}

export function FormValueOrPrice(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-val-pf')
			: (props.className = 'info-val-pf');
		return <Component {...props} />;
	};
}

export function FormFullNameInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-full-name-pf')
			: (props.className = 'info-cust-full-name-pf');
		return <Component {...props} />;
	};
}

export function FormFirstNameInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-fn-pf')
			: (props.className = 'info-cust-fn-pf');
		return <Component {...props} />;
	};
}

export function FormLastNameInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-ln-pf')
			: (props.className = 'info-cust-ln-pf');
		return <Component {...props} />;
	};
}

export function FormEmailInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-em-pf')
			: (props.className = 'info-cust-em-pf');
		return <Component {...props} />;
	};
}

export function FormPhoneInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-ph-pf')
			: (props.className = 'info-cust-ph-pf');
		return <Component {...props} />;
	};
}

export function FormSearchLocationInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-srch-ctnr-pf')
			: (props.className = 'info-srch-ctnr-pf');
		return <Component {...props} />;
	};
}

Aplicar Clases de Eventos a Elementos

  1. Haz clic en el elemento que quieras rastrear en Framer Designer

  2. En la sección Code Overrides, selecciona tu archivo creado (por ejemplo, PixelFlowClasses) en el campo file

  3. Usa el Documento de Clases para encontrar qué clase corresponde al evento que quieres rastrear

  4. Haz clic en el campo Override en Framer Designer y selecciona la clase adecuada del menú desplegable (por ejemplo, AddPaymentInfo o Subscribe)

  5. Una vez hecho esto, publica tu sitio web para aplicar los cambios

Asegúrate de publicar tu sitio de Framer después de añadir las clases de eventos. Los cambios no surtirán efecto hasta que el sitio esté publicado.

Activar un evento desde un botón en Framer

Animación que muestra cómo añadir una clase de evento Subscribe a un botón en Framer usando Code Overrides, con la clase apareciendo en el sitio publicado

Si quieres rastrear un evento de "Lead" cada vez que alguien haga clic en un botón específico de "Start Trial" en tu sitio web de Framer:

  1. Haz clic en tu botón de Suscribirse en Framer Designer

  2. En la sección Code Overrides, selecciona tu archivo PixelFlowClasses

  3. En el menú desplegable Override, selecciona Subscribe

  4. Publica tu sitio web

Una vez publicado, PixelFlow rastreará automáticamente los eventos Subscribe cada vez que los usuarios hagan clic en ese botón y enviará los datos a Meta.

Activar un evento desde un formulario en Framer

Animación que demuestra cómo añadir FormContainer y anulaciones de extracción de datos a elementos de formulario en Framer para capturar envíos de formularios con datos de usuario

Para rastrear envíos de formularios, activar un evento y capturar datos de usuario (nombre, correo electrónico, teléfono), debes añadir anulaciones tanto al contenedor del formulario como a los campos de entrada individuales:

  1. Añade la anulación FormContainer a tu elemento contenedor de formulario

  2. Añade la anulación de acción correspondiente a tu botón de envío (por ejemplo, Lead para un evento de Lead)

  3. Añade anulaciones de extracción de datos a tus campos de entrada:

    • FormNameInput para el campo de nombre

    • FormEmailInput para el campo de correo electrónico

    • FormPhoneInput para el campo de teléfono

    • FormLastNameInput para el campo de apellido

Verificar tu configuración

Después de añadir las anulaciones a tus elementos y publicar:

  1. Visita tu página en el sitio web publicado (no en modo de vista previa)

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

  3. En las herramientas de desarrollador, 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. Check your PixelFlow event logs to confirm the event was captured

Problemas comunes y soluciones

Se activan múltiples eventos

  • Si no añadiste el elemento "contenedor" (FormContainer) a tu formulario general, se pueden activar múltiples eventos al hacer clic en el botón. Asegúrate de haber añadido FormContainer

La anulación no aparece en el menú desplegable

  • Asegúrate de haber creado el archivo de anulación y haber pegado el código completo

  • Verifica que el código no tenga errores de sintaxis

  • Prueba a refrescar Framer Designer o a cerrar y volver a abrir el proyecto

Los eventos no se registran en el panel de PixelFlow

  • Verifica que el script de PixelFlow esté instalado correctamente (consulta la guía de configuración de Framer)

  • Confirma que publicaste tu sitio después de añadir las anulaciones

  • Asegúrate de haber seleccionado la anulación correcta del menú desplegable

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

No se capturan los datos del formulario

  • Asegúrate de que la anulación FormContainer se haya añadido al elemento contenedor del formulario

  • Verifica que las anulaciones de los campos de entrada se añadan a los elementos de entrada reales, no a las etiquetas o contenedores

  • Asegúrate de que los nombres de las anulaciones coincidan exactamente con lo que aparece en el archivo de código

¿Te fue útil?
¿Te fue útil?