Instrucciones específicas por plataforma

Clases de eventos en Framer

Recommended: Visual Tagger

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

Click here to learn more about the visual tagger

Esta guía explica cómo etiquetar elementos en su sitio web de Framer con una "clase" que permite a PixelFlow rastrear ese elemento, sección o dato en particular para activarlo o enviarlo junto con un evento a Meta.

Nota: Hemos lanzado una experiencia de seguimiento más fluida para Framer utilizando el Visual Tagger, un widget que se carga en su sitio web de Framer y le permite hacer clic en cualquier elemento y etiquetarlo con un evento. Lea más información aquí.

Cómo usar el seguimiento por clases en Framer

Añada la clase desde el Documento de Clases a los elementos utilizando la función Code Overrides de Framer.

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

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

IMPORTANTE: Configuración inicial para el seguimiento por clases en Framer

Solo necesita crear este archivo una vez. Una vez creado, puede reutilizarlo para todos los elementos que desee rastrear en su sitio de Framer.

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

En el Framer Designer, haga clic en cualquier elemento que desee rastrear
En el panel derecho, desplácese hacia abajo hasta la sección Code Overrides y expándala

En el campo file, haga clic en el menú desplegable, seleccione New file, asigne un nombre a su override (ej. PixelFlowClasses) y haga clic en Create

Elimine el contenido que crea y reemplácelo con el siguiente código (IMPORTANTE: presione el botón de copiar o expándalo y selecciónelo 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 los elementos

Haga clic en el elemento que desea rastrear en Framer Designer
En la sección Code Overrides, seleccione el archivo que creó (ej. PixelFlowClasses) en el campo file
Use el Documento de Clases para encontrar qué clase corresponde al evento que desea rastrear
Haga clic en el campo Override en Framer Designer y seleccione la clase apropiada del menú desplegable (ej. AddPaymentInfo o Subscribe)
Una vez terminado, publique su sitio web para aplicar los cambios

Asegúrese de publicar su sitio de Framer después de agregar clases de eventos. Los cambios no surtirán efecto hasta que el sitio esté en línea.

Activar un evento desde un botón en Framer

Si desea rastrear un evento de "Lead" cada vez que alguien haga clic en un botón específico de "Iniciar prueba" en su sitio web de Framer:

Haga clic en su botón de Suscripción en Framer Designer
En la sección Code Overrides, seleccione su archivo PixelFlowClasses
En el menú desplegable Override, seleccione Subscribe
Publique su sitio web

Una vez publicado, PixelFlow rastreará automáticamente los eventos de Suscripción 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

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

Agregue el override FormContainer a su elemento contenedor del formulario
Agregue el override de acción apropiado a su botón de envío (ej. Lead para un evento de Cliente potencial)
Agregue overrides de extracción de datos a sus 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 su configuración

Después de agregar los overrides a sus elementos y publicar:

Visite su página en el sitio web en vivo (no en modo de vista previa)
Haga clic derecho en el elemento y seleccione Inspeccionar o Inspeccionar elemento
En las herramientas para desarrolladores, verifique que la clase PixelFlow aparezca en el código HTML de ese elemento
Pruebe el seguimiento activando el evento (haciendo clic en el botón, enviando el formulario, etc.)
Revise los registros de eventos de PixelFlow para confirmar que el evento fue capturado

Problemas comunes y soluciones

Se están activando múltiples eventos

Si no agregó el elemento "contenedor" (FormContainer) a su formulario general, puede activar varios eventos al hacer clic en el botón. Asegúrese de haber agregado FormContainer

El Override no aparece en el menú desplegable

Asegúrese de haber creado el archivo de override y de haber pegado el código completo
Verifique que el código no tenga errores de sintaxis
Intente actualizar Framer Designer o cerrar y volver a abrir el proyecto

Los eventos no se rastrean en el panel de PixelFlow

Verifique que el script de PixelFlow esté instalado correctamente (consulte la guía de configuración de Framer)
Confirme que publicó su sitio después de agregar los overrides
Asegúrese de haber seleccionado el override correcto en el menú desplegable
Revise la consola de su navegador para ver si hay errores de JavaScript que puedan impedir el seguimiento

No se capturan los datos del formulario

Asegúrese de que el override FormContainer se haya agregado al elemento envolvente del formulario
Verifique que los overrides de los campos de entrada se agreguen a los elementos de entrada reales, no a las etiquetas o envoltorios
Asegúrese de que los nombres de los overrides coincidan exactamente con los del archivo de código

¿Te fue útil?