Añadir un Pixel de Seguimiento con Google Tag Manager

Añadir un Pixel de Seguimiento con Google Tag Manager en WordPress o Prestashop

En el mundo del marketing digital, añadir un pixel de seguimiento es esencial para monitorizar el rendimiento de tus campañas y optimizar la experiencia del usuario. Hoy vamos a explicar cómo puedes hacerlo de manera sencilla en plataformas populares como WordPress y Prestashop utilizando Google Tag Manager.

Esta herramienta te permitirá gestionar todos tus scripts y píxeles desde una única interfaz sin necesidad de tocar el código de tu sitio web continuamente.

Añadir un Pixel de Seguimiento desde el Tema o Plantilla sin tocar código

Si usáis WordPress o Prestashop, como por ejemplo esta misma página, que es un Avada de WordPress, es más que probable que en vuestro tema o plantilla tengáis la opción de insertar el código sin tener que entrar al FTP y tocar los archivos PHP. Lo sé, a muchos os da mucho miedo pero bueno, si no tenéis la suerte de tener vuestro tema preparado no va a quedar otra, eso sí, gracias a Google Tag Manager sólo sería una vez por muchos scripts o píxeles que tengáis que implementar.

En mi caso os muestro lo fácil que ha sido incorporar el código:

En Prestashop, algunos temas al igual que WordPress tienen la posibilidad de incluir scripts o píxeles desde la configuración del tema. Por ejemplo, el tema Warehouse de Prestashop trae esa opción por defecto. Tenéis todas las demos en la entrada “Temas y Templates” de esta misma página web por si queréis echarle un vistazo.

Etiqueta Literal para Prestashop

Antes de ponernos con Google Tag Manager tenéis que saber que si queréis incluir un pixel de seguimiento en Prestashop tendréis que usar la etiqueta “literal”:

{literal}
<script type="text/javascript">
// <![CDATA[
<!-- 
function isblank(field) { 
  if (field.value == "") { 
    return false; 
  } else { 
    document.loginform.submit(); 
    return true; 
  } 
} 
// -->
// ]]>
</script>
{/literal}

Por ejemplo:

{literal}
<script type="text/javascript">
// <![CDATA[
<!-- 
function isblank(field) { 
  if (field.value == "") { 
    return false; 
  } else { 
    document.loginform.submit(); 
    return true; 
  } 
} 
// -->
// ]]>
</script>
{/literal}

Todo esto lo tengo muy bien explicado en el artículo sobre cómo incluir un script en Prestashop que os comentaba al inicio de esta entrada.

Pues sólo esto necesitamos saber para poder añadir el código que nos proporciona Google Tag Manager.

El código será del estilo a este (muy parecido al de Analytics):

VERSIÓN CON ETIQUETA LITERAL PARA PRESTASHOP

{literal}
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXX" 
height="0" width="0" style="display:none;visibility:hidden">
</iframe></noscript>
<script>
// <![CDATA[
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXX-XXXXXX'); 
// ]]>
</script>
<!-- End Google Tag Manager -->
{/literal}

Con la peculiaridad que si lo tenemos que añadir en Prestashop usaremos las etiquetas “literal” que he incluido en el ejemplo anterior y si es en WordPress, Joomla o cualquier otro CMS (¿Qué es un CMS?) o web realizada con programación a medida, no usaremos las etiquetas literal, que es como Google nos proporciona el código:

VERSIÓN SIN ETIQUETA LITERAL PARA WORDPRESS

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXX" 
height="0" width="0" style="display:none;visibility:hidden">
</iframe></noscript>
<script>
// <![CDATA[
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXX-XXXXXX'); 
// ]]>
</script>
<!-- End Google Tag Manager -->

CAMBIOS EN PRESTASHOP 1.7

Ya no tenemos la localización donde siempre… ahora trabajamos con “layout-both-columns.tpl”.

no ======== HEADER.TPL ======== no

si ======== layout-both-columns.tpl ======== si

Añadimos el código con “literal” en el layout-both-columns.tpl:

