Manychat Pixel te permite registrar eventos de tu sitio web. Puedes copiar algunas cadenas de código a tu sitio web, configurar eventos que quieras rastrear y, de este modo, almacenar todos los análisis en Manychat.
Cómo funciona
Manychat realiza varios pasos para hacer que Pixel funcione; Estos son necesarios para recopilar datos de recursos externos.
Primero, crea un botón con la opción Abrir sitio web para dirigir tus contactos a un recurso externo.
Cada contacto que haga clic en este botón obtendrá de manera implícita un parámetro de URL adicional llamado “mcp_token” (por ejemplo, https://mysite.com/?utm_source=manychat&utm_medium=cpa&mcp_token=12312314232yg123jh1g3j1g23u12y3). MCP_token almacena metadatos cifrados para identificar este contacto y sus acciones posteriores en tu sitio web.
Luego, instala Manychat Pixel (guía a continuación). Hoy en día, puedes instalar el script una vez por sitio web porque el bloque ... generalmente se comparte entre todas las páginas; aunque si no lo tienes claro, puedes instalar el script en cada página desde la que disparas eventos.
Por último, agrega funciones de registro a tu sitio web y pasa parámetros válidos esperados (guía a continuación).
⚠️ Para que el Pixel se active correctamente por primera vez, es necesario que el usuario acceda desde Messenger o cualquier otro canal al sitio web donde se encuentra Pixel. Una vez hecho esto, la sesión de ese usuario se guardará por 28 días. Durante esa sesión, el evento se disparará cada vez que este usuario visite el sitio web de Pixel, sin importar de donde viene.
Instalar Manychat Pixel
En primer lugar, ten en cuenta que esta función solo está disponible para cuentas Pro. Asegúrate de tener una suscripción Pro antes de intentar instalarla. Aquí te explicamos cómo hacerlo.
Paso 1. Ve a Settings (Configuración) → Pixel. Deberías ver un bloque de código como este:
Paso 2. Copia el código de Manychat Pixel y agrégalo a tu sitio web de esta manera:
<head>
...
<!-- Manychat -->
<script src="//widget.manychat.com/100949504624148.js" async="async"></script>
</head>
⚠️ Importante: Este fragmento exacto no funcionará; debes copiar uno de tu cuenta de Manychat.
Configurar eventos en tu sitio web
Manychat Pixel admite dos tipos de eventos: evento de conversión y evento de dinero. Para activar un evento deberías usar la función integrada correcta y pasar sus parámetros esperados.
- window.MC_PIXEL.fireLogMoneyEvent() acepta tres parámetros: nombre del evento, peso del evento y moneda (puedes omitir este parámetro; Manychat usará “USD” como predeterminado). La función lista para usar se verá de esta manera: window.MC_PIXEL.fireLogMoneyEvent('my_book_purchase', 10.7, 'EUR'). Así le indicarás a Manychat que registre que tu contacto acaba de comprar algo por 10,7 euros. Puedes usar un nombre de evento ya existente o escribir uno nuevo; en ese caso, Manychat creará uno nuevo.
- window.MC_PIXEL.fireLogConversionEvent() acepta un único parámetro: nombre del evento. La función lista para usar se verá de esta manera: window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked'). Así Manychat entenderá que algo pasó en tu sitio web (por ejemplo, un visitante hizo clic en algún botón o vínculo). Puedes usar un nombre de evento ya existente o escribir uno nuevo; en ese caso, Manychat creará uno nuevo.
Ejemplos
Agregar algunos eventos al registro. Hay dos formas populares de registrar un evento: cuando un visitante carga una página (por ejemplo, “Página de pago exitosa”) o hace clic en un botón o vínculo (por ejemplo, “Leer más” o “Comprar”).
Registrar un evento al completar la carga de la página
<!-- This syntax will fire an event after the page is loaded completely -->
<body onload="window.MC_PIXEL.fireLogMoneyEvent('my_book_purchased', 10.7, 'EUR')"> ... </body>
Registrar un evento cuando un visitante hace clic en un botón o vínculo
<!-- This syntax will fire an event after a visitor clicks the button -->
<button onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">
...
</button>
<!-- This syntax will fire an event after a visitor clicks the link -->
<a href="#" onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">
...
</a>
Registrar varios eventos
<!-- A veces, puede ser necesario registrar varios eventos cuando ocurre algo
(por ejemplo, enviar eventos a varios sistemas de terceros). Entonces deberías crear una nueva función
para encapsular varios métodos y usarla -->
<body>
<!-- Este script creará la función “myLogger()”
que hará 3 cosas cuando se active:
-
Disparar un evento en Manychat
-
Escribe la palabra “test” (prueba) en la consola (Busca en DevTools (Herramientas de desarrollo) → Console (Consola))
-
Muestra una ventana modal con la palabra “test” (prueba)
Puedes modificar este código para activar varios eventos -->
<script>
función myLogger() {
window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked');
console.log('test');
alerta('test');
}
</script>
<!-- Here you declare calling "myLogger()" function when button is clicked -->
<button onclick="myLogger()">
...
</button>
</body>