Administrador de etiquetas de Google: introducción

Este capítulo proporciona una descripción general de cómo comenzar con Google Tag Manager, agregar una etiqueta y analizarla para ver si está completa.

Mientras avanzamos por el proceso, usaremos el blog (creado en el capítulo anterior) para la demostración de diferentes pasos.

Step 1 - Como se muestra en la captura de pantalla anterior, haga clic en el código del contenedor (GTM-XXXXXXX) en la esquina superior derecha junto a la etiqueta Cambios en el espacio de trabajo: 0.

Verá el cuadro de diálogo Instalar Google Tag Manager.

Ahora, aquí queremos instalar el código de Google Tag Manager en nuestro blog.

Step 2 - Para obtener el código GTM en la figura anterior agregada en el blog, vaya a https://Blogger.com e inicie sesión con sus credenciales.

Se le presentará una pantalla como se muestra a continuación con el nombre de su publicación de blog en la lista.

Step 3 - Desde el panel de la izquierda, ubique la opción: Tema.

Verá la siguiente pantalla.

Step 4- Haga clic en Editar HTML para editar el código HTML del blog. Un código fuente HTML para su blog será visible, como se muestra en la siguiente figura.

Aquí, queremos instalar el código Google Tag Manager. Según las instrucciones de GTM, debemos insertar el código en las siguientes ubicaciones:

Lo más alto posible en la etiqueta <head>
En la etiqueta <body>

Step 5- Busque la etiqueta <head> en el código HTML anterior. Volver ahttps://tagmanager.google.comy copie el código en el cuadro de diálogo Instalar Google Tag Manager en el paso 1 anterior. Pegue el código copiado exactamente debajo de la apertura de la etiqueta <head>.

Step 6 - De forma similar, busque la etiqueta <body> en el código HTML.

Note- Puede usar la tecla de método abreviado Ctrl + F para encontrar la etiqueta <head> y <body>. La función de búsqueda del navegador será útil para encontrar las etiquetas.

Una vez que haya localizado la etiqueta <body>, repita el procedimiento para copiar el código asociado con la etiqueta <body> desde Google Tag Manager.

Para facilitar la localización de la etiqueta, normalmente, la etiqueta <body> comenzará con <body expr: class = '"loading" + data: blog.mobileClass'>.

Pegue el código requerido debajo de la etiqueta <body> y luego haga clic en Guardar tema.

Mostrará el siguiente error, y es normal ver ese error.

Step 7 - Para solucionar este problema, en el código de Google Tag Manager debajo de la etiqueta <head>, busque la línea con -

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

Reemplace la & como se subraya en la línea anterior con &y haga clic en Guardar tema. Se solucionará el error.

Esto concluye el proceso de agregar el código de Google Tag Manager a su blog.

Introducción a la etiqueta

En términos sencillos en el sitio web de asistencia de Google Tag Manager, una etiqueta es un fragmento de código que envía información a un tercero, como Google Analytics.

Siguiendo el ejemplo de ahí, con respecto a una herramienta analítica en particular, puede haber múltiples etiquetas asociadas. Tenerlos todos en una página es realmente una ventaja, ya que el comercializador de productos podrá ver múltiples métricas asociadas con la página.

Sin embargo, hay un punto igualmente importante a tener en cuenta aquí, uno no debe exagerar las etiquetas en un sitio web. Esto no solo aumenta la confusión al administrar la etiqueta, sino que también hace que sea complicado diferenciar los datos que provienen de varias etiquetas.

El siguiente código, como hemos visto en el cuadro de diálogo Instalar Google Tag Manager, es en realidad una etiqueta.

<!-- 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-M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

Ubicación de una etiqueta

La ubicación de una etiqueta puede estar en cualquier parte del código fuente de la página. Puede estar en la parte superior como la de arriba o puede sentarse en el pie de página transmitiendo la información que se requiere.

Esto concluye con una introducción rápida a una etiqueta y cómo se puede crear.

Disparadores

Los activadores detectan realmente cuándo se activará una etiqueta. Se trata de un conjunto de reglas para configurar una etiqueta que se activará. Por ejemplo, los disparadores pueden decidir que se disparará una etiqueta en particular 'X' cuando un usuario realice la acción 'Y'. Más específicamente, un disparador puede hacer que una etiqueta se dispare cuando se hace clic en un botón en particular en una forma particular.

Los disparadores son condiciones que se pueden adjuntar a una etiqueta para que funcione de la manera deseada. Un ejemplo del mundo real sería considerar que se está configurando una etiqueta para una transacción exitosa en una página de comercio electrónico.

La etiqueta indicará si la transacción se realizó correctamente. Para hacerlo, se creará un disparador, que dirá, active la etiqueta solo cuando se muestre al usuario la página de confirmación de la transacción.

Más destacado, considere que desea realizar un seguimiento de todas las visitas a la página de un blog / sitio web. Entonces, específicamente, puede crear una etiqueta con Google Analytics, que se activará cuando el usuario acceda a cualquier página de su blog / sitio web. En este caso, un activador será genérico y dirá que active esta etiqueta en todas las páginas. El disparador se configurará en consecuencia.

El desencadenante a veces puede complicarse. Por ejemplo, si alguien hace clic en un botón en una página específica, active una etiqueta.

Como se muestra en la siguiente figura, puede acceder a los disparadores haciendo clic en Disparadores en el panel lateral izquierdo de la pantalla.

Como todavía no hay ningún activador configurado, no verá resultados en los activadores.

Variables

Básicamente, las variables son valores que se pueden cambiar.

Por ejemplo, consideremos un simple clic en un enlace. Cuando se hace clic en un enlace, hay varias variables integradas que se recopilan con este evento de clic. Estas variables pueden eventualmente usarse para registrar el enlace, que se redirige cuando un usuario hace clic en el botón de enlace en particular.

