Como integrar Google Tag Manager en Prestashop

29 septiembre, 2016 agosto 27th, 2026

Vincular Google Tag Manager y Analytics con Prestashop

  • Vamos a configurar desde cero Google Tag manager en un prestashop.
  • Vincularemos Google Tag Manager con nuestro Analytics.
  • Pasaremos los datos de las conversiones de comercio electrónico a analytics.
  • Además le pasaremos metricas personalizadas para despues poder hacer seguimiento de usuarios específicos para futuras campañas de por ejemplo MailMarketing.
    PAGINA VISTA / ID DE USUARIO QUE LA HA VISTO / EMAIL DE USUARIO QUE LA HA VISTO.

Para empezar,  vamos a vincular / o darnos de alta en nuestra cuenta con Google Tag Manager.
https://tagmanager.google.com

Una vez la hayamos vinculado, tenemos que crear una cuenta que irá enlazada a nuestra tienda:

Botón en la interfaz para crear una nueva cuenta en un servicio web.

Pasos a seguir

  • Debemos introducir el nombre de la cuenta, el que nosotros queramos.
  • La url de la tienda «www.latiendaquesea.com»
  • Seleccionar de tipo «SITIO WEB».

Pantalla para añadir una nueva cuenta en Google Tag Manager, configurando el nombre del contenedor y su uso.

Finalizado este proceso, nos aparecerá una ventana con dos códigos de seguimiento que debemos introducir en nuestro prestashop. Uno es para la etiqueta <HEAD> y otro para la etiqueta <BODY>. Copiamos esos código y lo guardamos en un fichero de texto.

Pantalla para instalar Google Tag Manager, con instrucciones y código para pegar en el sitio web. Botón de aceptar visible.
Siempre podremos cogerlo de nuevo en la pestaña Administrador, en la opción Instalar Google Tag Manager.

Campo para ingresar el ID del contenedor de Google Tag Manager y opciones de configuración en Prestashop.

 

Ahora hay que pegar ese código en nuestro sitio web, en el caso de prestashop lo pondremos en nuestro fichero header.tpl, la ubicación de este fichero es:

httpdocs->themes->LA_PLANTILLA_QUE_TENGAS_ACTIVA->header.tpl

Justo donde empieza la etiqueta head y carga los stylesheet etc etc, pegamos el primer código de Google Tag Manager (GTM), yo además tengo una dimensión personalizada que mas a continuación os explicaré:

<!--GOOGLE TAG MANAGER DE DAVID ESCUDERO-->

<!--Si el usuario está logado, mandamos a la capa de datos el usuario y el mail-->
{if $logged}
{literal}
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'userId': '{/literal}{$cookie->id_customer}{literal}',
'emailUsuario': '{/literal}{$cookie->email}{literal}'
});
</script>
{/literal}
{/if}

