Configuración de .NET

Utiliza esta guía para instalar PixelFlow en aplicaciones .NET, incluyendo ASP.NET MVC, Razor Pages, Blazor y otros marcos de trabajo web de .NET.

PixelFlow funciona en sitios .NET mediante el método de instalación de script estándar. Añade el script de seguimiento al diseño (layout) o a la sección head de tu sitio, luego utiliza el Visual Tagger, activadores de URL o la API Programática para realizar el seguimiento de eventos.

Add your site in PixelFlow

Inicia sesión en PixelFlow.
Haz clic en Add New Site.
Selecciona Other.
Introduce tu nombre de dominio.
Elige tu moneda si es necesario.

Connect Your Meta Pixel

Inicia sesión con Facebook (si tienes un portafolio comercial)

Añade tu Pixel Name.
Añade tu Pixel ID.
Añade tu Meta Pixel Access Token.

¿Necesitas ayuda para encontrar estos valores? Consulta Cómo conectar tu Meta Pixel y la API de Conversiones.

Install the script in your .NET application

Copia el script de PixelFlow generado y añádelo a la sección head de tu aplicación. La ubicación depende de tu marco de trabajo .NET:

ASP.NET MVC / Razor Pages

Añade el script a tu archivo de diseño compartido, normalmente _Layout.cshtml o Pages/Shared/_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Your App</title>
    
    <!-- PixelFlow tracking script -->
    <script>
        /* Your PixelFlow tracking script */
    </script>
    
    @await RenderSectionAsync("Styles", required: false)
</head>

Blazor Server

Añade el script a Pages/_Host.cshtml (Blazor Server) o a wwwroot/index.html (Blazor WebAssembly) dentro de la sección <head>:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    
    <!-- PixelFlow tracking script -->
    <script>
        /* Your PixelFlow tracking script */
    </script>
</head>

ASP.NET Core con Tag Helpers

Si utilizas un diseño compartido, crea una vista parcial o sección para scripts de terceros:

<!-- Views/Shared/_Layout.cshtml -->
<head>
    @await RenderSectionAsync("HeadScripts", required: false)
</head>

<!-- Then in each page or shared partial: -->
@section HeadScripts {
    <script>
        /* Your PixelFlow tracking script */
    </script>
}

Coloca el script de PixelFlow lo antes posible en la sección <head> para asegurar que los eventos se capturen antes de que los usuarios abandonen la página. El script solo ocupa 11kb y se carga de forma asíncrona.

Deploy your changes

Guarda el archivo de diseño o vista modificado.
Compila y despliega tu aplicación en tu entorno de alojamiento (Azure App Service, IIS, contenedor Docker, etc.).
Verifica que el script aparezca en el código fuente de la página visualizando tu sitio desplegado y comprobando el HTML.

Verify the setup

Visita tu sitio web en una nueva pestaña del navegador (preferiblemente en modo incógnito).
Navega por algunas páginas para activar eventos de visualización de página.
Vuelve al panel de control de PixelFlow; deberías ver una ventana de confirmación con el mensaje "Congratulations".
Consulta los Registros de Eventos para ver los eventos que aparecen en tiempo real.

También puedes verificarlo en el Administrador de eventos de Meta:

Abre tu Administrador de eventos de Meta.
Ve a la pestaña Test Events.
Confirma que los eventos de visualización de página aparecen con la calidad de coincidencia de eventos correcta.

Setup Complete

La configuración de seguimiento de tu aplicación .NET se ha completado. Estás rastreando automáticamente:

PageViews

Utiliza las siguientes opciones para realizar el seguimiento de eventos adicionales como envíos de formularios, clics en botones, compras y clientes potenciales (leads).

Seguimiento de eventos adicionales

Después de instalar el script, elige cómo quieres realizar el seguimiento de las conversiones en tu sitio .NET:

Método	Ideal para
Visual Tagger	Clics en botones, envíos de formularios e interacciones en la página. Recomendado para la mayoría de los casos.
Activadores de URL	Páginas de agradecimiento, confirmaciones de reserva y páginas de éxito tras redireccionamientos.
Etiquetado manual (clases CSS)	Más control sobre los datos del evento, captura de campos de formulario y referencias de elementos estables.
API Programática	Seguimiento de eventos del lado del servidor, lógica de negocio personalizada y conversiones validadas en el backend.

