Analítica y Tecnología Tecnología-Labs

Etiquetas en tu sitio web: ¿Para qué sirven?

¿Qué son las etiquetas de un sitio web?
Escrito por Dani

Las etiquetas (también conocidas como tags) son fragmentos de código de programación basado en JavaScript que se colocan en el código fuente de una página web y actúan sobre ella en función de lo que hagan los visitantes.

¿Para qué sirven las etiquetas en tu sitio web?

Las etiquetas permiten al dueño de una página web, o al equipo de marketing, acceder a la información que estas recopilan e insertan en sus respectivos servicios.

Una etiqueta se pone en funcionamiento al realizar tareas específicas dentro de la web: al enviar un formulario, al pulsar un botón específico dentro de la web…

Google Analytics es un claro ejemplo de cómo funciona una etiqueta. La etiqueta envía información sobre la interacción de los usuarios con nuestra página web y desde su plataforma podemos observar todos esos datos y tomar decisiones sobre nuestro negocio.

Hay multitud de servicios con sus respectivas etiquetas que nos permiten obtener información, desde redes sociales a mensajería instantánea, publicidad, analítica web, etc…

¿Y cómo puedo gestionar todas las etiquetas que tengo en mi página web?

Puede llegar un momento en el que tengas numerosas etiquetas en tu página web y tengas etiquetas de servicios que ya has dejado de utilizar y sigan en tu código fuente ralentizando un poco la carga web. O puede ser que no tengas ciertos conocimientos de programación y quieras tener más facilidad a la hora de implementar estos tags.

Para evitar estos problemas, existen los sistemas TMS (Tag Managment System), a los que coloquialmente, se les denomina tag manager.

Un TMS es un sistema que mejora la forma de gestionar las etiquetas o “tags” que se requiere incluir en un  sitio web o una app móvil. El TMS permite colocar todos los tags de un sitio web en un solo contenedor que se gestiona como un tag en sí. De esta forma, tenemos todas concentradas en un mismo lugar pudiendo gestionar de una manera mucho más fácil nuestras etiquetas.

Con estos sistemas obtenemos muchas ventajas:

  • Código más limpio y ligero: En el código solamente aparece una etiqueta, el resto están incluidas dentro del sistema.
  • Mayor velocidad de carga de la página: Las etiquetas se añaden de forma asíncrona en la mayoría de TMS por lo que se libera tiempo de carga de la página web.
  • Mayor organización de los tags y control sobre las agencias: Una agencia de publicidad puede tener a sus clientes en el sistema y controlar sus respectivas etiquetas fácilmente y de forma organizada.
  • Independencia del equipo de desarrollo: El account manager no pierde tanto tiempo implementando las etiquetas pidiéndo al equipo de desarrollo que lo haga.

El TMS más conocido y utilizado hoy en día es Google Tag Manager, esta herramienta es gratuita y permite administrar fácilmente todo tipo de etiquetas.

Pero no solo existe Google Tag Manager, hay más sistemas TMS (la mayoría de pago) que pueden sernos de utilidad. Open Tag Manager o Tealium son algunos de los TMS destacados.

¿Cómo inserto las etiquetas en mi web?

Generalmente la instalación de las etiquetas suele ser el mismo, insertar el código antes o después de la etiqueta <body> de nuestro HTML. Pero siempre debemos leer las instrucciones para que la etiqueta funcione correctamente.

Vamos a ver como insertar nuestras etiquetas de diferentes formas. Como ejemplo vamos a hacer la instalación de la etiqueta de Google Tag Manager y luego veremos cómo implementar Google Analytics desde Google Tag Manager.

Insertar etiqueta manualmente

Si tenemos nuestra página web sin un CMS, tendremos que implementar Google Tag Manager directamente desde el código.

Para implementar la etiqueta de Google Tag manager, tenemos que insertar la etiqueta antes de <body> de HTML.

Generalmente todas las páginas tienen un fichero llamado header. Si no tienes conocimientos de programación y no quieres tocar el código, deberías contactar con alguna persona que pueda realizarlo por ti.

Insertar etiquetas desde un CMS (wordpress y prestashop)

WordPress y Prestashop son dos de los CMS más utilizados para la realización de páginas webs tanto empresariales como de ecommerce.

Puede ser un problema implementarlas en estos sistemas, pero nada que no pueda realizarse en unos pocos minutos.

Podemos implementarlas directamente en el código fuente, pero habrá que ir con cuidado si cambiamos de plantilla, ya que habría que añadirlas de nuevo.

  • En el caso de WordPress deberíamos implementarlo dentro de header.php.
  • En el caso de Prestashop deberíamos implementarlo dentro del fichero header.tpl, pero dentro de las etiquetas {literal}{/literal}

Otra opción es instalar nuestra etiquetas a través de plugins o addons.

  • En wordpress tenemos diferentes plugins que nos pueden realizar la tarea gratuitamente.
    • Insert Headers and Footers: Con este plugin podemos insertar cómodamente las etiquetas en el header o footer de nuestro sitio web.
    • DuracellTomi’s Google Tag Manager para WordPress: Con este plugin podemos insertar Google Tag Manager de manera rápida y sencilla, simplemente tenemos que indicarle el ID de nuestro Google Tag Manager.
  • Para Prestashop podemos tener más inconvenientes ya que los addons son de pago.
    • Módulo Google Tag Manager Integration: Con este módulo de prestashop podemos intregrar rápidamente Google Tag Manager.

Insertar etiqueta desde Google Tag Manager

Si tenemos Google Tag Manager activado en nuestro sitio web es ideal implementar las etiquetas a través de este sistema.

Vamos a ver como podemos implementar la etiqueta de seguimiento de Google Analytics. Para ello, hay que crear una nueva etiqueta de tipo Universal Analytics. Simplemente le indicamos el ID de seguimiento de nuestra cuenta de Google Analytics para el evento de tipo Page View y que se habilite en todos los enlaces de nuestro sitio web.

Etiquetas en Google Tag Manager

Etiquetas en Google Tag Manager

Comprueba que tus etiquetas están funcionando correctamente

Una vez hemos implementado nuestras etiquetas, debemos comprobar que están funcionando correctamente. Existe un plugin para Google Chrome llamado Tag Assistant que nos indica si están funcionando o, si por el contrario, ha habido algún error.

El funcionamiento es sencillo, una vez lo tenemos instalado en Chrome, accedemos a nuestra página web y abrimos Tag Assistant. Tras abrirlo, activamos su funcionamiento y al recargar la web nos indicará si funcionan o no.

 

Funcionamiento de las etiquetas

Funcionamiento de las etiquetas

 

Todavía no hay valoraciones

¿Te ha gustado este artículo?

Deja un comentario

Facebook Auto Publish Powered By : XYZScripts.com

Etiquetas en tu sitio web: ¿Para qué sirven?

by Dani time to read: 5 min
0