{literal}
<script>(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxxx');</script>
{/literal}

que lo encontraremos en: \themes\mi_tema\templates\layouts

Nuevas versiones de Prestashop (1.7.8 y posteriores)

Con la llegada de las nuevas versiones de Prestashop, la estructura y localización de los archivos puede variar ligeramente, pero el proceso para añadir scripts sigue siendo bastante similar. Para las versiones más recientes, es crucial estar actualizado y conocer las nuevas prácticas recomendadas por la comunidad de Prestashop y los desarrolladores oficiales.

En las versiones 1.7.8 y posteriores, el archivo `header.tpl` puede no ser siempre el lugar adecuado para incluir ciertos scripts debido a los cambios en la estructura de los temas. En lugar de eso, puedes necesitar trabajar con archivos como `page.tpl` o `layouts.tpl`, dependiendo del tema que estés usando.

Añadir Google Tag Manager en Prestashop 1.7.8+

Para añadir Google Tag Manager en las versiones más recientes de Prestashop, sigue estos pasos:

1. Accede a tu servidor a través de FTP y navega hasta el directorio del tema que estás utilizando, por ejemplo:
2. `/mipaginaweb/themes/mitema/templates/_partials/header.tpl`
3. `/mipaginaweb/themes/mitema/templates/_partials/head.tpl`
4. Abre el archivo relevante (como `head.tpl`) con un editor de texto.
5. Busca la etiqueta <head> y añade el pixel de Google Tag Manager justo después de la etiqueta <head>:

{literal}
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXX" 
height="0" width="0" style="display:none;visibility:hidden">
</iframe></noscript>
<script>
// <![CDATA[
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXX-XXXXXX'); 
// ]]>
</script>
<!-- End Google Tag Manager -->
{/literal}

1. Guarda los cambios y sube el archivo de nuevo a tu servidor.
2. Limpia la caché de Prestashop para asegurarte de que los cambios se aplican correctamente.

De esta manera, el código de Google Tag Manager se insertará correctamente en todas las páginas de tu sitio Prestashop.

Añadir scripts en versiones más recientes

Para añadir otros scripts, como el pixel de seguimiento de Facebook, sigue un proceso similar. La clave está en localizar el archivo correcto dentro de tu tema donde se renderiza la sección <head> o <body> según sea necesario.

Para el pixel de Facebook, normalmente se recomienda colocarlo en la sección <head> del archivo head.tpl:

{literal}
<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID'); 
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
{/literal}

Guarda y sube los cambios, y luego limpia la caché de Prestashop para asegurarte de que todo funciona correctamente.

Prestashop 8 y versiones superiores

Con el lanzamiento de Prestashop 8, se han introducido nuevas funcionalidades y cambios en la estructura de los temas que pueden afectar la manera en que se insertan scripts y píxeles. Es esencial familiarizarse con las actualizaciones y ajustar las prácticas de integración de scripts según las nuevas versiones.

Añadir Google Tag Manager en Prestashop 8+

Para integrar Google Tag Manager en Prestashop 8, sigue estos pasos:

1. Accede a tu servidor a través de FTP y navega hasta el directorio del tema que estás utilizando, por ejemplo:
2. `/mipaginaweb/themes/mitema/templates/_partials/header.tpl`
3. `/mipaginaweb/themes/mitema/templates/_partials/head.tpl`
4. Abre el archivo relevante (como `head.tpl`) con un editor de texto.
5. Busca la etiqueta <head> y añade el pixel de Google Tag Manager justo después de la etiqueta <head>:

{literal}
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXX" 
height="0" width="0" style="display:none;visibility:hidden">
</iframe></noscript>
<script>
// <![CDATA[
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXX-XXXXXX'); 
// ]]>
</script>
<!-- End Google Tag Manager -->
{/literal}

1. Guarda los cambios y sube el archivo de nuevo a tu servidor.
2. Limpia la caché de Prestashop para asegurarte de que los cambios se aplican correctamente.

Este proceso garantiza que Google Tag Manager esté implementado correctamente en todas las páginas de tu sitio Prestashop 8.

Crear una Cuenta en Google Tag Manager

Lo que vamos a hacer es crear un contenedor donde incluiremos todos los scripts y códigos que nos vaya surgiendo con el tiempo, en lugar de tener que estar entrando al FTP e ir tocando el header.php o el archivo dónde haya que incluir los códigos cada vez que nos salga la oportunidad de instalar uno nuevo.

De esta manera sólo tocaremos el código del tema la primera vez porque incluiremos el código que Google una vez y luego, para las siguientes veces que tengamos que añadir códigos lo haremos desde el panel de control de Google Tag Manager, ya sea el de Analytics, el pixel de Facebook Ads, el de seguimiento de Adwords, el de validación de Search Console o cualquier otro que se nos ocurra a base de clic (hay decenas, incluso cientos de tipos, desde los de analítica hasta los de re marketing).

Esto está muy bien si por ejemplo trabajáis en un equipo. Uno será el friki que mete el código la primera vez, el informático de turno, que es el que ve números y no se muere del susto, y luego ya, pues que se apañen los de diseño, SEO o marketing con sus rollos :) porque con este método cualquiera que sepa un mínimo de tecnología va a poder.

