SOLUCIÓN – Como poner correctamente Google Tag Manager en Prestashop 1.7
Después de revisar la documentación que nos da Google y comprobar los foros oficiales de Prestashop, creemos conveniente publicar esta solución para evitar tener que instalar ningún módulo gratuito que terminan por no funcionar correctamente o tener que pagar por un módulo.
¿Cómo se instala entonces manualmente Google tag Manager?
Google nos dá 2 códigos, uno para introducir dentro de <head> y otro para introducir dentro de <body>
Ejemplo de código para <head>
<!– 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-XXXXXX’);</script>
<!– End Google Tag Manager –>
Ejemplo de código para <body>
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
RECOMENDAMOS HACER COPIA DE SEGURIDAD DEL ARCHIVO HEAD.TPL Y LAYOUT-BOTH-COLUMNS.TPL ANTES DE EFECTUAR LOS CAMBIOS PARA PODER DAR MARCHA A ATRÁS SI ALGO NO FUNCIONA.
CODIGO EN <HEAD>
Pues bien para el código de <head> entramos a themes/tu-tema/templates/_partials/head.tpl y colocamos el código justo después de un cierre de bloque, será un código como este: {/block}
PERO IMPORTANTE, AÑADIENDO AL CÓDIGO DE GOOGLE TAG MANAGER la función {literal}, quedando tal que así:
……
{/block}
<!– Google Tag Manager –>
{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-XXXXXX’);</script>
{/literal}
<!– End Google Tag Manager –>
{block name=…..
Guardamos los cambios y listo.
CÓDIGO EN <BODY>
Para el código que va en <body> entramos a themes/tu-tema/templates/layouts/layout-both-columns.tpl y colocamos el código justo después de un cierre de bloque, será un código como este: {/block} y antes de una linea de código que empieza por <main…., quedando tal que así:
……
{/block}
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
….
<main…
Si solo tienes la Etiqueta de Google Tag y la de evento de Compra.
Si Google te proporciona dos códigos: uno la etiqueta de Google Tag y otro código de Fragmento de evento de Compra los debes poner ambos dentro del Head como te he explicado justo al principio.
Un ejemplo de como quedarían los códigos en Head con las 2 etiquetas: Etiqueta de Google Tag y la de evento de compra:
Guardamos y comprobamos con la extensión de Chrome: Tag Assistant Legacy que todo está okkk.
YA LO TIENES!!!!
