Scripts de seguimiento y GTM en el head del tema

fernandodigital

Buenas a todos,

Estoy intentando integrar Google Tag Manager y un par de meta tags de verificación en la sección <head> de mi tienda PrestaShop. Utilizo un tema hijo basado en classic y he intentado añadir el código directamente en themes/mi_tema_hijo/templates/_partials/head.tpl.

El problema es que el código de GTM tiene llaves {} y Smarty parece interpretarlas, dando errores en el frontend o simplemente no cargando el script. Los meta tags los inserta, pero me preocupa la forma correcta de hacerlo para GTM y otros scripts futuros. ¿Existe alguna forma nativa o best practice para esto en PrestaShop 8?

Este es el fragmento de GTM que estoy intentando añadir:

<!-- Google Tag Manager -->
<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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

inmahub64

Hola @fernandodigital,

Entiendo perfectamente lo que te pasa. Es un clásico con Smarty. Cuando pones JavaScript con llaves {} directamente en un archivo .tpl, Smarty lo interpreta como sus propias variables o funciones y falla. Por eso es importante usar una etiqueta especial.

¿Qué versión exacta de PrestaShop estás usando? Aunque asumo que es PrestaShop 8 por lo que comentas. Y también, ¿has comprobado la consola del navegador en busca de errores específicos después de intentar añadir el código?

martaadmin

Sí, @inmahub64 tiene razón, la versión es clave, pero el error de las llaves es muy común. En PrestaShop 8.2.3, que es la que yo uso, me pasó lo mismo.

Para el script de GTM en sí, que es JavaScript puro, necesitas envolverlo con la etiqueta {literal} de Smarty. Esto le dice a Smarty que ignore lo que hay dentro y lo trate como texto literal. Para las meta tags, se pueden poner directamente sin problema, pero para los scripts, {literal} es casi siempre la solución cuando hay llaves dentro del JS.

También podrías considerar usar el hook displayHeader si no quieres tocar el head.tpl directamente, lo que te daría más flexibilidad con un pequeño módulo.

Milo

Hola @fernandodigital,

El problema que describes es muy común al añadir scripts de JavaScript con llaves ({}) en plantillas Smarty. Como bien han mencionado @inmahub64 y @martaadmin, Smarty intenta procesar esas llaves como si fueran sus propias variables o funciones, lo que genera errores de parseo.

Para solucionarlo, debes usar la etiqueta {literal} de Smarty alrededor de la porción de JavaScript que contiene esas llaves. Esto le indica a Smarty que no intente interpretar el contenido entre {literal} y {/literal}.

Aquí tienes cómo deberías modificar tu archivo themes/mi_tema_hijo/templates/_partials/head.tpl:

{* ... otro contenido del head.tpl ... *}
{literal}
<!-- Google Tag Manager -->
<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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
{/literal}

Al añadir {literal} y {/literal} alrededor del script de Google Tag Manager, Smarty lo renderizará tal cual sin intentar procesar sus llaves internas. Esto resolverá tus errores de parseo y permitirá que GTM se cargue correctamente.

Para el <noscript> de GTM, que suele ir en el <body>, deberías hacer lo mismo pero en el archivo themes/mi_tema_hijo/templates/layouts/layout-both-columns.tpl (o el layout.tpl que uses) justo después de la etiqueta <body> de apertura.

fernandodigital

¡Mil gracias, @Milo! Y también a @inmahub64 y @martaadmin por la ayuda.

Era exactamente el {literal} lo que me faltaba. Lo he añadido en head.tpl como me has indicado y el script de GTM ahora carga perfectamente sin ningún error en la consola. También he colocado el noscript en layout-both-columns.tpl con el mismo enfoque.

¡Funciona de maravilla! De verdad que no sabía cómo resolverlo. Muchísimas gracias por la explicación tan clara y la solución directa.