Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home eCommerce Prestashop

Cómo Integrar Google Tag Manager en Prestashop

9 marzo, 2019
en Prestashop
0
Prestashop Google Tag Manager tutorialmonsters.com
Share on FacebookShare on Twitter

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. 

GTM nos permite crear un único código para insertarlo en nuestra página (llamado contenedor). Desde la herramienta podemos integrar tantos códigos como deseemos sin necesidad de programación, se hace desde la propia página de GTM.

 

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:

codigos GTM

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:

 

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

Ahora abrimos el archivo y después de la línea <body> tenemos que insertar lo siguiente:

 

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

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.

Etiquetas: Google Tag ManagerGTM
ANUNCIO
Post anterior

¿Que son los códigos UTM y cómo crearlos en Google?

Próximo Post

Diferencias entre SEO, SEM Y PPC

Otros Posts

Prestashop tutorialmonsters.com

¿Cómo vender más en Prestashop 2022?

7 enero, 2022
0

Si has llegado hasta aquí seguramente ya tienes una tienda online y no estás obteniendo los resultados que esperabas. Poco tráfico y menos ventas. Estás en el sitio acertado y como primer paso es comprender...

Prestashop 1.4, mas que un lavado de cara

Cómo instalar Prestashop 1.7 en un servidor local con XAMPP

5 marzo, 2019
1

Hoy os voy a explicar paso a paso como instalar Prestashop en un servidor local con XAMPP. Para que puedas hacer pruebas de tu tienda online antes de subir a la web.

Recomendados

Curso PHP, como cortar una cadena de texto

Enviar formularios desde la web

7 marzo, 2011
Prestashop Google Tag Manager tutorialmonsters.com

Cómo Integrar Google Tag Manager en Prestashop

9 marzo, 2019
Cómo traducir una web o una documento de manera rápida y eficaz

Cómo traducir una web o una documento de manera rápida y eficaz

18 agosto, 2020
Qué es un software de gestión de recursos humanos

Qué es un software de gestión de recursos humanos

9 septiembre, 2022

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .