Como integrar Google Tag Manager y Google Analytics en tu prestashop

Categories PrestashopPosted on

Si necesitas configurar etiquetas de Google en tu página web te explicaremos cómo usar Google Tag Manager.

Configuración de Google Tag Manager

Comenzaremos dándonos de alta en nuestra cuenta de Google Tag Manager.

Una vez nos hayamos dado de alta, tendremos que crear la cuenta de nuestra tienda

Y configuramos los parámetros como podemos ver en el siguiente ejemplo:

Al finalizar este proceso y aceptar las políticas de Tag Manager para la creación de cuentas, se nos abrirá un popup con dos códigos de seguimiento, uno es para poner en el <HEAD> y otro es para el <BODY>

No te preocupes si has cerrado la ventana sin darte cuenta, podrás volver a ver los datos en Administrados > Instalar Tag Manager.

A continuación, vamos a proceder a incluir esos snippets de código en nuestro prestashop, para eso tenemos que ir al fichero situado en el directorio:
public_html/themes/<TU_TEMA_ACTIVO>/templates/_partials/head.tpl

*Dependiendo del tema puede ser el archivo head.tpl o header.tpl

Justo donde empieza la etiqueta <HEAD> pegamos el primer snippet de código que nos ha dado Google Tag Manager, donde además yo he añadido un script casero, que incluye el ID de usuario y su email en caso de estar logeado, y que en los próximos pasos os explicaré su función.

{if $logged}
  {literal}
  <script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'userId': '{/literal}{$cookie->id_customer}{literal}',
      'emailUsuario': '{/literal}{$cookie->email}{literal}'
    });
  </script>
  {/literal}
{/if}
{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-M9DBMJT');
  </script>
{/literal}

Configurar dimensiones personalizadas en Google Analytics (GA)

Si accedemos a nuestra propiedad de Google Analytics, y le damos a administrar, veremos que en la columna de propiedad tenemos la opción de definiciones personalizadas > dimensiones personalizadas

Una vez allí creamos las dimensiones personalizadas con el nombre de Usuario y Email y el ámbito Hit.

Para que estas dos nuevas dimensiones, recogan los datos de Tag Manager y Prestashop y los muestren en analytics, debemos configurar las variables en Tag Manager, para ello vamos a Google Tag Manager y en el apartado variables, añadimos nuevas variables definidas por el usuario, de tipo Variable de capa de datos:

Para que la configuración nos quede así:

Creamos una con emailUsuario y otra con userID.

Captar datos de Prestashop en Tag Manager

Volvemos a nuestro espacio de trabajo de Google Tag Manager y añadimos una nueva etiqueta:

Nos aparecerá una ventana que nos dará elegir entre configurar etiqueta o activador,

Seleccionamos configurar etiqueta y a continuación indicamos que es de tipo Google Analytics.

El tipo de seguimiento será página visita y en configuración de Google Analytics (GA), seleccionamos nueva variable

Y configuramos lo siguiente:

Donde UA-XXXXXXXXX-Y será nuestro ID de Google analytics que queramos asociar al Tag Manager para recibir los dátos

Para las dimensiones personalizadas, bastará con darle al botón de la cajita y nos aparecerán las variables definidas en el paso anterior, tal y como muestra la imagen:

Y una vez guardemos la configuración, solo nos quedará decir que el activador será para todas las páginas y nos debería quedar la configuración así:

Enviar las conversiones de compras de Prestashop a Google Tag Manager y Google Analytics

En este paso, tendremos que volver a tocar el código de prestashop, para que le envíe datos del pedido a Google Tag Manager.

Por tanto, deberemos ir al fichero situado en: public_html/controllers/front/OrderConfirmationController.php
Y justo antes de la línea donde se carga order-confirmation.tpl, deberemos incluir el siguiente snippet de PHP:

$order = new Order($this->id_order);
$cart = new Cart($order->id_cart);
$productos = $cart->getProducts();
$this->context->smarty->assign(array(
  'id_orden'=> $this->id_order,
  'total'=> $order->total_paid_tax_incl,
  'shippment_price'=> $order->total_shipping_tax_excl,
  'TAX'=> ($order->carrier_tax_rate/100) + 1,
  'productos' => $productos
));

Y ahora en el fichero del template recogeremos estos datos, para ello vamos a order-confirmation.tpl y en la primera línea de código incluimos este script:

{literal}
  <script type="text/javascript">
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'transactionId': '{/literal}{$id_ orden'}{literal}',
        'transactionTotal': {/literal}{$total }{literal},
        'transactionTax': {/literal}{$ TAX’}{literal},
        'transactionShipping': {/literal}{$ shippment_price}{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}

Con esto, todas las compras que se realicen en nuestra tienda, se enviarán a google Tag Manager. Para reflejarlas en Google Analytics, tendremos que crear un activador en Tag Manager al cual le pondremos el nombre de evento transactionComplete tal y como hemos llamado en el anterior script.

Y para finalizar creamos una nueva etiqueta de tipo Google Analytics, con seguimiento de transacción donde el activador será el que acabamos de crear para el evento transactionComplete.

Ahora que ya tenemos todo configurado, solo queda publicar los cambios, para eso, le damos al botón azul ‘ENVIAR’ que está situado en Tag Manager arriba a la derecha.

Y creamos la versión con un nombre y descripción, le damos a publicar y habremos finalizado nuestra configuración.

Para comprobar que todo está correcto, vamos a Google Analytics > Conversiones > Comercio Electrónico >Visión General y si todo ha ido correctamente empezaremos a ver reflejadas las transacciones y ventas de la tienda, aunque cabe recordar que al principio pueden tardar unas horas en ser mostradas.