Cómo instalar Facebook Pixel con Google Tag Manager [2 ways]

Instalación de Facebook Pixel con Google Tag Manager es la forma ideal de instalar y configurar Facebook Pixel en su sitio web. En esta guía, le mostraremos dos formas en que puede implementar el seguimiento de píxeles de Facebook con Google Tag Manager que también le permitirá implementar el seguimiento avanzado de eventos de píxeles en su sitio web, para que su Facebook Pixel realmente pueda proporcionarle tanto a usted como a el algoritmo de Facebook con los datos correctos.

En este tutorial sobre la instalación y configuración el código base de Facebook Pixel con Google Tab Manager también vamos a compartir:

  • ¿Por qué debería elegir Google Tag Manager como su método de instalación de FB Pixel?
  • ¿Cómo no instalar tu Facebook Pixel con Google Tag Manager?
  • método paso a paso para instalar y configurar Facebook Pixel utilizando el método de etiqueta HTML personalizado
  • forma paso a paso de configurar Facebook Pixel con una plantilla GTM personalizada disponible públicamente
  • próximos pasos después de instalar el código base de Facebook Pixel con Tag Manager

Esta va a ser una guía enorme, por lo que si tiene alguna pregunta, no dude en consultarnos en la sección de comentarios debajo de este artículo.

Si desea ayuda profesional para configurar Facebook Pixel con Google Tag Manager de la manera correcta, podremos ayudarlo. Especialmente si no solo desea realizar un seguimiento de los eventos básicos de PageView, sino también aprovechar el poder real de Facebook Pixel con eventos estándar y personalizados, puede contactarnos aquí y podemos brindarle un servicio hecho a su medida.

Tabla de contenido

¿Cómo instalar Facebook Pixel en tu sitio web?

Por lo general, tiene tres opciones para instalar Facebook Pixel en su sitio web.

Colocar el código de Pixel manualmente en la sección principal del sitio web

Puedes hacerlo con instalación manual, colocando el código base de Pixel en tu sitio web. Esto puede funcionar si solo desea configurar el evento PageView básico, pero necesitará la ayuda de un desarrollador si necesita algo más que el código básico de Pixel, como configurar Eventos estándar y Eventos personalizados para poder rastrear también las acciones de los usuarios en su sitio web.

Instalación de FB Pixel con integraciones de socios

La segunda opción que tienes es usar Integración de socios que funciona cuando está utilizando un sistema de gestión de contenido popular (como WordPress) o una plataforma de comercio electrónico popular como Shopify. Esta es también una opción que no recomendamos, ya que puede configurar el píxel de Facebook con este método con bastante facilidad, pero en realidad no tiene la opción de personalizar la implementación o agregar cualquier otro Evento de píxel de FB que no se instaló con la integración de socios.

Instalar Facebook Pixel con Google Tag Manager

A diferencia de los dos métodos que acabamos de explicar, la instalación de Facebook Pixel con Google Tag Manager le permite personalizar su implementación de Facebook Pixel de la forma que desee. Puede agregar todos los eventos estándar relevantes y también puede configurar eventos personalizados, por lo que todas las micro y macro conversiones importantes se rastrean en su sitio web.

También es una mejor solución, ya que no necesita la ayuda de ningún desarrollador si la capa de datos del sitio web se ha implementado correctamente.

var asau=’3878756090′;var cid=’9868653211′;var pid=’ca-pub-8556042704547331′;var slotId=’div-gpt-ad-roihacks_com-box-4-0′;var ffid=1;var alS=1003%1000;var container=document.getElementById(slotId);container.style.width=”100%”;var ins=document.createElement(‘ins’);ins.id=slotId+’-asloaded’;ins.className=”adsbygoogle ezasloaded”;ins.dataset.adClient=pid;if(typeof window.adsenseNoUnit==’undefined’){ins.dataset.adSlot=asau;}
ins.dataset.adChannel=cid;if(ffid==2){ins.dataset.fullWidthResponsive=”true”;}
ins.style.display=’block’;ins.style.minWidth=container.attributes.ezaw.value+’px’;ins.style.width=”100%”;ins.style.height=container.attributes.ezah.value+’px’;container.appendChild(ins);window.ezoSTPixelAdd(slotId,’stat_source_id’,44);window.ezoSTPixelAdd(slotId,’adsensetype’,1);var lo=new MutationObserver(window.ezaslEvent);lo.observe(document.getElementById(slotId+’-asloaded’),{attributes:true});

