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:
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».
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.
Siempre podremos cogerlo de nuevo en la pestaña Administrador, en la opción Instalar Google Tag Manager.
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
- Vamos a Google Tag Manager.
- Seleccionamos nuestro proyecto.
- Le damos a Añadir nueva etiqueta:
- Ahora la etiqueta debe quedar así, omitid el paso de la Dimensiones personalizadas que os la explico en el punto 5:
- Como veis, he añadido dos dimensiones personalizadas. En Analytics tenéis la opción de añadir estas dimensiones del siguiente modo:
- Y así es como las tengo yo:
- 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:
Y a continuación sobre el simbolo ‘+’ azul para crear una nueva variable de tipo «Capa de datos»:
Las variables nos deben quedar así:
-
Ahora, finalizamos la etiqueta dejandola como he indicado al principio y guardamos, por último publicamos los cambios, en la parte derecha del panel:
Pulsamos sobre el botón publicar. -
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:
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í:
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:
Del siguiente modo, respetando mayusculas y minusculas:
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:
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.
