Insertar Google Tag Manager en la sección head del tema

joaquin_tienda43

Hola a todos, estoy intentando añadir el código de Google Tag Manager (GTM) y algunas meta tags de verificación de analytics directamente en la sección <head> de mi tienda. He probado a editar el archivo _partials/head.tpl de mi tema hijo, pero no estoy seguro de si es la mejor práctica y he tenido problemas con las llaves de JavaScript dentro del script de GTM.

Este es el fragmento que intenté añadir:

<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>
<meta name="google-site-verification" content="xxxxxxxxxxxxxxxxxxx" />

¿Hay alguna forma más limpia y nativa de hacerlo, quizás usando algún hook o sin modificar directamente el .tpl del tema padre, que además sea compatible con las directivas de seguridad (CSP) y que Smarty no me dé problemas con las llaves del JavaScript?

joaquindev

Confirmando lo que dice @rodrigohub16, la versión es importante. Si estás en PrestaShop 1.7.0.6 como intuyo por la mención a _partials/head.tpl y los problemas con {literal}, entonces el hook displayHeader es tu amigo.

{$HOOK_HEADER} se llama dentro de head.tpl, así que cualquier módulo o modificación que enganche a displayHeader aparecerá ahí. Para tu caso específico de GTM, la forma más sencilla sin tocar un módulo sería justamente modificar head.tpl pero asegurándote de usar el {literal}. También ten cuidado con el orden, a veces la posición del script es importante para GTM.

Y sí, siempre en un tema hijo, ¡nunca toques el tema padre directamente! Si lo haces, las actualizaciones te borrarán el trabajo.

Milo

Hola @joaquin_tienda43, gracias por la consulta. Entiendo que estás en PrestaShop 1.7.0.6, una versión que requiere un manejo cuidadoso de los templates Smarty, especialmente con JavaScript.

La forma más segura y nativa de insertar scripts y meta tags en la sección <head> de tu tienda, sin crear un módulo desde cero, es a través de la modificación del archivo _partials/head.tpl de tu tema hijo. Este archivo es el punto donde se renderiza el hook displayHeader ({$HOOK_HEADER}), que es el lugar correcto para este tipo de contenido.

El problema con las llaves de JavaScript se resuelve, como ya han apuntado, utilizando los tags {literal} y {/literal} de Smarty. Esto le indica a Smarty que ignore el contenido y lo renderice tal cual. Para tu caso, el código quedaría así en tu archivo themes/tu_tema_hijo/templates/_partials/head.tpl (o en su defecto themes/classic/templates/_partials/head.tpl si no usas tema hijo, aunque no es recomendable):

{* ... contenido existente del head ... *}
{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-XXXXXXX');
</script>
{/literal}

Explicación de los cambios:

{literal} y {/literal}: Estos tags son cruciales en Smarty para envolver bloques de JavaScript (o cualquier código con llaves {}) que Smarty no debe intentar procesar como variables o funciones propias. Sin ellos, Smarty intentaría interpretar {'gtm.start': ...} como una variable o una llamada a función, causando errores de sintaxis en el template.
Ubicación: Colocar este bloque al final del <head> (pero antes del </head>) es una práctica común para scripts de seguimiento, aunque GTM suele recomendarse lo más arriba posible. Dentro de _partials/head.tpl, puedes ponerlo justo antes de la etiqueta de cierre </head> (o antes de {$HOOK_HEADER} si quieres que se ejecute antes de otros scripts inyectados por módulos).
Meta Tag: La meta tag de verificación no necesita {literal} porque no contiene sintaxis de Smarty que pueda ser malinterpretada.

Recuerda siempre limpiar la caché de Smarty después de cualquier cambio en los .tpl para ver los efectos.

joaquin_tienda43

¡Muchísimas gracias, @Milo! Esa es la explicación exacta que necesitaba. He aplicado el {literal} y el {/literal} como indicaste en el _partials/head.tpl de mi tema hijo en PrestaShop 1.7.0.6 y ha funcionado a la perfección. Ya no tengo errores de Smarty y el GTM se carga correctamente. La meta tag también está visible. ¡Problema resuelto!

rodrigohub16

Hola @joaquin_tienda43, entiendo perfectamente tu problema, es un clásico. Antes de nada, ¿en qué versión exacta de PrestaShop estás trabajando? Esto es clave porque el comportamiento puede variar un poco. Normalmente, para inyectar contenido en el <head>, se usa el hook displayHeader.

Modificar directamente _partials/head.tpl en el tema hijo es una opción, pero hay que asegurarse de envolver el JavaScript con {literal} y {/literal} para que Smarty no intente interpretarlo. Si estás en una versión más antigua, tipo 1.7.0.x, es la forma más directa sin hacer un módulo custom.