Uso de la API Programática en .NET

Para casos de uso avanzados, puedes llamar a la API de Seguimiento Programático de PixelFlow desde tu JavaScript del lado del cliente. Esto es útil cuando necesitas realizar el seguimiento de eventos basados en condiciones del lado del servidor o enriquecer los eventos con datos de tu backend.

<script>
    // Track a purchase after server-side validation
    async function trackPurchase(orderData) {
        if (window.pixelFlow?.trackEvent && window.pixelFlow?.utils?.normalizeCustomerData) {
            const userData = await window.pixelFlow.utils.normalizeCustomerData({
                em: orderData.customerEmail,
                fn: orderData.customerFirstName,
                ln: orderData.customerLastName,
                ph: orderData.customerPhone
            });
            
            const customData = {
                value: orderData.total,
                currency: orderData.currency,
                content_ids: orderData.productIds,
                content_type: 'product'
            };
            
            await window.pixelFlow.trackEvent('Purchase', customData, userData);
        }
    }
</script>

La API Programática se ejecuta en el lado del cliente, en el navegador. Para un seguimiento totalmente del lado del servidor sin JavaScript en el navegador, consulta la documentación de la API de Seguimiento Programático de PixelFlow y llámala desde tu backend mediante solicitudes HTTP a los endpoints de PixelFlow.

Preguntas frecuentes sobre la integración con .NET

¿Debo añadir el script a todas las páginas?

No. Añade el script a un archivo de diseño compartido (_Layout.cshtml, _Host.cshtml o similar) para que se cargue automáticamente en todas las páginas. Este es el patrón estándar en las aplicaciones .NET y garantiza un seguimiento coherente en todo el sitio.

¿Funcionará el script con la navegación de página única de Blazor?

Sí. El script de PixelFlow se carga una vez cuando se inicializa la aplicación. Los eventos de visualización de página se rastrean automáticamente a medida que los usuarios navegan entre los componentes de Blazor. Para eventos personalizados activados por interacciones de Blazor, utiliza el Visual Tagger o la API Programática.

¿Cómo realizo el seguimiento de eventos desde el código subyacente (code-behind) de C#?

El script del lado del cliente de PixelFlow gestiona la mayoría de las necesidades de seguimiento de forma automática. Para los eventos que deban activarse desde el código backend de C# (como las confirmaciones posteriores al pago), tienes dos opciones:

Inyectar el script del lado del cliente desde tu vista Razor o componente Blazor para llamar a window.pixelFlow.trackEvent() una vez finalizada la acción.
Utilizar los endpoints de la API del lado del servidor de PixelFlow para enviar eventos directamente desde tu backend (explicado en la documentación de la API Programática).

¿Qué pasa con el RGPD y el consentimiento?

PixelFlow está preparado para el RGPD. Añade una comprobación de consentimiento antes de que se cargue el script de PixelFlow. Envuelve la inicialización del script en una función que solo se ejecute después de que el usuario otorgue su consentimiento. Consulta la documentación de tu plataforma de gestión de consentimiento para ver los patrones de integración.

Solución de problemas

Problema	Solución
El script no aparece en el código fuente de la página	Verifica que tus páginas estén utilizando el archivo de diseño. Comprueba si hay un renderizado de diseño condicional o bloques @section que puedan estar sobrescribiendo el encabezado predeterminado.
Los eventos no aparecen en el panel de control	Borra la caché del navegador y realiza la prueba en modo incógnito. Verifica que tu Pixel ID y el Access Token estén configurados correctamente en PixelFlow. Consulta los registros de eventos para obtener detalles sobre los errores.
Eventos duplicados en Meta	Asegúrate de no haber instalado el Meta Pixel por separado. PixelFlow gestiona tanto el Pixel del navegador como la CAPI automáticamente con deduplicación.
La SPA de Blazor no rastrea las visualizaciones de página	La navegación del lado del cliente de Blazor no activa cargas de página completas. Utiliza el Visual Tagger para rastrear acciones de usuario específicas o añade llamadas a la API Programática en tus componentes de Blazor.

How to Track & Trigger Events

Explora todas las formas de realizar el seguimiento de las conversiones en tu sitio: Visual Tagger, activadores de URL, etiquetado manual, integraciones y la API Programática.

Learn More

¿Te fue útil?