También puede probar y depurar fácilmente su implementación de Facebook Pixel justo antes de publicarlos, por lo que también puede verificar la implementación de sus eventos antes de publicarlos en el sitio web en vivo.

¿Cómo no instalar Facebook Pixel con Google Tag Manager?

Es importante agregar cómo no debes configurar tu Facebook Pixel con Google Tag Manager. Como dijimos, tiene la oportunidad de configurar Facebook Pixel con integración de socios. Y en esta sección de Integración de socios, también encontrará Google Tag Manager como socio:

Facebook Pixel con Google Tag Manager - Instalación de integración de socios

La razón de esto es que Facebook hará todo por usted, por lo que, al igual que con otros métodos de integración de socios, en realidad no tendrá control sobre la implementación. Facebook básicamente instalará el código base de Pixel en Google Tag Manager, luego te pedirá que configures eventos con la herramienta Configuración de eventos. También podría usar la detección automática de eventos que también puede informar datos inexactos, por lo que evitaríamos este método en general.

var asau=’3878756090′;var cid=’9868653211′;var pid=’ca-pub-8556042704547331′;var slotId=’div-gpt-ad-roihacks_com-banner-1-0′;var ffid=1;var alS=1030%1000;var container=document.getElementById(slotId);container.style.width=”100%”;var ins=document.createElement(‘ins’);ins.id=slotId+’-asloaded’;ins.className=”adsbygoogle ezasloaded”;ins.dataset.adClient=pid;if(typeof window.adsenseNoUnit==’undefined’){ins.dataset.adSlot=asau;}
ins.dataset.adChannel=cid;if(ffid==2){ins.dataset.fullWidthResponsive=”true”;}
ins.style.display=’block’;ins.style.minWidth=container.attributes.ezaw.value+’px’;ins.style.width=”100%”;ins.style.height=container.attributes.ezah.value+’px’;container.appendChild(ins);window.ezoSTPixelAdd(slotId,’stat_source_id’,44);window.ezoSTPixelAdd(slotId,’adsensetype’,1);var lo=new MutationObserver(window.ezaslEvent);lo.observe(document.getElementById(slotId+’-asloaded’),{attributes:true});

Dos métodos para instalar el código base de Facebook Pixel en Google Tag Manager

Hay dos formas en que podemos implementar la instalación de FB Pixel con Google Tag Manager, en realidad es solo una preferencia personal qué método decide elegir. Puede instalar el código base de Pixel con una etiqueta HTML personalizada o usar la plantilla personalizada de Facebook Pixel desarrollada por Simo Ahava.

Le mostraremos cómo puede hacer estos dos métodos paso a paso.

¿Cómo instalar Facebook Pixel con etiqueta HTML personalizada en Google Tag Manager?

Como Facebook no ofrece una plantilla oficial de FB Pixel Teg, la forma estándar de instalar Facebook Pixel es con una etiqueta HTML personalizada. Estos son los pasos que debe seguir para instalar el píxel con una etiqueta HTML personalizada:

  1. Abra su cuenta de Google Tag Manager y elija la propiedad correcta, si tiene varias.
  2. En el lado izquierdo de la pantalla, haga clic en Etiquetas, luego en el nuevo botón ‘Nuevo’
  3. Haga clic en el cuadro ‘Configuración de etiquetas’

GTM - Configuración de etiquetas

