Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Configurar el píxel de Facebook con Google Tag Manager

Categorías:  Autor: Diego C Martin 
Configurar el píxel de Facebook con Google Tag Manager

Vamos a ver un vídeo sobre cómo configurar el píxel de Facebook o Twitter en Google Tag Manager para hacer seguimiento de conversiones cuando hacemos campañas publicitarias. Esto nos ayuda a medir lo que ocurre en las campañas publicitarias de pago una vez que el usuario llega a nuestra página web y nos ayudará también a mejorar nuestro posicionamiento en buscadores SEO.

Veamos el vídeo y a continuación la transcripción del mismo para aquellos que prefieran leer.

Configuración de un píxel de conversión para facebook o Twitter adds

Hemos instalado previamente Google Tag Manager para el proyecto Canarias Exclusive, que puedes ver en este otro tutorial: Agregar código de Google Tag Manager en Prestashop a continuación tenemos que ir al administrador de anuncios de Facebook, desde donde se nos va a solicitar que instalemos pixel de conversión. El proccedimiento es igual en Twitter.

Cuando estamos en el Administrador de anuncios, si abrimos el menú todas las herramientas, nos vamos al apartado píxeles y una vez allí, podemos ver las estadísticas de los píxeles que ya tengas creados y funcionando. Concretamente el pixel normal o básico, registra las visualizaciones de página. Además puedes agregar eventos cuando ocurren determinadas cosas en tu página web, en este caso hemos configurado el evento “iniciar proceso de compra”. Cuando un usuario visita tu tienda virtual o ecommerce, agrega un producto al carrito y a continuación se dirige al carrito con la intención de comprar o revisar, esta es la página de inicio del proceso de compra y es con la que vamos a trabajar para este evento.

Creación de una etiqueta para el píxel de Facebook

En Facebook, Cuando le das a crear un nuevo pixel lo primero que te va a decir Facebook es esto de aquí te va a pasar las instrucciones para que instales el código de seguimiento. Te dice que lo pegues en la parte inferior del encabezado justo antes de la cláusula de cierre del head. Ya hemos visto antes cómo podríamos hacer eso en Prestashop, pero en este caso vamos a agregarlo como una etiqueta dentro de Google tag manager y de ese modo no tenemos que volver a entrar a editar el contenido de nuestra página. Copiamos el código y nos dirigíamos a Google tag manager. En la zona de trabajo de uno de los proyectos el cual ya hemos agregado la etiqueta de seguimiento de Google Tag Manager, nos iríamos a nueva etiqueta y ahora aquí le vamos a poner un nombre descriptivo. Elegimos un tipo de etiqueta, como veréis, podemos configurar desde aquí las de Google Analytics otras para Google AdWords etcétera. en este caso, seleccionamos custom html y aquí simplemente pegamos el código que nos suministra Facebook. Además, en la parte inferior configuramos el disparador o lo que activa este evento. Escogemos page view (vistas de página) de todas las páginas y guardamos.

Ya tenemos creada una etiqueta. Las etiquetas, cuando las creamos no están publicadas. Podemos activar el modo edición y en modo edición puedo activar una vista previa. Ahora volvemos a la página de Facebook, continuamos el asistente de configuración del píxel y aquí dice que podemos agregar eventos.

Agregando un evento a la etiqueta

Hay un montón de eventos. Evento de búsqueda, de pago, de pago iniciado.. Este debe activarse cuando alguien accede al proceso de pago de tu sitio web. Este es el que vamos a utilizar pero hay muchos más, por ejemplo, el evento compra debe colocarse en una página de confirmación de pedido, es decir, esa página cuando el cliente ya ha terminado de comprar y le agradecemos una vez ha pagado. Podríamos agregar este este evento en el cual, podemos especificar el valor de la compra. Esto va a depender del valor de la compra, pero este es un poco más complejo, así que, vamos a empezar con el de pago iniciado. Simplemente copiaríamos el código que nos suministran, nos vamos a Google Tag manager y vamos a agregar otra etiqueta. Está etiqueta va a ser “iniciar proceso de compra vía facebook” de tipo custom HTML, pegamos el códigoy vamos a configurar el activador.

En este caso se trata de que el usuario llegue a una página específica, En nuestra tienda virtual agregamos un producto al carrito y nos dirigimos al carrito para inicial el proceso de compra. Es posible que legados a este punto tengamos que darle a comprar posteriormente. Esto dependerá de a tienda virtual que tengas.  Copiamos la parte final de la URL y le decimos a Google tag Manager de agregar un nuevo disparador para el evento qué va a ser una vista de página, pero en vez de todas, vamos a seleccionar la URL de la página que termina con y aquí pegamos la terminación de a URL de nuestro ecommerce. 

Probar si funciona

Activando el modo edición podemos comprobar lo que hemos hecho. Si activamos el modo preview y a continuación, en otra pestaña del mismo navegador nos dirigimos a la página en cuestión que estamos trabajando, la URL del proceso de compra, deberían dispararse las 2 etiquetas. La etiqueta de vista de página normal y la etiqueta de pedido que acabamos de configurar.

Si ocurre esto, efectivamente estamos viendo que el código del pixel de conversión de Facebook está funcionando correctamente se ha disparado una vez y que el iniciar proceso de compra vía facebook se ha disparado también una vez también. Luego podríamos salir del modo vista previa y publicar las etiquetas. Si ahora nos vamos a la página resumen de los píxeles en Facebook, ya deberíamos ver cómo se han registrado la prueba que hemos hecho.

¡Recibe un cupón de un 10% sólo por darte de alta!

Usaré la info para informarte de novedades y ofertas sobre mis cursos y servicios.

* Más info en el Aviso legal.

2 comments on “Configurar el píxel de Facebook con Google Tag Manager”

    1. Gracias por la sugerencia, pero si una imagen vale más que mil palabras, un vídeo puede que valga más aún. 😉 No se si te lo has saltado, pero en la parte superior hay un vídeo en el que hago paso a paso lo que se narra en el texto.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram