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
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!!
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:
Podemos probar en Analytics que en la vista en Tiempo Real estamos recibiendo visitas correctamente.
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.
Modifica tu tienda en un solo sitio Si por algún motivo, no utilizas multitienda y…
En el proceso de compra no se muestran las opciones de pago Si te has…
/migrations#rm -rf ./* #php bin/console doctrine:migrations:generate #php bin/console doctrine:migrations:migrate #php bin/console doctrine:migrations:current #php bin/console doctrine:migrations:diff…
Pasos para inicializar un proyecto Symfony 5 y un panel de control de entidades Inicializando Symfony:…
MODULOS DE ODOO NECESARIOS PARA UN ECOMMERCE Enlaces de OCA de interes: En el siguiente…
Migración de un prestashop 1.7 de un dominio a otro. Copiamos la BBDD del antiguo…