var asau=’3878756090′;var cid=’9868653211′;var pid=’ca-pub-8556042704547331′;var slotId=’div-gpt-ad-roihacks_com-large-leaderboard-2-0′;var ffid=1;var alS=1036%1000;var container=document.getElementById(slotId);container.style.width=”100%”;var ins=document.createElement(‘ins’);ins.id=slotId+’-asloaded’;ins.className=”adsbygoogle ezasloaded”;ins.dataset.adClient=pid;if(typeof window.adsenseNoUnit==’undefined’){ins.dataset.adSlot=asau;}
ins.dataset.adChannel=cid;if(ffid==2){ins.dataset.fullWidthResponsive=”true”;}
ins.style.display=’block’;ins.style.minWidth=container.attributes.ezaw.value+’px’;ins.style.width=”100%”;ins.style.height=container.attributes.ezah.value+’px’;container.appendChild(ins);window.ezoSTPixelAdd(slotId,’stat_source_id’,44);window.ezoSTPixelAdd(slotId,’adsensetype’,1);var lo=new MutationObserver(window.ezaslEvent);lo.observe(document.getElementById(slotId+’-asloaded’),{attributes:true});

  1. Aparecerá un menú llamado “Elegir tipo de etiqueta” en el lado derecho de la pantalla. Desplácese un poco hacia abajo hasta que vea Etiqueta HTML personalizada. Haz click en eso.

Etiqueta HTML personalizada - FB Pixel con GTM

  1. Agregue un nombre a la etiqueta GTM, como ‘FB Pixel – PageView Event’.
  2. En el cuadro HTML, pegue el código que recibió cuando creó su ID de píxel de Facebook. Si no conoce ese código o aún no ha creado su píxel de Facebook, copie el siguiente código.



!Función(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,argumentos):n.queue.push(argumentos)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.cola=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(ventana, documento, ‘script’,
‘https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘iniciar’, ‘2374271216200198’);
fbq(‘pista’, ‘Vista de página’);

<img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=2374271216200198&ev=PageView&noscript=1″
/>

  1. Asegúrate de reemplazar el ID de píxel con tu ID de píxel. Haz clic en este enlace si quieres saber cómo encontrar tu ID de píxel de Facebook.

Etiqueta HTML personalizada: etiqueta de evento de vista de página de píxeles de Facebook

8. En la configuración avanzada de la etiqueta HTML personalizada, cambie las opciones de activación de la etiqueta a ‘Una vez por página’

var asau=’3878756090′;var cid=’9868653211′;var pid=’ca-pub-8556042704547331′;var slotId=’div-gpt-ad-roihacks_com-leader-1-0′;var ffid=1;var alS=1037%1000;var container=document.getElementById(slotId);container.style.width=”100%”;var ins=document.createElement(‘ins’);ins.id=slotId+’-asloaded’;ins.className=”adsbygoogle ezasloaded”;ins.dataset.adClient=pid;if(typeof window.adsenseNoUnit==’undefined’){ins.dataset.adSlot=asau;}
ins.dataset.adChannel=cid;if(ffid==2){ins.dataset.fullWidthResponsive=”true”;}
ins.style.display=’block’;ins.style.minWidth=container.attributes.ezaw.value+’px’;ins.style.width=”100%”;ins.style.height=container.attributes.ezah.value+’px’;container.appendChild(ins);window.ezoSTPixelAdd(slotId,’stat_source_id’,44);window.ezoSTPixelAdd(slotId,’adsensetype’,1);var lo=new MutationObserver(window.ezaslEvent);lo.observe(document.getElementById(slotId+’-asloaded’),{attributes:true});

Opción de activación de etiquetas - Etiqueta HTML personalizada de Facebook Pixel

  1. Por último, pero no menos importante, haga clic en el cuadro Activación y, como activador, elija el activador Todas las páginas.
  2. Asegúrate de haber hecho todo bien y haz clic en Guardar en la esquina superior derecha
  3. Puede habilitar el modo de depuración y vista previa de GTM y probar si PageView se activa en todas las páginas de su sitio web. Si funciona bien, puede continuar y publicar su nueva etiqueta Facebook Pixel PageView.

¿Cómo instalar Facebook Pixel con una plantilla personalizada en Google Tag Manager?

Si cree que la solución anterior es demasiado complicada para usted (no debería), entonces también puede usar este segundo método de usar una plantilla personalizada de Google Tag Manager para instalar Facebook Pixel creado por el famoso experto en Google Tag Manager, Simo Ahava. .

  1. Una vez más, debe iniciar sesión en su propiedad, luego hacer clic en Plantillas en el lado izquierdo

Haga clic en el botón Plantillas - GTM

  1. En Plantillas de etiquetas, haga clic en Galería de búsqueda y busque ‘Facebook Pixel’.

Buscar plantilla de etiqueta de píxel de Facebook

