Google Tag Manager. Pensaba que era más sencillo de lo que realmente ha sido. Por fin he conseguido integrar el Tag Manager de Google con la funcionalidad de eCommerce de Universal Analytics y Prestashop así que por fin puedo rastrear las transacciones que se realizan en el comercio electrónico.
Es muy importante integrar la función de eCommerce de Analytics en nuestras tiendas online para que podamos tener día a día un registro de las ventas que se realizan y sobre todo poder ver cómo se están traduciendo nuestras acciones en términos de ventas.
Para tratar este asunto tenemos que hacer un recorrido y ponernos en situación por lo que vamos a ver los siguientes temas.
- Tag Manager de Google
- Analytics eCommerce
- Arquitectura de Prestashop
- Integración
¿Qué es el Tag Manager de Google?
Podemos afirmar que con Tag Manager de Google cambia la forma de integrar Analytics, AdWords y otros muchos servicios en nuestra web siendo el gestor de etiquetas o más bien un contenedor de las mismas, de esta forma incluyendo un solo script en nuestra web podemos incluir multitud de servicios como Google Analytics o el código de registro de conversiones de AdWords, el pixel de remarketing de Facebook Ads u otras.
La estructura básica de Tag Manager se compone de cuentas, contenedores, etiquetas y disparadores pudiendo existir varios contenedores (sitios web, aplicaciones iOs o Android) para una misma cuenta, varias etiquetas para un contenedor y varios disparadores para una etiqueta.
Un resumen muy simple es que las etiquetas (acciones) serán lanzadas cuando suceda un evento (disparador) que puede ser la visita de cualquier página, o solo de alguna, o un clic sobre un botón o disparadores algo más avanzados.
Para crearos una cuenta tenéis que ir a su página web y cuando sigáis el proceso y creéis vuestro primer contenedor os darán un código, apuntadlo en un editor de texto o en algún sitio (aunque podéis recuperarlo después) puesto que este código nos hará falta para incluirlo en nuestro Prestashop (o cualquier otro sitio web).
Este código debe ir justo después de la etiqueta de apertura de <body> aunque en Prestashop tiene su miga pero en cualquier otro documento HTML o PHP podéis ponerlo sin problema, en Prestashop se hace de una manera diferente porque usa Smarty como sistema de templates. Ahora lo vamos a explicar.
Para cerciorarse que el código está bien instalado podéis mirar vuestro código fuente al visitar la página o podéis instalar en Chrome la extensión Tag Assistant que nos va a servir para ver qué etiquetas tenemos en nuestra web.
Os dejo una presentación de de los conceptos clave de Tag Manager.
En este otro enlace tenéis un montón de videos de entrenamiento para hacer uso del administrador de etiquetas.
Instalar Analytics en Google Tag Manager
Antes de seguir vamos a ver como instalar Analytics en Google Tag Manager.
Primero de todo y después de haber creado nuestro contenedor tenemos que crear una nueva etiqueta del tipo Analytics.
Una vez seleccionada y eligiendo entre Analytics Universal o el común debemos configurar la etiqueta, básicamente se nos pedirá introducir el código de seguimiento de Analytics y establecer un tipo de seguimiento de página vista.
Por último tenemos que indicar que esta etiqueta se lance en todas las páginas.
Debemos crear la etiqueta y por último publicar. A partir de ahora Analytics nos registrará las visitas a nuestra web a través de GTM.
Comercio electrónico de Google Analytics
Dentro de la monitorización de conversiones dentro de Google Analytics tenemos la opción de activar la función de comercio electrónico a través de la cual podremos ver las conversiones que se realizan en nuestra tienda online.
Con esta funcionalidad seremos capaces de ver en nuestro panel de Google Analytics las transacciones que se realizan en nuestra página web pero para ello tendremos que poner un código javascript en la tienda que queramos analizar. En este enlace podéis ver la configuración del comercio electrónico a través de la librería de Google Analytics Universal que nos serviría si pusiésemos el código normal de Analytics pero tenemos que recordar que lo tenemos incorporado a GTM por lo que ese código no nos va a servir.
Pero… ¡hey! estamos de suerte ya que con Google Tag Manager tenemos otro código similar.
<script>
dataLayer = [{
'transactionId': '1234',
'transactionAffiliation': 'Acme Clothing',
'transactionTotal': 38.26,
'transactionTax': 1.29,
'transactionShipping': 5,
'transactionProducts': [{
'sku': 'DD44',
'name': 'T-Shirt',
'category': 'Apparel',
'price': 11.99,
'quantity': 1
},{
'sku': 'AA1243544',
'name': 'Socks',
'category': 'Apparel',
'price': 9.99,
'quantity': 2
}]
}];
</script>
Este código debe estar «siempre» encima de la declaración del contenedor en nuestro sitio web, es decir, antes del iframe de Tag Manager. Como vamos a ver en Prestashop esto no es posible (o al menos yo no he sabido hacerlo por lo que he tenido que hacerlo de otra manera).
Tag Manager en Prestashop
Habíamos dicho que el contenedor debe estar justo después de la apertura de la etiqueta body en nuestro código HTML. Prestashop usa Smarty como sistema de plantillas de sus themes por lo que veréis que los ficheros no son php sino que son tpl y no se puede meter código como tal sino que tiene su propia sintaxis, en este caso los scripts deben incorporarse entre entre las etiquetas {literal} y {/literal}.
Esto normalmente lo encontraremos en el fichero header.tpl y tras localizar la etiqueta <body> debemos incrustar justo después lo siguiente.
{literal}
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N6TGTS"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N6TGTS');</script>
<!-- End Google Tag Manager -->
{/literal}
Incorporar el seguimiento de eCommerce
Vamos a recapitular un poco antes de seguir:
- Google Tag Manager encapsula diferentes servicios en un contenedor.
- Para instalar el contenedor basta con pegar un código en nuestra web.
- Analytics tiene una función de seguimiento del comercio electrónico.
- A través de GTM se puede mandar información del ecommerce a Analytics.
Partimos del proceso típico en un proceso de compra, es decir, primero elegimos los productos, posteriormente realizamos el pago y por último se nos indica la confirmación del mismo. Es en este último paso donde nosotros tenemos que actuar.
Prestashop usa un modelo de programación MVC (Modelo – Vista – Controlador) así que todos sus módulos y su estructura se basa en un controlador que recoge los datos de un modelo y los presenta en una vista así que os podéis imaginar lo siguiente lo que tiene que ser… ¡Exacto! La modificación de los controladores adecuados para enviar a la vista los datos necesarios.
Prestashop por defecto cuando terminamos un pedido se nos presenta la plantilla order-confirmation.tpl (en la carpeta del theme) cuya llamada se hace desde el controlador OrderConfirmationController.php (en la carpeta controllers/front).
Debemos poner primero en el controlador en la función initContent y antes de la línea $this->setTemplate(_PS_THEME_DIR_.’order-confirmation.tpl’); el siguiente código.
$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
));
En segundo término tenemos que editar el fichero order-confirmation.tpl y después de los comentarios introducir el código que envía los datos a GTM.
{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}
NOTA: Gracias a Jonatan por haber identificado un error en el código que había puesto.
¿Pero no habíamos dicho que este código debía estar antes de la declaración del contenedor? Recuerda que había entrecomillado lo de «siempre» y es que para que funcione correctamente en Prestashop veréis que he incorporado un push para enviar los datos y además en las variables del dataLayer he incluido un evento que nos servirá de disparador para la transacción.
En Google Tag Manager tenemos que crear ahora una nueva etiqueta del tipo Analytics Universal y configurarla como anteriormente (la anterior no hay que borrarla) pero en lugar del tipo Página Vista debe ser del tipo Transacción y debemos crear un disparador personalizado del tipo evento de forma que la etiqueta se lance cuando sucede un evento, en este caso cuando suceda transactionComplete.
Con todo esto y guardando la etiqueta podemos publicar de nuevo el contenedor. Esto nos registrará las transacciones cuando se complete una compra pagada a través de un TPV que luego dirija a esta página o pago con transferencia bancaria.
Pero podemos tener instalado también el módulo de PayPal que tiene sus propios controladores y sus propias plantillas por lo que debemos replicar lo anterior en sus propios ficheros. El controlador es el fichero submit.php dentro de modules/paypal/controllers/front.
El código será el mismo que el anterior en la función initContent antes de la línea $this->setTemplate(‘order-confirmation.tpl’);
La plantilla está en modules/paypal/views/templates/front y debe tener el mismo código que en la plantilla anterior.
Recuerda que el evento enviado en el dataLayer debe ser diferente en este caso y se debe crear otra etiqueta que registre transacciones pero que se dispare bajo otro evento, por ejemplo transactionCompletePayPal.
Una vez guardados los ficheros y subidos al servidor solo nos queda esperar a que se haga alguna compra para verlo reflejado en nuestro Google Analytics en la sección de comercio electrónico.
Imaginaos lo potente que es esto para analizar de dónde proceden las compras y la cantidad de decisiones que se pueden tomar para mejorar nuestra tienda online. Es sin duda un aspecto esencial en la analítica de cualquier ecommerce.
Por otro lado existe la función de comercio electrónico mejorado, pero no es objetivo de esta entrada y es algo más avanzado pero nos permite registrar visitas al producto, incorporación al carrito de la compra, devoluciones de importes, etc. El gran hermano.
¿Me he dejado algo? ¿He hecho algo mal? ¿Se puede mejorar? ¿Tienes dudas o no lo consigues? No dudes en preguntarme a través del formulario de contacto o a través de los comentarios.
10 comentarios en «Cómo integrar Google Tag Manager, Analytics y Prestashop»
Hola Juan, antes de nada gracias por el post, me ha servido como poco para entener de forma rápida como funciona tagmanager de forma general.
He intentado aplicar tus pasos a una tienda pero no hay manera de ver los datos en analytic.
Tengo varias duas al respecto, a ver si me puedes decir algo.
Por un lado, los nombres de los campos del datalayer entiendo que deben ser los que indicas y no otros. Mirando en la documentación(https://developers.google.com/tag-manager/enhanced-ecommerce#purchases) no me coinciden con los tuyos, por ejemplo, transactionId = id
Por otro lado, el propio datalayer se crea de otra manera con otras etiquetas para indicar que es un pago. Entiendo que esto no lo has usado por la dificultad de prestashop al usar smarty, pero no sería más sencillo si ponemos el GTM en el footer? Así todos los datalayer estarían por encima del iframe.
Hola Quique,
lo primero de todo es asegurarte que las visitas las registra correctamente a tu web, es decir, ver si tienes correctamente bien instalado los códigos de GTM e incorporada una etiqueta de Analytics que se lance en cada pageview.
Lo segundo, por lo que me comentas de los campos, los que estás viendo tú son para el Enhanced Ecommerce, es la funcionalidad extra de la que hablo en el post. Si activas el comercio electrónico mejorado en Analytics entonces puedes usar los códigos que me pones en tu comentario. Aquí tienes la documentación del Comercio Electrónico Standar: https://support.google.com/tagmanager/answer/6107169?hl=en
Por último sobre lo de colocar el código de GTM en el Footer, sí, se puede, pero ten en cuenta que el lugar natural del iframe es después de
ya que es un contenedor de etiquetas, incluso etiquetas personalizadas, javascript, html y de otros muchos servicios y colocando el código donde comento te aseguras que en un futuro si tienes que incorporar más etiquetas al contenedor estas funcionen correctamente.Te recomiendo la extensión Tag Assistant de Chrome para ver si tienes los códigos bien instalados.
Si tiens cualquier duda más quedo a tu disposición.
Un saludo!
Buenas Juan Ignacio, ante todo agradecerte el tutorial, ya que me ha servido mucho para la configuración.
Pero tengo un problema y no sé si podrás ayudarme. No me aparecen en analytics las transacciones de pedidos que contienen más de un producto.
Si el carrito tiene solo un producto, la registra, pero si está compuesto por 2,3 o 4 no lo hace.
Cual podría ser la razón?? Espero tu respuesta. Gracias!!
Buenas, dí con la solución, la parte de los productos en tú código no estaba bien, he cambiado algunas cosillas, dejo el código
{
‘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’
Hola Jonatan,
gracias por tu aportación. Ahora que lo dices me pasó justo lo mismo y luego lo solucioné pero no lo arreglé en el post por lo que me disculpo.
Por otra parte me alegra que al menos te haya ayudado a configurarlo 🙂
Un saludo.
Hola Juan,
Excelente explicación 😉
Una pregunta, al final del post hablas de la opción de comercio electrónico mejorado. Vas a escribir algún post al respecto, me interesa mucho…
O si sabes de algún otro donde aparezca esta información.
Gracias
Hola Laura!
Pues me viene al pelo tu pregunta porque ayer configuré el tema que comentas aunque configurarlo a mano es muy costoso y no me he atrevido a hacerlo así.
He preferido comprar un módulo de Prestashop, te digo cual es:
http://addons.prestashop.com/es/18623-premium-google-analytics-enhanced-ecommerce.html
Me anoto tu petición para hablar del comercio electrónico mejorado de Analytics 🙂
Un abrazo.
Hola Juan Ignacio,
felicidades por la guía súper sencilla que has hecho para la implementación de eCommerce Tag en Prestashop, me ha salvado de unos cuantos intentos
Tengo dos dudas:
1.- PayPal: tengo el módulo PayPal instalado y he leído tus pasos pero me he perdido en el disparador del evento y la maqueta, ¿te importaría ayudarme con esto?
2.- Objetivos en GA: entiendo que al ser dos eventos diferentes (transaccionOK + transaccionOK-PayPal) hay también dos objetivos diferentes en GA. ¿Hay alguna manera de juntar los dos en un solo objetivo con dos URL de confirmación diferentes?
Muchas gracias y un abrazo
Hola,
Lo probe como dices y no funciona, en mi caso tengo esto
{include file=»$tpl_dir./errors.tpl»}
{$HOOK_ORDER_CONFIRMATION}
{$HOOK_PAYMENT_RETURN}
Y añadi despues
dataLayer = [{
«totalTransaction»:»{$total_to_pay}»,
}];
Que es la variable pero al estar dentrio de un hook no me lo coje, he probado con y sin literales
¿ideas?
Gracias
Hola Juan Ignacio, excelente Post!! De veras que has hecho un excelente trabajo, muchas gracias!
Mi pregunta tiene que ver, después de pasar por el recording de Tag Manager me sale esto:
warning
This page took a long time to send a pageview hit to Google Analytics. Users could be clicking away from your site before it records a pageview. Learn more
Tendrá que ver con que estamos dejando el código después de la etiqueta de contenedor general?
Tu dices: «¿Pero no habíamos dicho que este código debía estar antes de la declaración del contenedor? Recuerda que había entrecomillado lo de “siempre” y es que para que funcione correctamente en Prestashop veréis que he incorporado un push para enviar los datos y además en las variables del dataLayer he incluido un evento que nos servirá de disparador para la transacción.»
Mira el data-layer, te dice esto a ti si se carga antes?
[
{
«gtm.start»: 146801355XXX,
«event»: «gtm.js»
},
{
«transactionId»: «245»,
«transactionTotal»: 2490,
«transactionTax»: 1,
«transactionShipping»: 0,
«transactionProducts»: [
{
«sku»: «42»,
«name»: «Abrazadera 4″»,
«price»: 2490,
«quantity»: 1
}
],
«event»: «transactionComplete»
},
{
«event»: «gtm.dom»
},
{
«event»: «gtm.load»
}
]
Gracias por tu ayuda y tus comentarios