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…
Guardamos y comprobamos con la extensión de Chrome: Tag Assistant Legacy que todo está okkk.
YA LO TIENES!!!!