if(typeof ez_ad_units!=’undefined’){ez_ad_units.push([[250,250],’roihacks_com-leader-2′,’ezslot_16′,116,’0′,’0′])};if(typeof __ez_fad_position!=’undefined’){__ez_fad_position(‘div-gpt-ad-roihacks_com-leader-2-0’)};

3. Encontrará una Plantilla llamada Facebook Pixel por gtm-templates-simo-ahava. Haga clic en él, luego puede hacer clic en ‘Agregar al espacio de trabajo’ y luego confirmar nuevamente que desea agregarlo a su espacio de trabajo.

Agregue la plantilla de píxel de Facebook al espacio de trabajo

  1. Como se ha agregado la Plantilla, ahora vaya a sus Etiquetas y haga clic en Nuevo, luego en Configuración de etiquetas
  2. Ahora, al buscar Facebook, puede encontrar su plantilla de píxel de Facebook que acaba de agregar a su espacio de trabajo, haga clic en ella

Plantilla personalizada de píxel de Facebook: configuración de etiquetas GTM

  1. Primero, en la parte superior de la página, agregue un nombre a la etiqueta, por ejemplo, ‘Facebook Pixel – PageView’
  2. Luego agrega tu ID de píxel de Facebook. Si no lo sabes, lee este tutorial sobre cómo encontrar tu ID de píxel de Facebook

Configuración de eventos de Facebook Pixel PageView con etiqueta de plantilla personalizada

if(typeof ez_ad_units!=’undefined’){ez_ad_units.push([[728,90],’roihacks_com-leader-4′,’ezslot_18′,117,’0′,’0′])};if(typeof __ez_fad_position!=’undefined’){__ez_fad_position(‘div-gpt-ad-roihacks_com-leader-4-0’)};

7. Como este es el código base de Facebook Pixel, deja todo como está por defecto en la sección Etiqueta

8. En el cuadro Activación, haga clic en el cuadro y agregue el activador ‘Todas las páginas’

9. Haga clic en el botón ‘Guardar’ para guardar la nueva etiqueta de Facebook

10. Al igual que con la solución anterior, puede probar la nueva etiqueta con el modo de vista previa y depuración y si realmente activa la etiqueta PageView o si hay algún problema que deba resolver. Si todo funciona correctamente, puedes publicar tu nueva etiqueta de píxel de Facebook

Si prefieres un videotutorial de cómo instalar el píxel de Facebook con Google Tag Managertambién puedes ver este:

if(typeof ez_ad_units!=’undefined’){ez_ad_units.push([[250,250],’roihacks_com-large-mobile-banner-1′,’ezslot_14′,118,’0′,’0′])};if(typeof __ez_fad_position!=’undefined’){__ez_fad_position(‘div-gpt-ad-roihacks_com-large-mobile-banner-1-0’)};

Prueba y solución de problemas del evento PageView de píxeles de Facebook

Aunque al usar el modo de vista previa y depuración, generalmente podemos verificar si nuestra implementación se realiza de la manera correcta, también existen otras soluciones para ver que nuestro evento PageView funciona de la manera correcta.

Solo por nombrar algunos de estos, el propio Facebook ofrece muchas soluciones, como la pestaña Descripción general y diagnóstico en la sección Fuentes de datos del Administrador de eventos de Facebook, donde puede ver todos los problemas que Facebook detecta para todos los eventos activos. También puede probar eventos en vivo con la herramienta Test Events que también se encuentra en el Administrador de eventos de su administrador comercial de Facebook.

Si está interesado en obtener más detalles, consulte nuestro artículo sobre Eventos estándar de Facebookdónde cubrimos estas soluciones y cómo puede usarlas.

Si desea ver rápidamente si sus eventos de píxeles de Facebook se activan correctamente sin iniciar sesión en su administrador comercial de FB, también puede usar Ayudante de píxel de Facebooko comprueba si tus eventos de píxeles de Facebook se activan correctamente.

