El Administrador de etiquetas de Google.

El Administrador de etiquetas de Google.
Administrador de etiquetas de Google
Publicado el: 15 de octubre de 2015

Habla bajo y no molestes

Este es uno de los consejos que mi madre me repetía cuando era niño, y que como hijo obediente que soy, trato de aplicar en mi vida y en mi trabajo diario 😉 . El tiempo le ha dado la razón ya que en mi trayectoria profesional me he dado cuenta de que un buen colaborador es el que resuelve su trabajo sin generarte ningún problema adicional.

Habitualmente trabajamos con empresas de desarrollo en proyectos en los que solamente gestionamos la parte de promoción y venta, sin tener acceso al código. Una parte fundamental de nuestro trabajo es el de implementar las métricas necesarias para saber por qué canales entran las ventas a nuestra página, la procedencia de las visitas que rellenan formularios de contacto o por donde se va el tráfico. En definitiva, cualquier tipo de éxito en nuestros objetivos iniciales o conversión.

Estas conversiones se pueden implementar desde un sistema métrico como Google Analitycs añadiendo unas etiquetas específicas en algunas partes determinadas del código. El problema es que para implementar estas etiquetas necesitamos tener acceso al código.

Si hacemos una correcta planificación inicial y determinamos todas las etiquetas necesarias anticipándonos al desarrollo se las podemos pasar al programador antes de comenzar, pero en muchas ocasiones esto no fácil. Por otro lado cualquier cambio posterior tendría que modificarse en código, con nuevas peticiones al programador.

  • En primer lugar dependemos de la velocidad con la que el desarrollador atienda nuestras peticiones, y lo más habitual es que no estén esperando por nuestras modificaciones para darles solución inmediata, por lo que el avance del proyecto se puede ralentizar.
  • Por otro lado el desarrollador recibe una nueva petición por nuestra parte. Habla bajo y no molestes. O molesta lo menos que puedas 🙂

Una magnífica solución para minimizar las peticiones de este tipo es el de implementar un Tag Manager a nuestra página. Un tag manager es un contenedor de peticiones Javascript que se inserta en la página a través del cual podemos crear nuestras métricas sin necesidad de añadir nuevo código. Simplemente necesitamos el colocar el script en la página, aunque también ayuda asegurarnos que el etiquetado de elementos como los formularios sea el correcto (más adelante veremos por qué).

Google Tag Manager

Google pone a nuestra disposición una herramienta para gestionar las etiquetas de nuestras conversiones gratuita y en español. Solamente necesitamos una cuenta de Google. Es un complemento de las Herramientas para Webmaster y Analitycs para centralizar toda la optimización y el seguimiento.

Implementar este servicio es conveniente cuando trabajamos en desarrollos compartidos, pero una vez que te acostumbras a usarlo resulta muy cómodo y tener organizadas todas las conversiones en un sitio es muy práctico y recomendable aunque tengamos acceso permanente al código.

Implementando Google Tag Manager en Prestashop

En este ejemplo vamos a ver como implementar GTM en Prestashop, pero la instalación es muy sencilla y es válida para cualquier programación o CMS donde la queramos aplicar.

En primer lugar debemos abrir una cuenta en el Administrador de etiquetas de Google. Es importante crear el GTM en la misma cuenta donde tengamos los servicios de Analitycs, herramientas de Webmaster y Adwords para tener todos los servicios centralizados y poder vincular las cuentas.


Crear-contenedor

Daremos un nombre a la cuenta creando un nuevo contenedor. En este caso seleccionaremos Sitio Web. Una vez creado el contenedor tendremos el código para instalarlo en nuestra página (donde : GTM-XXXXXX será nuestro propio código)

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<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=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXXX’);</script>
<!– End Google Tag Manager –>

Es el momento de añadir el código a nuestra página, justo después de la apertura del <body> (De esta manera conseguiremos que todas las páginas de nuestro sitio queden vinculadas a nuestro GTM)

Añadiendo el script en Prestashop.

Si trabajamos con Prestashop existen varias maneras de implementar el código:

  • Conectarnos por FTP y editar el archivo header.tpl que encontraremos en el raíz de nuestro tema, añadiendo nuestro código entre las etiquetas literal justo después de la apertura del <body>:
    {literal}  <!– Google Tag Manager –><noscript><if …    {/literal}
  • Utilizar algún módulo específico para Google Tag Manager. Si no tenemos intención de tocar el código podemos instalar alguno de los módulos desarrollados para ello. Dando un rápido vistazo encontré uno de pago, pero posiblemente buscando aparezca alguno gratuito.
  • Utilizar un módulo genérico para inyectar código. Como puede ser html probox, o cualquier otro que cumpla esa función.

