Instalar Facebook Pixel vía Tag Manager

También pueden confirmar que el fb pixel se activa en su sitio, con la extensión de facebook que se llama Facebook Pixel Helper

Otra opción es utilizar una de las plantillas que la comunidad ha creado. Yo use la de Facebook Incubator.

La pueden encontrar en el apartado de Etiquetas > Nueva > Descubra más tipos de etiquetas en la galería de plantillas de la comunidad

Se abrirá un listado de plantillas. En el buscador escribe Facebook. Selecciona la que dice Facebok Pixel y añadela a tu espacio de trabajo

Una vez seleccionada, lo que debes de hacer es incluir el _el Pixel de Facebook en el primer campo. Este número lo encuentras en el administrador de eventos de Facebook. Para este ejercicio y siguiendo el ejemplo del maestro, puedes colocar como Trigger que se muestre en todas las páginas.

Considero que es más fácil de configurar las etiquetas y tienen todos los eventos ya configurados.

Dejo un video tutorial explicando con más detalle la configuración: https://www.youtube.com/watch?v=n4BJ-NpR9mw

También les dejo otra plantilla que se me hizo muy buena. El autor es Simo Ahava: https://www.simoahava.com/custom-templates/facebook-pixel/

Os dejo mis apuntes:
.
A través de Tag Manager introduciremos código en nuestro sitio sin modificar nuestro código fuente.
.
Pasos para la Instalación de Facebook Pixel en nuestro sitio a través de GTM:
Ve a tu Business Manager de Facebook >
En el panel principal pincha en Administrador de eventos >
Crea un nuevo “conector de datos” dale a el botón verde con el símbolo de + ubicado en la parte izquierda de la pantalla >
Selecciona la opción Web >
Selecciona Facebook Píxel (quizás te salga una pantalla que te explica cómo funciona el píxel de Facebook, simplemente dale a continuar) >
Ponle un nombre al píxel como “Píxel de Nombre del sitio web” >
Pon la URL de tu sitio web >
Elige la opción de “Agregar el código del píxel al sitio web manualmente” >
Dale al botón verde de “Copiar código” >
Vuelve a tag manager >
Crea un nuevo tag, ve a Etiquetas > nuevo >
Ponle el nombre de “Facebook – Configuración” >
Pulsa en Configuración de la etiqueta >
Selecciona la opción Personalizado > HTML, de la lista >
Pega en el recuadro lo que copiaste de la página de Facebook >
Elimina esto del código (esto es para navegadores que no soporte JavaScript) probablemente no se use nunca ya que todos los navegadores suelen usar JavaScrip:

Elimina esto ya que nos viene un seguimiento/trakeo precargado que en este caso es “Pagina vista”, al borrar esto nosotros estaremos instalando el píxel de Facebook pero sin disparadores o trakeadores, si nosotros quisiéramos añadir algún tipo de seguimiento (como página vista o agregar al carrito) crearíamos un nuevo tag para ello:

*Lo que acabamos de hacer es instalar el píxel de Facebook, pero no esta haciendo seguimiento de nada para eso crearemos una nueva etiqueta:
.
Pulsa en Nueva y titúlala “FB – Page View” >
Pincha en Configuración de la etiqueta y HTML personalizado >
Escribe el código siguiente en el recuadro:
<script>
fbq(‘track’, ‘PageView’);
</script>
Entra en la configuración avanzada y selecciona la opción de > secuencias de etiquetas > “Activar una etiqueta antes de que se active “FB – Page View” (<esto último cambiará dependiendo del título que le hayas puesto a ESTA etiqueta) >
Selecciona la etiqueta de “Facebook – Configuración” (o el nombre que tu le hayas puesto, a la etiqueta de instalación del píxel de Facebook) >
Marca el recuadro de “No active “FB – Page View si Facebook – Configuración no se activa o está en pausa” >
En el recuadro de “Activación” selecciona la opción de “All pages” >
Guardamos >
De vuelta en el panel principal puedes hacer una “Vista Previa” para ver si el Tag funciona o puedes darle a Enviar y seguir los pasos para que se publique.

