Google Tag Manager Administrador de etiquetas

Vamos con una de esas herramientas que mucha gente desconoce, pero que muchos profesionales utilizan para coger más información en sus estadísticas en tiendas online: Google Tag Manager Administrador de etiquetas.

Google Tag Manager. Este post no es para indicar como implementarlo, aunque indicaremos los enlaces dónde se explicar. La razón es que para páginas sencillas, aún es asequible, pero en páginas grandes, debe ser un profesional quien guie cómo hacerlo. Sólo queremos mostrar que existe esta función de Google.

¿Para qué sirve Google Tag Manager?

Las etiquetas son pequeños fragmentos de código de un sitio web que permiten, entre otras cosas, medir el tráfico y la actividad de los usuarios, conocer el impacto de la publicidad online y de los canales sociales, usar el remarketing y la orientación por público, y probar y mejorar su sitio web.

¿Cómo se instala?

Mostramos un ejemplo de código para una página pequeña. Repetimos que para una página grande, aconsejamos que sea un profesional que os asesore:

// Poner en el <head> de la página 
// GTM-XXXX es vuestro código cuando os déis de alta en el Google Tag Manager 
<!-- 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-XXXX');
</script> 
<!-- End Google Tag Manager -->

Además, justo después de la etiqueta debéis poner el siguiente código para los navegadores que no tengan Javascript activado. Recordad que GTM-XXXX debe sustituirse con vuestro código de Google Tag Manager:

<!-- Google Tag Manager (noscript) --> 
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 
<!-- End Google Tag Manager (noscript) -->

Aquí tenéis más información de la puesta en marcha:

Y ahora preparamos el código que se pasará con las variables que nos interese:

// Este código debe ir primero de todo. Antes del código indicado anteriormente. 
<script>
dataLayer = [{
  'pageCategory': 'signup',
  'visitorType': 'high-value'   
}]; 
</script>

Este código debe ponerse antes del código anterior. De esta manera:

<script>
dataLayer = [{
  'pageCategory': 'signup',
  'visitorType': 'high-value'   
}];
</script> 
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

Aquí tenéis más información sobre la creación del DataLayer:

  • https://developers.google.com/tag-manager/devguide#datalayer

Vídeo demostrativo

Enlace con otros productos

El Administrador de etiquetas de Google integra plantillas de etiquetas para el seguimiento de conversiones de AdWords, Google Analytics, DoubleClick Floodlight y el remarketing de AdWords.

Qué etiquetas

Podéis crear variables diferentes según cuestras necesidades.

Conclusiones

Sólo es un pequeño contacto. Como podéis ver las etiquetas de Google son amplias y sólo consultando su documentación seréis capaces de ponerlo todo en marcha. Google Tag Manager Administrador de etiquetas.


Más información