Configurar nuestro Administrador de etiquetas y medir los resultados en Analitycs

El Administrador de etiquetas de Google es una herramienta potente con la que podemos hacer muchas cosas. Con ella podemos establecer las conversiones que necesitemos, generar estadísticas que nos indiquen donde clickan nuestros visitantes o introducir etiquetas de remarketing para nuestras campañas de publicidad de pago por clic.

Todas estas implementaciones las podemos generar desde la propia herramienta sin necesidad de introducir código en la página, aislando totalmente la capa y sin la dependencia del programador.

La principal dificultad de implementar estas métricas es la de comprobar si nuestros disparadores funcionan bien y los cálculos son correctos, por lo que siempre es importante contrastar los datos recibidos con las estadísticas del servidor, con Google Analitycs o con las métricas propias que nos pueda ofrecer nuestro sistema.

Google Tag Manager tiene múltiples usos y posibles configuraciones que poco a poco iremos descubriendo. En esta primera toma de contacto nuestros objetivos serán los siguientes:

  1. Instalar la etiqueta de Google Analitycs en nuestro contenedor
  2. Crear un Activador de conversión de Visita de página y otro de Formulario enviado
  3. Crear un Track de Visita de página y otro de Formulario enviado
  4. Traspasar las conversiones a Google Analitycs para comprobar los resultados

1.- Instalar la etiqueta de Google Analitycs en nuestro contenedor

Con esta etiqueta vamos a vincular nuestra cuenta de Google Analytics a GTM. De esta manera no será necesario el script habitual. Si ya lo tenemos en la página lo mejor es eliminarlo porque puede darnos error en la consola de Analytics.

De esta manera seleccionaremos como producto Google Analitycs. Es conveniente que nuestra cuenta sea de Universal Analitycs para tener acceso completo a las métricas de segmentación.

etiqueta-G-Analitycs

Introduciremos nuestro código de Analitycs (UA-XXXXXXXX-1), habilitando las funciones de Publicidad en display y seleccionando Página vista en tipo de seguimiento. Activaremos esta etiqueta con uno de los activadores predefinidos (Todas las páginas)

Guardamos la etiqueta y solo nos falta ir a la esquina superior derecha y pulsar en el botón rojo para Publicar el contenedor. En ese momento se actualizará la configuración con las etiquetas que tengamos configuradas (en este caso el seguimiento de Google Analitycs).

El último paso para completar la integración será entrar en nuestra cuenta de Google Analitycs, para comprobar que haya enlazado la cuenta correctamente. Si vamos a Administrador / Información de seguimiento / Código de seguimiento, seguramente nos encontremos con el Estado: Seguimiento no instalado (también nos indica la hora del último rastreo). Si le damos unas horas a que vuelva a rastrear el estado cambiará a Aprobado. Para comprobar en este momento si la cuenta ha quedado enlazada podemos ir a Informes / Tiempo real donde ya podemos comprobar las visitas en tiempo real.

2.- Crear un Activador de conversión de Visita de página y otro de Formulario enviado

Una vez tengamos creado nuestro contenedor y vinculado nuestra cuenta de Analitycs, vamos a ver como crear algunas métricas básicas. En este ejemplo crearemos conversiones de Visita de página y de Envío de formulario (puede ser un formulario de compra) para establecer un túnel de conversión.

En el primer paso de este proceso vamos a crear los Activadores. Crearemos un Activador de visitas de página y un Activador de envío de formularios. Los tendremos escuchando y se dispararán cuando se produzcan determinados eventos. Para ello:

Creando el Activador de visitas de página

Entraremos en Activadores y pulsaremos en Nuevo seleccionando Página Vista. Cambiaremos el nombre llamándolo “Activador Visitas Página de Compra”. En Configurar activador seleccionaremos “Página vista” y daremos continuar.  En Activar seleccionaremos “Algunas páginas vistas”, escogiendo Page URL acaba en [nombre de la página de compra (Pe pedido-rapido] y crearemos el activador.

Activador visitas página de compra

Creando el Activador de formularios enviados

Entraremos en Activadores y pulsaremos en Nuevo seleccionando Formulario. Cambiaremos el nombre llamándolo “Activador de Formularios enviados”. En Configurar activador desmarcamos “Esperar por las etiquetas” (Este evento solo va a disparar una etiqueta) y activamos “Comprobar la validación” (para este ejemplo solo nos interesan los formularios correctos).

Activador-formularios-enviados

A continuación seleccionaremos Crear variable… en el primer combo. Se nos abrirá una nueva ventana donde podremos dar nombre a la nueva variable (Id del Elemento) donde escogeremos tipo Variable de entorno automático. En Configurar variable escogeremos Id del elemento y le pondremos por nombre Variable Id elemento.

crear-una-variable

Hay que comentar que aquí necesitamos la mano del programador, porque si vamos a utilizar como variable el id del elemento, la etiqueta <form> en la página web debería tener un id específico (formulario-contacto, pe.). Es frecuente que los formularios no lleven id, por lo que por omisión el nombre html será Form1, pudiendo estropear la métrica si hay varios formularios en la página (como suele ser frecuente).

Una vez creada la variable, volveremos al formulario especificando Id del elemento es igual a [variable id del formulario (confirmar_pedido, pe.)]

Si tenemos nombre únicos para los Id de nuestros formularios, no es necesario crear ninguna nueva regla. Si no hay Id o los ids se repiten podemos utilizar el genérico (Form1), dando una nueva regla Activar si URL es igual a página de compra por ejemplo. La métrica será correcta si solo hay un formulario en la página.

Reconociendo el id del formulario de envio en Prestashop

Si usamos Prestashop y queremos implementar la conversión de envió de formulario se pueden producir varias situaciones:

  • Si utilizamos un módulo adquirido tipo “One page checkout” suele ser sencillo. Generalmente estos módulos vienen correctamente etiquetados. Simplemente le damos botón derecho encima del botón de envío de formulario en la página de pedido y copiaremos el id (id=”btn_place_order”, Pe.)
  • Si utilizamos la modalidad “Checkout en una página” que nos ofrece Prestashop la cosa cambia. Con el checkout en una página de Prestashop, una vez que tengamos rellenos los datos de usuario o nos hayamos logueado, en el momento que escogemos la forma de pago nos lleva directamente a la URL tipo /module/[forma-de-pago]/payment. En esta página hay un botón Confirmar que nos deja en la pasarela de pago correspondiente; este es un buen sitio para establecer la conversión. Lamentablemente estos botones no vienen etiquetados, por lo que tenemos dos opciones; editamos los tpls para insertar los ids o establecemos la conversión de formulario recibido según la URL.
    Podemos acceder al tpl de cada forma de pago utilizada e incluir un id editándolo a través de ftp. Si damos al id de cada formulario un nombre único, también podemos establecer cuántas conversiones entran por cada forma de pago.
    Otra opción es la de establecer la conversión en el propio Tag Manager especificando, en vez de Id del elemento por ejemplo URL acaba por payment (O acaba por /module/[forma-de-pago]/payment si queremos establecer una conversión distinta para cada forma de pago.
    Dependiendo del módulo que utilicemos de forma de pago (cada TPV virtual suele tener un módulo distinto) puede cambiar la configuración. Si utilizamos por ejemplo el módulo de Paypal, en de Checkout en una página, el vinculo con la pasarela de Paypal se hace a través de un enlace . En este caso, en vez de establecer el procesador de envió de formulario puede ser conveniente crear un Procesador de Click, identificando el enlace  <a href id=”pasarela-paypal”> para establecer la conversión.
  • Si utilizamos la modalidad “5 pasos”. La instalación es la misma que en el caso del Checkout en una página de Prestashop, ya que al final nos rebota a la misma página del módulo de pago correspondiente como antes comentábamos. Lo que sí podemos incorporar es una conversión al principio para ver cuántos de nuestros clientes abandonan el carro a causa de este laaargo y tedioso proceso.

El proceso para establecer estas conversiones correctamente depende de la configuración y necesidades de cada tienda; lo importante es entender el funcionamiento y adaptarlo a nuestras necesidades de análisis.

3.- Crear un Track de Visita de página y otro de Compra realizada

Ya tenemos creados los activadores que dispararán nuestros eventos. Es el momento de crear las etiquetas que nos permitirán guardar esos datos y traspasarlos a Google Analitycs para poder comprobar los resultados. Para ello volveremos a la sección etiquetas para crear una nueva.

Creando el Track de Visita de página

Crearemos una nueva etiqueta y le pondremos como nombre “Track Visita Pedido Rapido“. Seleccionaremos una etiqueta Google Analitycs, tipo Universal Analitycs, introduciendo nuestro correspondiente Id de seguimiento y seleccionando Evento en el combo. En este momento se nos desplegarán los Parámetros de seguimiento de Eventos, que rellenaremos con los siguientes datos:

Categoría: Visita a pedido rapido Acción: Visita Etiqueta: Track Visita a pedido rapido Valor:

Track-visita-pedido-rapido

El cuarto paso será seleccionar el Activador. En este caso pulsaremos el botón Más que nos mostrará una pantalla con los activadores que tengamos creados y nos permitirá escoger “Activador visitas página de compra

Creando el Track de Compra realizada

Crearemos una nueva etiqueta y le pondremos como nombre “Track Compra realizada“. Seleccionaremos una etiqueta Google Analitycs, tipo Universal Analitycs, introduciendo nuestro correspondiente Id de seguimiento y seleccionando Evento en el combo. En este momento se nos desplegarán los Parámetros de seguimiento de Eventos, que rellenaremos con los siguientes datos:

Categoría: Envio Compra realizada Acción: Envio Etiqueta: Track Envio Compra realizada Valor:

En este caso también seleccionaremos como Activador Más, escogiendo el activador “Activador de Formularios enviados

4.- Traspasar las conversiones a Google Analitycs para comprobar los resultados

Una vez que tenemos nuestro GTM configurado para guardar todos los datos necesitamos un sistema para visualizarlos. Vamos a ver como hacerlo configurando las conversiones en Google Analitycs. Comprobar que las métricas que estamos implementando funcionen correctamente es una parte básica de la instalación.

Vamos a crear dos tracks que nos servirán para “escuchar” los eventos que estamos recogiendo con el Tag manager. En primer lugar nos logueamos en Analitycs y abrimos la opción Objetivos, dentro del menú de Administrador / Ver para crear un nuevo Objetivo. Pulsaremos el botón rojo Crear nuevo Objetivo estableciendo los siguientes parámetros:

Descripción del Objetivo:

Nombre: “Track visita pedido”, Id del espacio objetivo: Id del objetivo 1/ objetivo establecido en 1, Tipo: Evento

Información del Objetivo:

Categoría igual a: Visita a pedido rapido Acción igual a: Visita Etiqueta igual a: Track Visita a pedido rapido

track-analitycs

Repetiremos el proceso para el segundo track con estos parámetros:

Nombre: “Track compra realizada”, Id del espacio objetivo: Id del objetivo 2/ objetivo establecido en 1, Tipo: Evento

Información del Objetivo:

Categoría igual a: Envio Compra realizada Acción igual a: Envio Etiqueta igual a: Track Envio Compra realizada

Con estas dos conversiones creadas tendremos nuestro Analitycs preparado para recibir los datos de los Tracks de Visita a pedido rápido y Compra realizada.

Comprobando que todo haya ido bien

Si vamos a nuestro Analitycs, sección Conversiones, Objetivos, Visión General, comprobaremos que ya están creados los Tracks que registrarán datos y que se cargarán como el resto de datos de Analitycs, a final del día. Pero gracias a el apartado Tiempo real, podemos asegurarnos que vayamos a recibir datos. De esta manera entraremos en Tiempo real / Eventos y escogeremos Eventos (Visualizando: últimos 30 minutos). Si todo ha ido bien y entramos en la página de pedido rápido o pulsamos el botón que tenemos trackeado, veremos la acción en tiempo real.

Visita-en-tiempo-real

Obviamente si preparamos este análisis antes de que la página tenga tráfico será muy fácil hacer esta comprobación. Si la página ya está en funcionamiento nuestras visitas no serán las únicas registradas, pero el control por segundos hace fácil comprobar si son las nuestras las acciones que se están registrando.

No funciona. ¿Que hago?

Si tienes algún problema con la implementación, Google Tag Manager cuenta con una herramienta que te ayudará a descubrir los errores, el modo Vista Previa.

Si desplegamos el combo del botón Publicar, en la esquina superior derecha, tendremos acceso a la opción Obtener una vista previa y depurar. En este modo depuración, si abrimos una ventana con la página que tiene el Tag manager nos mostrará las etiquetas que se disparan en cada página, facilitándonos la comprobación de etiquetas y activadores.

debug-google-tag-manager

En definitiva

El Adminitrador de etiquetas de Google pone a nuestra disposición una herramienta potente y que nos ayudará a implementar casi cualquier tipo de métrica que necesitamos en nuestra página aislando la capa y permitiendo introducir cambios necesidad de escribir código.

Director Técnico at PlanB-Ecommerce S.C.
Me han apasionado los ordenadores desde que mi padre me compró mi primer CPC. Ahora me dedico a ayudar a empresas a conseguir sus objetivos en internet.