var asau=’3878756090′;var cid=’9868653211′;var pid=’ca-pub-8556042704547331′;var slotId=’div-gpt-ad-roihacks_com-large-mobile-banner-2-0′;var ffid=1;var alS=1703%1000;var container=document.getElementById(slotId);container.style.width=”100%”;var ins=document.createElement(‘ins’);ins.id=slotId+’-asloaded’;ins.className=”adsbygoogle ezasloaded”;ins.dataset.adClient=pid;if(typeof window.adsenseNoUnit==’undefined’){ins.dataset.adSlot=asau;}
ins.dataset.adChannel=cid;if(ffid==2){ins.dataset.fullWidthResponsive=”true”;}
ins.style.display=’block’;ins.style.minWidth=container.attributes.ezaw.value+’px’;ins.style.width=”100%”;ins.style.height=container.attributes.ezah.value+’px’;container.appendChild(ins);window.ezoSTPixelAdd(slotId,’stat_source_id’,44);window.ezoSTPixelAdd(slotId,’adsensetype’,1);var lo=new MutationObserver(window.ezaslEvent);lo.observe(document.getElementById(slotId+’-asloaded’),{attributes:true});

Todo lo que tiene que hacer es instalar la extensión de Chrome y luego puede consultar cualquier sitio web si han instalado el píxel de Facebook y qué eventos estándar y personalizados y Conversiones personalizadas fuego en el sitio web.

Facebook Pixel Helper también mostrará si está detectando algún error con su implementación, por lo que es una buena práctica verificarlo cada semana si todo funciona bien, y cuando vea un problema, puede verificar su propiedad de Google Tag Manager si algo necesita ser arreglado.

Obtenga ayuda con la instalación y configuración de Facebook Pixel

Si se quedó atascado con alguno de los métodos de instalación, o no sabe cómo continuar con la configuración de eventos estándar y personalizados, nos complace brindarle ayuda profesional. Puede contactarnos aquí u obtener ayuda en esta página.

Próximos pasos después de instalar el código base de Pixel con Google Tag Manager

Instalar el código base de Facebook Pixel es realmente solo el primer paso para configurar su seguimiento completo de Facebook Pixel. A partir de ahora, podrá realizar un seguimiento del evento PageView, pero debe realizar una configuración adicional de eventos estándar y personalizados si desea realizar un seguimiento de las acciones del usuario, micro y macroconversiones en su sitio web.

Si está interesado en cómo puede crear el evento estándar ViewContent de Facebook Pixel en GTM, debe leer nuestro artículo aquí. Si está interesado en saber por qué es importante configurar los eventos de píxeles de Facebook, lea nuestra guía sobre:

var asau=’3878756090′;var cid=’9868653211′;var pid=’ca-pub-8556042704547331′;var slotId=’div-gpt-ad-roihacks_com-leader-3-0′;var ffid=1;var alS=1704%1000;var container=document.getElementById(slotId);container.style.width=”100%”;var ins=document.createElement(‘ins’);ins.id=slotId+’-asloaded’;ins.className=”adsbygoogle ezasloaded”;ins.dataset.adClient=pid;if(typeof window.adsenseNoUnit==’undefined’){ins.dataset.adSlot=asau;}
ins.dataset.adChannel=cid;if(ffid==2){ins.dataset.fullWidthResponsive=”true”;}
ins.style.display=’block’;ins.style.minWidth=container.attributes.ezaw.value+’px’;ins.style.width=”100%”;ins.style.height=container.attributes.ezah.value+’px’;container.appendChild(ins);window.ezoSTPixelAdd(slotId,’stat_source_id’,44);window.ezoSTPixelAdd(slotId,’adsensetype’,1);var lo=new MutationObserver(window.ezaslEvent);lo.observe(document.getElementById(slotId+’-asloaded’),{attributes:true});

  • Guía para principiantes sobre los eventos estándar de Facebook
  • Guía para principiantes sobre eventos personalizados de Facebook

Muy bien, chicos y chicas, eso es todo. Estas son las dos formas en que puede instalar Facebook Pixel con Google Tag Manager, agregar el código base de Pixel y también tener la oportunidad de instalar eventos personalizados y estándar más avanzados.

Si se quedó atascado durante el proceso de instalación y configuración de Facebook Pixel, o si no quiere aprender GTM solo para instalar y configurar su Facebook Pixel, puede contactarnos aquí y nos aseguraremos de ayudarlo.

Sugerencias:

Leave a Comment