Google Tag Manager tutorial : cómo usarlo para mejorar la analítica de tu web (sin tocar una línea de código)

¬ŅRecuerdas el d√≠a en que quisiste conectar Google Analytics a la web de tu tienda online? Con este Google Tag Manager tutorial hoy podras conectarlo.
Seguramente pensaste que ser√≠a un proceso sencillo‚Ķ hasta que te encontraste con una etiqueta de c√≥digo largu√≠sima y algo sobre el ‚Äúhead‚ÄĚ de tu plantilla que, salvo que tuvieras algunas nociones de dise√Īo web, no te sonar√≠a de nada.

As√≠ que es probable que acabases llamando a un dise√Īador externo, que tard√≥ en hacer la configuraci√≥n el mismo tiempo que en tomarse un caf√© (pero te cobr√≥ la hora completa de trabajo).

Y para a√Īadir el c√≥digo de Google Ads, igual.
Y para el p√≠xel de Facebook o el de Snapchat lo mismo.
Y así sucesivamente.

Por eso…
¬ŅNo ser√≠a mucho mejor que cada vez que quisieras conectar una nueva herramienta de anal√≠tica web a tu e-commerce pudieras hacerlo t√ļ mismo sin depender de nadie?

Pues eso es posible si utilizas Google Tag Manager, el administrador de etiquetas de Google.
Y en este post te vamos a explicar qué es y cómo utilizarlo paso a paso con un tutorial tag manager muy completo.

As√≠ dejas de pagarle los caf√©s al dise√Īador. ūüėČ

ūüĎČ Qu√© es Google Tag Manager y c√≥mo funciona

Para que lo entiendas mejor, vamos a suponer que tu web es un edificio, y para acceder a él, cada herramienta utiliza su propia puerta (su etiqueta o código de seguimiento).

Así que, cada vez que quieres conectar otra nueva, tienes que crear una puerta exclusivamente para ella (es decir, volver a meterte en el código fuente de la web y editarlo).

Pero lo que te permite Google Tag Manager (GTM) es crear una ‚Äúpuerta universal‚ÄĚ por la que pueden entrar todas las herramientas.
O dicho de otro modo:

Google Tag Manager genera un fragmento de c√≥digo √ļnico, llamado ‚Äúcontenedor‚ÄĚ, para conectar cualquier herramienta externa sin modificar el c√≥digo fuente de la web.
As√≠, cuando quieras usar un p√≠xel para SEM, un mapa de calor o lo que sea, podr√°s hacerlo t√ļ mismo desde la interfaz de GTM.
Mucho m√°s c√≥modo (y barato). ūüėČ

✅ Términos básicos de Google Tag Manager que debes conocer

Si no tienes demasiados conocimientos sobre dise√Īo web, ahora mismo es posible que te sientas un poco perdido.

Pero no te preocupes.

Para que este tutorial tag manager te sea lo m√°s √ļtil posible, antes de nada vamos a ver algunos t√©rminos con los que es importante que te familiarices:

  • Contenedor: el fragmento de c√≥digo que genera Google Tag Manager, y el √ļnico que tendr√°s que insertar en tu web. Es ese ‚Äúc√≥digo-puerta‚ÄĚ del que habl√°bamos.
  • Etiqueta: las etiquetas son los identificadores que utilizan otras herramientas para conectarse con tu p√°gina. Google Analytics tiene su propia etiqueta, Google Ads tiene otra, el p√≠xel de Facebook tiene la suya‚Ķ Es como su ‚ÄúDNI‚ÄĚ para entrar por la puerta.
  • Variable: las variables son las ‚Äúinstrucciones‚ÄĚ de lo que debe hacer una etiqueta, como ‚Äúrecoger datos de las cookies de usuarios‚ÄĚ. Esto te lo explicaremos m√°s en detalle en este mismo post.
  • Activador: indica cu√°ndo se pone en marcha la acci√≥n de una etiqueta. Por ejemplo, la etiqueta empezar√° a recoger datos de las cookies de los usuarios ‚Äúcuando la p√°gina se haya cargado por completo‚ÄĚ.

Una vez aclarados estos términos, vamos a ver cómo puedes utilizar Google Tag Manager en tu web.

ūüĎČ Google Tag Manager tutorial: C√≥mo instalar y utilizar Google Tag Manager