No me funciona!! Ya rectifiqué la instalación en el sitio web, el tag assitant lo deteca y todo esta bien, pero Facebook simplemente no detecta nada!!

La interfaz de facebook cambió, por favor revisar esto para el contenido del curso.

Para quienes ya tengan un Pixel y necesiten el código base, vayan a Administrador de eventos - Orígenes de datos y seleccionen el Pixel que tienen. Luego, seleccionan la casilla “Agregar eventos” y posteriormente “Desde un sitio web nuevo”. Ahí les permite encontrarlo y llevarlo a Tag Manager.

En caso quieran instalar un Pixel que ya crearon y tengan problemas con eso, vayan a “Partners Integration” y seleccionen Google Tag Manager

¡El conocimiento es mágico!
Ya se como configurar el pixel de Facebook para webs que no estan hechas con wordpress.
¡Excelenteeee lo que he aprendido!

Efectivamente, agregó a lo visto en esta lesión, que también existe una extensión para Google Chrome de Meta, se llama “Pixel Helper” esta al igual que la extensión que mostró Ulises en la lesión anterior, ayuda a ver si el Pixel de Facebook esta bien instalado y puede ver también si los eventos que configuraste, se están activando.

Creo que ya merece una actualización el curso, ademas al final ni el mismo Ulises presento el pixel instalado

Instalar Facebook Pixel vía Tag Manager

Para instalar Facebook Pixel en un sitio web utilizando Google Tag Manager, sigue los siguientes pasos:

1. Crea un Data Source en Facebook Events Manager

En Facebook Events Manager, crea un nuevo Data Source y selecciona el método de conexión “Facebook Pixel”. Dale un nombre descriptivo al Data Source y agrega la dirección de tu sitio web. Selecciona “Manualmente agregar el código del píxel de Facebook a mi sitio web” y copia el código que te proporciona Facebook.

2. Crea un tag en Google Tag Manager para Facebook Pixel

En Google Tag Manager, crea un nuevo tag con un nombre descriptivo que indique la instalación de Facebook Pixel. Selecciona el tipo de tag “Custom HTML” y pega el código que copiaste anteriormente. Debes eliminar la línea fbq("track", "pageview") ya que la agregaremos por separado para evitar que se genere un PageView cada vez que se dispare un evento.

3. Configura el tag para que se dispare en todas las páginas

En la configuración avanzada del tag, en “Tag firing options”, selecciona “Once per page”. En “Triggering”, selecciona “All Pages” y guarda los cambios.

4. Crea un tag de PageView para Facebook Pixel

Crea un nuevo tag con el nombre “FB PageView”. Selecciona el tipo de tag “Custom HTML” y en el campo HTML, agrega el siguiente código:

perlCopy code
<script>
 fbq("track", "pageview");
</script>

En “Triggering”, selecciona “All Pages”. En la configuración avanzada del tag, en “Tag sequencing”, marca la opción “Don’t fire FB PageView if Facebook - Setup fails or is paused”.

5. Verifica y publica los cambios

Verifica en el modo “Preview” que todo funciona correctamente. Si es así, dale a “Submit” y ponle un nombre descriptivo a la versión. Finalmente, dale a “Publish” para publicar los cambios en tu sitio web.

Hallazgo:

• No tenía idea de que se podían usar los tags secuenciales. Gracias Uli 😃

Hola tengo una pregunta.

Actualmente tengo corriendo un tag de FB - Pageview, con el disparador o trigger Load Delay - temporizador, aproximadamente 4 segundos.

Pero me afecta el tiempo de carga de mi pagina. Lo he probado quitando ese temporizador y el tiempo de carga mejora enormente pasando de 4.7s a 2.5s. Estoy casi seguro q es por el temporizador.

Hay manera de seguir utilizando ese trigger ya que me importa que se marque un page view despues de los 4 segundos, sin que afecte el tiempo de carga de pagina web ?