Entrando un poco en detalle, también puede registrar la clase div particular del elemento en el que se hizo clic, utilizando variables. Se llaman variables, porque si hay 10 botones de enlace diferentes en la página, la redirección de estos botones de enlace va a cambiar, dependiendo de en cuál de los elementos se haga clic.

Puede acceder a las variables utilizando el panel izquierdo y haciendo clic en Variables.

Google Tag Manager ofrece dos tipos de variables:

Variables integradas
Variables definidas por el usuario

Como indican los nombres, tiene la posibilidad de utilizar las variables existentes que ofrece Google Tag Manager o puede crear sus propias variables.

Consideremos un ejemplo y veamos cómo funciona una etiqueta. Ahora depuraremos la etiqueta con Google Tag Manager.

Depurar una etiqueta

En la sección inicial de este capítulo, nos tomamos un tiempo para agregar el código de seguimiento del Administrador de etiquetas de Google a nuestro blog en Blogger.com.

Este fue el primer paso para que Google Tag Manager identificara nuestro código de seguimiento. Si observa atentamente, en el script que se ha incluido en la etiqueta <head>, existe un código de seguimiento de Google Tag Manager en el formato GTM-XXXXXXX.

Ahora, cuando se trata de depurar una etiqueta, es bastante simple con la interfaz de Google Tag Manager. Usaremos la etiqueta Basic Google Analytics para la demostración. Suponemos que ya existe una cuenta de Google Analytics.

Creación de una etiqueta básica de Google Analytics

En Google Tag Manager, para crear una etiqueta, hay varios pasos involucrados. Para adentrarnos en los detalles de cada uno de ellos, consideremos la siguiente pantalla.

Step 1 - Haga clic en el botón AÑADIR UNA NUEVA ETIQUETA.

Se deslizará un panel de la derecha para iniciar el proceso de creación de una nueva etiqueta. Esto mostrará una etiqueta en blanco sin título para que la configure.

Step 2- Proporcione un nombre a su etiqueta. Démosle el nombre: Primera etiqueta.

Step 3 - Una vez hecho esto, haga clic en el texto / icono - Elija un tipo de etiqueta para comenzar la configuración….

Otro panel se deslizará desde la derecha, que mostrará los siguientes tipos de etiquetas.

Como hemos visto en la definición, existen diferentes etiquetas asociadas con diferentes herramientas analíticas. En este paso en particular, Google Tag Manager requiere que especifique el tipo exacto de etiqueta que desea crear.

Notará algunos tipos de etiquetas de la siguiente manera:

Universal Analytics
Google Analytics clásico
Remarketing de AdWords
Google Optimize

Note- La analítica universal es la versión mejorada y más popular de Google Analytics. Sin embargo, hay muchos sitios que emplean Google Analytics clásico.

Para este ejemplo, procedamos a especificar Universal Analytics.

Step 4- Haga clic en Universal Analytics para continuar. El control volverá a la pantalla anterior y se le pedirá que seleccione qué desea rastrear. Consulte la siguiente captura de pantalla como referencia.

Step 5 - Marque Habilitar la configuración de reemplazo en esta etiqueta.

Note- Estamos utilizando este paso para familiarizarnos con la creación de etiquetas a un ritmo más rápido. Puede continuar y crear una variable de configuración de Google Analytics sin marcar también la casilla de verificación anterior.

Step 6- Abra la interfaz de Google Analytics. En Google Analytics, busque el botónADMINen la portada. En la sección Propiedad, haga clic en Configuración de propiedad. Podrá ver una pantalla similar a la siguiente.

Step 7- Copie el ID de seguimiento. El ID de seguimiento tendrá el formato UA-XXXXX-X.

Step 8- Una vez que haya copiado el ID de seguimiento, vuelva a la interfaz de Google Tag Manager. Como ya se mostró anteriormente, pegue el ID de seguimiento en el cuadro de texto asociado.

Ahora, estamos a punto de configurar el elemento importante de la etiqueta: un disparador.

Vamos a indicarle al Administrador de etiquetas de Google que la etiqueta debe activarse si el usuario ve la página. Para hacer eso, deberíamos tener el disparador configurado usando la siguiente sección en la pantalla.

Step 9 - Haga clic en Elegir un disparador para activar esta etiqueta ...

Un cuadro de diálogo se deslizará desde la izquierda, requiriendo que seleccione un disparador. Mostrará el disparador como se muestra en la siguiente captura de pantalla.

Step 10 - Haga clic en Todas las páginas.

El control volverá a la pantalla de configuración de etiquetas. Haga clic en el botón azul GUARDAR en la esquina superior derecha. ¡Ha configurado correctamente su primera etiqueta!

Step 11 - Ahora para el modo de depuración, haga clic en el botón VISTA PREVIA en gris.

Como se muestra en la captura de pantalla anterior, aparecerá un cuadro naranja. Esto indica que el modo de depuración está activado. Accede a tu blog usando el enlace disponible.

Step 12 - Ahora, cuando acceda al blog, debería poder ver una sección en su blog que muestra la sección Depuración de Google Tag Manager.

Además, si observa de cerca, hay First Tagque se muestra en Etiquetas activadas en esta página. Esto indica que nuestra etiqueta se activó en la vista de página exitosa.

Step 13- Desde la sección de depuración, haga clic en Variables. Luego, haga clic en Ventana cargada en el panel izquierdo. Esta acción significa que estamos seleccionando una acción para analizar las variables cargadas como resultado de esa acción.

Mostrará la sección Variables como se ve marcada en un cuadro verde en la siguiente captura de pantalla.

Puede analizar las variables con mayor claridad a medida que avanzamos al siguiente capítulo.

↰ Previous page Next page ↱