La primera parte del proceso es la √ļnica dif√≠cil, donde s√≠ tendr√°s que modificar algo de c√≥digo.

Despu√©s, todo lo dem√°s ser√° muy sencillo. ūüėČ

‚úÖ 1. Instalar Google Tag Manager en WordPress

Para simplificar las cosas, vamos a explicarte cómo instalar GTM en WordPress.

Pero no te preocupes, porque si en lugar de eso utilizas PrestaShop, Magento o Shopify (o cualquier otro CMS de c√≥digo abierto), el proceso ser√° b√°sicamente el mismo.

‚ě°ÔłŹ A. Crear una cuenta

Al igual que con la mayoría de herramientas de Google, para utilizar esta debes hacerte una cuenta de usuario.

Para eso tienes que irte a la web de Google Tag Manager y rellenar los siguientes datos:

1. Datos de la cuenta: el nombre que quieras darle y el pa√≠s.

Google-Tag-Manager-cuenta

2. Contenedor: aqu√≠ te pide que crees tu primer contenedor.

Simplemente tienes que indicar un nombre (para poder identificarlo luego) y marcar el uso que vas a darle (por lo general, ‚ÄúSitio web‚ÄĚ).

Google-Tag-Manager-contenedor

Una vez le des a ‚ÄúCrear‚ÄĚ y aceptes los t√©rminos y condiciones, acceder√°s a la interfaz de Google Tag Manager.

‚ě°ÔłŹ B. Instalaci√≥n

Lo primero que verás al entrar será un pop up como este con dos códigos:

Google Tag Manager codigo e1592213313901

Estos ser√°n los √ļnicos fragmentos de c√≥digo que deber√°s introducir en tu web, y que actuar√°n como contenedor para las etiquetas del resto de herramientas.

En general, hay dos maneras de hacerlo:

  1. Con el editor de WordPress: esto significa entrar en el archivo con el c√≥digo fuente de WordPress e introducir directamente los fragmentos de c√≥digo. No te lo recomendamos salvo que sepas muy bien c√≥mo hacerlo (porque podr√≠as borrar algo importante).
  2. Con un plugin: la opci√≥n m√°s f√°cil es utilizar un plugin que introduzca estos c√≥digos por ti. Hay much√≠simos que te ofrecen esta funci√≥n, pero puedes usar el propio plugin de Google Tag Manager.

Si no lo tienes claro, lo mejor es que se lo pidas directamente al dise√Īador (esta ser√° la √ļnica vez que tengas que hacerlo). ūüėČ

Una vez hayas instalado el c√≥digo, en la interfaz de GTM pulsa el bot√≥n ¬ęEnviar¬Ľ que te aparece arriba a la derecha.

google tag manager enviar contenedor e1592213341219

Te mostrará una ventana en la que tendrás que poner el nombre de esta versión. Cada vez que hagas una modificación en el contenedor (como conectar una herramienta, por ejemplo) el sistema creará una versión nueva de ese contenedor.

Por √ļltimo, pulsa en ¬ęPublicar¬Ľ para activarlo.

✅ 2. Instalar un código de seguimiento

Ahora sí, vamos a ver cómo conectar esas herramientas de analítica web de forma fácil y rápida con Google Tag Manager.

Algunas, como Google Analytics, ya cuentan con una configuración predefinida, mientras que en otras tendrás que hacerlo manualmente.

Vamos a ver un ejemplo de ambas.

‚ě°ÔłŹ A. Google Analytics

Primero veamos el proceso para instalar Google Analytics.

Dentro de la interfaz de Google Tag Manager, pulsa en ‚ÄúNueva etiqueta‚ÄĚ. Te aparecer√° una ventana en la que deber√°s seguir estos pasos:

  • En primer lugar, as√≠gnale un nombre a la etiqueta (para poder identificarla si la quieres editar m√°s adelante).
  • Al pulsar en ‚ÄúConfiguraci√≥n de la etiqueta‚ÄĚ, te saldr√° una inmensa lista de opciones. Escoge ‚ÄúGoogle Analytics‚ÄĚ.
  • En el tipo de seguimiento selecciona ‚ÄúP√°gina vista‚ÄĚ (suele venir as√≠ por defecto).

Ahora sal un momento de Google Tag Manager y entra en Google Analytics.