Pues nada, vamonos ya a Google Tag Manager, primeros creamos la cuenta, luego el contenedor, añadimos el pixel en nuestra página web y por último lo validamos.

Parece muy difícil y pensaréis que con lo poquito que os lo estoy explicando no vais a ser capaces, pero veréis que no, que es muy sencillo.

Primero echarle un vistazo a la ayuda de Google para ver cómo lo teneis que hacer y luego volvéis aquí, que justo abajo os he puesto el resumen con imágenes y todo de cómo tenéis que hacerlo :) :

1. Creáis la cuenta.
2. Arriba a la derecha pone “create account”,  esto es, una vez que os habéis dado de alta, podremos administrar tantas cuentas que queramos, por ejemplo en mi caso, en el panel de control de Google Tag Manager tengo todas las cuentas que voy haciéndoles a mis clientes, en en sus cuentas, los contenedores.
3. En la siguiente página, cuando hemos hecho clic en “create account”, creamos el contenedor (elegimos en nuestro caso WEB):
4. Cuando aceptemos los términos legales nos aparecerá una pantalla con el código, el cual incluiremos como explico a continuación (un poquito más abajo que esto es el resumen jajaja).
5. Una vez incluido el código tenemos que publicar el contenedor: 

Validar Google Tag Manager

Si ya me conocéis un poco y si no os lo explico, a mi me gusta hacer las cosas lo más sencillito posible así que para validar el código de Google Tag abrís el navegador Google Chrome, si no lo tenéis lo descargáis e instaláis en la página oficial de Google y añadís la extensión para Chrome Tag Assistant, no se complicaron tampoco la vida al ponerle el nombre xD.

Abrís la página donde habéis colocado el código, hacéis clic en el Tag Assistant y le dais a ENABLE, un botón azul que está abajo a la izquierda, luego refrescáis la página y os dirá si va todo bien o dónde habéis metido la pata.

Añadir el Pixel de seguimiento de Facebook Ads

Otra cosa que me piden bastante (os recuerdo que esto más que nada me lo escribo a mi mismo porque se me van las cosas de la cabeza jajaja) es añadir el pixel de seguimiento de Facebook Ads.

Es más de lo mismo pero con la peculiaridad de que cuando elegís el tipo de código a la hora de crear el pixel en el panel de Control de Google Tag Manager, debemos señalar la opción HTML,  ya que no está dentro de los predeterminados de Google Tag Manager, o al menos no lo estaba cuando escribí esto (van añadiendo más tipos con el tiempo).

Lo único que difiere es la forma de validarlo.

Validar el Pixel de Seguimiento de Facebook Ads

Primero le echamos un vistazo a la ayuda de Facebook, en concreto la página de ayuda para el Pixel de seguimiento de Facebook ads. Pues justo en esta página hay un asistente muy parecido al de Google Tag Manager, el Tag Assitant que hemos instalado antes, pero de Facebook (yo diría que hasta más sencillito ya que no hay que hacer nada y lo pilla al instante), pero vaya que si os liáis está todo muy explicado en la ayuda de Facebook.

NOTA: Este método para añadir códigos os vale para cualquier pixel que no venga en los predeterminados.

Problemas en Prestashop con Analytics

Por último otro consejo. Me ha pasado en alguna ocasión, más de las que me gustaría… que las cosas no salen a la primera… Prestashop como siempre dando guerra es líder dentro de esta clasificación de torpes, bueno no, sigue siendo Joomla y mira que ya no lo uso… jajaja.

Pues a veces si usamos el módulo de Analytics que trae Prestashop, cuando validamos el ID de seguimiento con el Tag Assitant de Google, nos indica que no funciona :( Que ponga que está fuera del head no es bueno pero se puede vivir con ello, el problema es si no recibe datos por culpa de una configuración de Prestashop.

Eso sí, no seáis ansias, si lo acabáis de instalar y no recibe datos, lo más probable es que sea porque la cuenta de Analytics es nueva, esperar un día por lo menos.

Pero si este no es vuestro caso o el error persiste, suele ser porque en la opción del BO (si no sabéis como entrar al panel de control de prestashop u otro CMS podéis echarle un vistazo a este artículo), “Reducción del código HTML” dentro de rendimiento:

parámetros avanzados ==> rendimiento

está dando guerra. Si la quitáis suele funcionar todo ok.

Bueno, yo ya me retiro que al final me he liado y esto se ha hecho más largo de lo que esperaba… Espero no tardar otro lustro en publicar algo :)

Un saludo y espero que te haya servido de ayuda, pero si ves que te lías contacta con tu amigo experto en marketing digital o deja un comentario.

También puedes encontrarme en Google Maps.