Si necesitas integrar en Prestashop el código de Analytics, código de conversión o incluso de remarketing es necesario integrarlo dentreo de la plantilla que estés utilizando, tendrás que modificar los ficheros de la plantilla tantas veces como códigos necesites integrar.
Para evitar esto y no necesitar modificar la plantilla cada vez que sea necesario integrar un código utilizaremos Google Tag Manager.
Google Tag Manager o GTM es una herramienta muy potente, es un sistema de administración o gestor de etiquetas que nos permite actualizar de forma fácil y rápida todas aquellas etiquetas/pixeles/códigos dentro de su plataforma sin tener que añadir directamente el código en la web o apps. Estos códigos son principalmente de herramientas de análisis de tráfico como Google Analytics, campañas de marketing de pago como Google Adwords/Facebook Ads y herramientas de optimización.
Ya tenemos claro que es Google Tag Manager, ahora veremos como podemos integrarlo en Prestashop editando la plantilla, y añadiendo el código que tengamos de Tag Manager. En este caso estamos dando por sentado que te has registrado en GTM y has creado una cuenta a la que tienes asociado un contenedor y a su vez tendás un ID de contenedor, del estilo GTM-xxxXXXX (donde xxxXXXX son unicos para cada contenedor, tu tendras los tuyos). Ver imagen debajo:
Ya tenemos el código del contenedor que nos da Google Tag Manager. Lo hemos obtenido al inicial el contenedor. Puedes verlo en la sección de administración, instalación de GTM.
Como nos indica GTM, tenemos que insertar el código en nuestra página, son dos pequeñas partes, la primera en la cabecera del fichero y la otra justo después de la etiqueta de apertura <body>. Esto nos asegurará que tendremos cargados todos nuestros códigos de nuestra página.
Siguiente paso, localizar el fichero de Prestashop donde incluir el código. Se trata del fichero header.tpl dentro de carpeta themes y dentro del a carpeta del tema que tengamos activo:
themes/tema_activo/header.tpl
Ahora ya podemos descargar el fichero por FTP para realizar las modificaciones que necesitamos. Estos ficheros los puedes abrir con el block de notas, con dreamweaver, cualquier editor que utilices habitualmente para tus páginas web.
Ahora abrimos el archivo y antes de la línea </head> tenemos que insertar lo siguiente:
{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}
Ahora abrimos el archivo y después de la línea <body> tenemos que insertar lo siguiente:
{literal}
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-xxxXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
{/literal}
NOTA: Recuerda que tu ID será diferente a este del ejemplo que hemos utilizado: GTM-xxxXXXX.
Una vez realizado los cambios guardamos el archivo y lo subimos de nuevo al FTP. Para asegurarnos que los cambios en Prestashop son correctos iremos al administrador de Prestashop dentro de Parámetros Avanzados -> Rendimiento -> Forzar compilación, lo activamos para que se apliquen los cambios.
Con esto ya tenemos todo listo y funcionando correctamente, solo queda comprobar si aparece en el código fuente, o con la extensión Google Tag Assistant que ya nos sale nuestra etiqueta, entonces volvemos a desactivar de nuevo forzar compilación y ya tenemos instalado todo.
Suerte y a probar, recordar que una copia de seguridad es muy recomendable siempre que haces cambios. Nunca se sabe que puede ocurrir.
Sin Comentarios