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 dataLayer 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}