Ve a Administrar > Configuraci√≥n de la propiedad y copia el n√ļmero que te aparece bajo el ep√≠grafe ‚ÄúID de seguimiento‚ÄĚ.

google-tag-manager-g-analytics

Vuelve de nuevo a la pesta√Īa de Google Tag Manager, pincha en ‚ÄúSeleccionar variables de la configuraci√≥n‚ÄĚ y en ‚ÄúNueva variable‚ÄĚ.

Google-Tag-Manager-seguimiento-y-variables

En ‚ÄúID de seguimiento‚ÄĚ pegas el c√≥digo que has copiado de Google Analytics. El ‚ÄúDominio de la cookie‚ÄĚ lo dejas en auto.

Ahora vamos a establecer que las cookies se registren de forma an√≥nima para respetar la ley RGPD. Para ello, dentro de esa misma ventana, pulsa ‚ÄúCampos que configurar‚ÄĚ y a√Īade los siguientes campos:

 manual google tag manager

Una vez hecho, pulsa ‚ÄúGuardar‚ÄĚ.

Lo siguiente es entrar en ‚ÄúActivaci√≥n‚ÄĚ para determinar cu√°ndo se disparar√° la variable de la etiqueta.

Por defecto, la etiqueta estar√° configurada para activarse en todas las p√°ginas de tu web cuando se cargue la ventana.

Pero pulsando en ‚ÄúNuevo activador‚ÄĚ (el ‚Äú+‚ÄĚ azul arriba a la derecha) puedes a√Īadir un filtro para que solo se active en determinadas p√°ginas (por ejemplo, si quieres medir solo el tr√°fico de una landing page).

tutorial google tag manager

Lo que nosotros te recomendamos es que escojas la opci√≥n por defecto. Una vez le des a guardar, ya tendr√°s tu etiqueta de Google Analytics en funcionamiento.

Ahora vamos a ver cómo instalar la etiqueta de seguimiento de una opción fuera de la lista.

‚ě°ÔłŹ B. P√≠xel de Facebook

Para este ejemplo vamos a utilizar el P√≠xel de Facebook Ads, pero el proceso es el mismo para cualquier otra etiqueta que quieras a√Īadir.

Primero haz clic en ‚ÄúNueva etiqueta‚ÄĚ, pero dentro de las opciones de configuraci√≥n escoge ‚ÄúHTML personalizado‚ÄĚ.

En el recuadro que te aparece tienes que a√Īadir el fragmento de c√≥digo de tu P√≠xel (lo encontrar√°s en el Ads Manager de tu cuenta publicitaria).

A continuaci√≥n, pincha en la opci√≥n ‚ÄúConfiguraci√≥n avanzada‚ÄĚ que te aparece bajo el recuadro. Dentro de ‚ÄúOpciones de activaci√≥n de la etiqueta‚ÄĚ, selecciona ‚ÄúUna vez por p√°gina‚ÄĚ. El resto lo puedes dejar igual.

En ‚ÄúActivaci√≥n‚ÄĚ, de nuevo puedes elegir que el P√≠xel se active en todas las p√°ginas de tu web o solo en algunas concretas.

Cuando le des a guardar, tu P√≠xel estar√° listo para registrar las visitas de tus usuarios y hacer campa√Īas de retargeting.

ūüĎČ Ya sabes usar Google Tag Manager, pero‚Ķ ¬Ņpor qu√© quedarte solo con herramientas externas?

Hay un aspecto de la analítica de su web que muchos de nuestros clientes no suelen tener en cuenta.

En muchas ocasiones, los datos m√°s interesantes para hacer crecer tu e-commerce los puedes encontrar dentro de tu propia web.

Por ejemplo, como las estad√≠sticas de b√ļsquedas que te ofrece un buscador inteligente como Doofinder.

¬ŅQuieres saber m√°s?

Entonces puedes descargarte nustro e-book en el que te explicamos c√≥mo puedes aumentar un 20% tus ventas con un buscador inteligente.

Y si lo que quieres es probar Doofinder por ti mismo, puedes hacerlo gratis durante 30 d√≠as entrando aqu√≠.

¬°Ah! Y se instala como un plugin. As√≠ que no te preocupes por tener que tocar el c√≥digo fuente. ūüėČ

EBOOKS GRATUITOS