SOLUCIÓN – Como poner correctamente Google Tag Manager en Prestashop 1.7

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!!!!


Abrir chat