<!-- Google Tag Manager -->
{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-KSGMF5');</script>{/literal}
<!-- End Google Tag Manager -->

Como veis, incluyo un código que envía a la capa de datos el ‘idUsuario’ que está navegando y el ‘emailUsuario’ del usuario en el caso de que esté logado.
Os explicaré como hacerlo mas adelante.

 

 

¡¡Módulo de Google Tag Manager de regalo con tu suscripción al newsletter!!

 

 

Captar datos del prestashop en Google Tag Manager y pasarlos a Analytics

  1. Vamos a Google Tag Manager.
  2. Seleccionamos nuestro proyecto.

    Pantalla de Google Tag Manager mostrando la sección para nombrar el contenedor de una cuenta.

  3. Le damos a Añadir nueva etiqueta:

    Pantalla de Google Tag Manager para agregar una nueva etiqueta, con opción de elegir entre diversos tipos.

  4. Ahora la etiqueta debe quedar así, omitid el paso de la Dimensiones personalizadas que os la explico en el punto 5:

    Configuración de una etiqueta de Google Analytics en Google Tag Manager con dimensiones personalizadas.

  5. Como veis, he añadido dos dimensiones personalizadas. En Analytics tenéis la opción de añadir estas dimensiones del siguiente modo:

    Pantalla de Google Tag Manager mostrando opciones de configuración de enlaces y definiciones personalizadas.

  6. Y así es como las tengo yo:

    Lista de dimensiones personalizadas en Google Tag Manager con su índice, ámbito, último cambio y estado.

  7. Entonces, para añadir estas dos dimensiones y que recogemos de prestashop y mandarselas a Analytics tenemos que crear dos variables nuevas, para ello pulsamos sobre la cajita que contiene un ‘+’ en la parte de Valor de la dimensión:

    Definición del valor de una dimensión en Google Tag Manager para su uso en Analytics.

    Y a continuación sobre el simbolo ‘+’ azul para crear una nueva variable de tipo «Capa de datos»:

    Pantalla de Google Tag Manager mostrando la configuración para enviar datos a Google Analytics desde Prestashop.

    Pantalla de Google Tag Manager mostrando la opción para agregar una variable de capa de datos.

    Las variables nos deben quedar así:

    Configuración de una variable de capa de datos en Google Tag Manager, especificando nombre y versión.

    Configuración de una variable de capa de datos en Google Tag Manager, definiendo el nombre como userId.

  8.  Ahora, finalizamos la etiqueta dejandola como he indicado al principio y guardamos, por último publicamos los cambios, en la parte derecha del panel:

    Pantalla de Google Tag Manager mostrando el espacio GTM-NHCC2Q con opción para publicar cambios.Pulsamos sobre el botón publicar.

  9. Podemos probar en Analytics que en la vista en Tiempo Real estamos recibiendo visitas correctamente.

 

Como enviar las conversiones/compras de tu prestashop a Google Tag Manager y Analytics

Ahora vamos a mandar las compras que realizan nuestros clientes a Google Tag Manager y este a Analytics. Para ello a Google Tag Manager le tenemos que pasar una serie de datos. Estos datos tenemos que generarlos en Prestashop.
Tocaremos un controlador de prestashop, el:
httpdocs/controllers/front/OrderConfirmationController.php

Justo antes de la linea en la que cargamos la plantilla de order-confirmation.tpl debemos poner el siguiente código, que como vereis basicamente nos proporciona una serie de variables que podremos usar en el TPL de confirmación de compra y además almacena en esas variables los datos que vamos a enviar a Google Tag Manager:

//CONFIGURACIÓN CAPA DE DATOS DE GTM
		$order = new Order($this->id_order);
		$cart = new Cart($order->id_cart);
		$productos = $cart->getProducts();
		$this->context->smarty->assign(array(
        'id_pedido'=> $this->id_order,
        'total_a_pagar'=> $order->total_paid_tax_incl,
        'gastos_envio'=> $order->total_shipping_tax_excl,
        'impuestos'=> ($order->carrier_tax_rate/100) + 1,
        'productos' => $productos
        ));

 

Así es como quedaría:

Código PHP que muestra la configuración para enviar datos de compras en Prestashop a Google Tag Manager y Analytics.

 

Ahora vamos al tpl a recoger esos datos y enviarlos a Google Tag Manager:
El tpl de order-confirmation está en:
httpdocs/themes/tu-tema-activo/order-confirmation.tpl

En este fichero, en la primera linea despues de los tipicos comentarios de prestashop incluimos el siguiente código:

{literal}
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'transactionId': '{/literal}{$id_pedido}{literal}',      
  'transactionTotal': {/literal}{$total_a_pagar}{literal},
  'transactionTax': {/literal}{$impuestos}{literal},
  'transactionShipping': {/literal}{$gastos_envio}{literal},
  'transactionProducts': [{/literal}{foreach from=$productos item=producto name=productos}{literal}
  {
'sku': '{/literal}{$producto.id_product}{literal}',
'name': '{/literal}{$producto.name}{literal}',
'price': {/literal}{$producto.price_wt}{literal},
'quantity': {/literal}{$producto.quantity}{literal}
}{/literal}{if $smarty.foreach.productos.iteration != $productos|@count}{literal},{/literal}{/if}{literal}
{/literal}{/foreach}],{literal}
'event': 'transactionComplete'
})
</script>
{/literal}

Quedaría así:

Código fuente de JavaScript para enviar datos de compra a Google Tag Manager desde Prestashop.

Recordad poner en el comienzo a la etiqueta <SCRIPT> Y EN EL FINAL, las llaves {literal} al inicio y {/literal} al final.

 

Ahora todas las compras que se hagan en la tienda se enviarán a Google Tag Manager, solo nos queda decirle a Google Tag Manager que envíe esos datos a Analytics.

Para ello primero creamos un nuevo Activador en el menú, la pestaña de Activadores:

Pantalla de Google Tag Manager con el espacio de trabajo Default Workspace y menús de configuración.

Del siguiente modo, respetando mayusculas y minusculas:

Configuración del activador en Google Tag Manager para eventos de transacción completa en Prestashop.

Ahora vamos a crear una nueva etiqueta que es la que mandará los datos de la conversión a analytics, en este caso el tipo de seguimiento es Transacción:

Configuración de etiqueta de Google Tag Manager para enviar transacciones a Google Analytics.

 

Y el activador seleccionamos el que hemos creado.

 

Finalmente, podremos comprobarlo haciendo una compra de prueba en nuestra tienda y yendo a Analytics, a la parte de conversiones -> Comercio electrónico y ver si ha llegado la conversión.

descuderosanchez@gmail.com More posts by [email protected]
Contactar ahora