Variable dataLayer Google Tag Manager

Cómo insertar dataLayer de Tag Manager en Prestashop

Posted by Lucía Marín on Abr 21, 2015

Tras enfrentarme a muchas trabas para insertar una dataLayer en Prestashop, he conseguido encontrar una solución para que se interprete bien y Google Tag Manager la lea. No sé si se tratará de algo generalizado o solo del caso particular que me ha tocado a mí, pero aquí os cuento.

Al principio, el problema era que la incluía en el archivo .tpl, incluida en {literal} y {/literal}, y hasta aparecía en el código fuente de la página al publicar. Pero, mala suerte,  la consola de Google Tag Manager no la detectaba y Tag Assistant tampoco.

Así que me puse a leer e indagar sobre la programación de prestashop y su sistema de plantillas, llamado SMARTY. Resulta que ciertos caracteres especiales como las llaves “{” “}”, al utilizarse dentro de dicho lenguaje, generan conflicto (por ello se usa {literal} para insertar el código del contenedor). Pero para el dataLayer push con eso no era suficiente. Así que más quebradero de cabeza…


Por suerte, me encontré este artículo sobre cómo “escapar” las llaves en SMARTY, y con escapar me refiero en cómo escribirlas para que el sistema de plantillas las interprete sin generar ningún conflicto, y el código JS funcione y ejecute o calcule, lo que queremos enviar dinámicamente.

  1. dataLayer de Evento en Prestashop
  2. dataLayer de Ecommerce en Prestashop
  3. Insertar código de Google Tag Manager en Prestashop

dataLayer.push de evento en Prestashop

Así, un dataLayer de evento en Prestashop iría así:

<script type=”text/javascript”>

window.dataLayer = window.dataLayer || [];

dataLayer.push({ldelim}

‘event’: ‘mi evento’,
‘eventCategory’: ‘Categoría de evento’,
‘eventAction’: ‘Acción de evento’,
‘eventLabel’: ‘Etiqueta de evento’,
‘eventValue’: ’10’, //por ejemplo

{rdelim});

</script>

Donde {ldelim} == {

y {rdelim} == }

Y lo de empezar con:

window.dataLayer = window.dataLayer || [];

se utiliza para que, independientemente de dónde coloquemos el push, éste no reemplace la dataLayer anterior, sino que sume variables y valores a la dataLayer previa (en caso de que ya esté definida).

Y lo mismo si queremos incluir una dataLayer de Ecommerce Mejorado en prestashop, por ejemplo:

dataLayer de Ecommerce en Prestashop

<script type=”text/javascript”>

window.dataLayer = window.dataLayer || [];
dataLayer.push({ldelim}

‘ecommerce’: {ldelim}
‘purchase’: {ldelim}
‘actionField’: {ldelim}

‘id’: ‘ID de pedido’,       // Para valores dinámicos SÍ insertamos las llaves de SMARTY {}, ej: {$price|escape}

‘affiliation’: ”,
‘revenue’: ”,
‘tax’:”,
‘shipping’: ”,
‘coupon’: ”

{rdelim},

‘products’: [{ldelim}
‘name’: ”,
‘id’: ”,
‘price’: ”,
‘brand’: ”,
‘category’: ”,
‘variant’: ”,
‘quantity’: 1,
‘coupon’: ”

{rdelim}]
{rdelim}
{rdelim}
{rdelim});

</script>


Por último, recordar que para insertar el código del contenedor de Google Tag Manager en Prestashop, solo es necesario ir al archivo .tpl correspondiente y pegarlo tal cual, pero incluido entre {literal} y {/literal}, si no, tampoco funcionará. Normalmente: header.tpl (en la carpeta de tu plantilla).

Cómo insertar código de Tag Manager en Prestashop

{literal}

<!– Google Tag Manager –>
<noscript><iframe src=’//www.googletagmanager.com/ns.html?id=GTM-AAAAAA’
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-AAAAAA’);</script>
<!– End Google Tag Manager –>

{/literal}

About the author

3 Comments

  • Javier Rubio says:

    Hola Lucía

    Muy interesante el artículo y por encima de todo muy claras las explicaciones. Pero me queda una duda, si el código de Tag Manager hay que incluirlo (normalmente) en el archivo header.tpl ¿en qué fichero habría que incluir el dataLayer de eCommerce para recoger los datos de un pedido?

    Muchas gracias

  • Sebastián says:

    Hola Lucía, antes que nada, muy interesante el post. Quería consultarte si creés que hay diferencia en implementar el tracking de GA desde GTM en vez de hacerlo con un modulo de Prestashop. Inicialmente habia instalado GTM y GA dento de él, pero me frenó la imposibilidad de consumir datos de Ecommerce, intuyo que por la falta de un datalayer como el que contás en este articulo.

    Gracias y saludos!

    • 18:38
      07 Jun 17
      administrator

      Lucía Marín says:

      Gracias Sebastián! la diferencia será aquello que puedas configurar tú diferente en cada caso, entre una implementación de analítica hecha por una vía o la otra, no debería haber diferencia. Se trata de herramientas, pero el saber qué queremos hacer, está en nuestra mano.

      Efectivamente, en caso de usar GTM para instalar Analytics, si no tienes dataLayer de ecommerce en la página (con datos de ventas), en principio no podrás ver tampoco datos de ecommerce (como norma general se usa dataLayer para ello).

      Con el módulo para Tag Manager de Presta, o de Analytics para Presta, lo bueno es que seguramente se te generará una buena parte del trabajo por el módulo en sí, y tendrás más fácil medir el ecommerce :) normalmente los módulos y plugins buenos incluyen una parte relacionada con esto.

Comparte tu opinión