Administrador de etiquetas de Google: Guía rápida

Para comprender el Administrador de etiquetas de Google, primero debemos comprender algunos conceptos relacionados.

Marketing de productos: antecedentes

Con la llegada de Internet y la web, ha habido una inmensa necesidad de diferenciarse del resto para promocionar su producto. Esta era ha superado los tiempos en que la publicidad y el marketing solían funcionar de manera fantástica con los medios de papel.

Con el requisito de que la comercialización del producto se convierta en una tarea enfocada y hábil, existe una nueva generación de profesionales llamados "comercializadores de productos". Se requiere que estas personas estén actualizadas con la tendencia del mercado, el comportamiento del usuario y los gustos y disgustos de su audiencia.

El comercializador de productos, que se pone el sombrero de analista y anunciante, necesita saber muchas cosas para estar al tanto de las cosas. Una de esas cosas es la creación de una campaña de marketing para lograr una participación exitosa del usuario.

Si seguimos la definición de Wikipedia para marketing de productos: Product Marketing is the process of promoting and selling a product to an audience.

En resumen, un comercializador de productos necesita crear varias campañas promocionales para mantenerse a la cabeza de la competencia, aumentando así las ventas.

Desde el auge de las punto com, para que la comercialización de un producto sea exitosa, se requiere la presencia de un producto no solo en el mundo real sino también en el mundo web. La presencia y aceptación en el mundo web es directamente proporcional al éxito del producto.

Herramientas de marketing de productos

En esta búsqueda de aumentar las ventas de productos además de ser creativo, un comercializador de productos debe conocer ciertas herramientas efectivas. Estas herramientas por sí mismas resultan útiles para comercializar el producto y analizar la tendencia del usuario en consecuencia.

A continuación se muestran algunas herramientas de marketing de productos de uso común:

  • Google analitico
  • Chartbeat
  • Kissmetrics
  • Métricas de Sprint
  • Woopra
  • Clicky
  • Prueba de usuario
  • Huevo loco
  • Mouseflow
  • Mint

Google, obviamente, encabeza la lista con su oferta: Google Analytics. Google introdujo esta herramienta de análisis muy temprano durante la evolución del marketing de productos. De hecho, es la herramienta más fiable y utilizada en la comunidad de marketing de productos.

La herramienta tiene su forma única de operar utilizando una interfaz fácil de usar. El usuario debe agregar el número de cuenta de Google Analytics a sus respectivas páginas web / blog. En consecuencia, Google Analytics realiza un seguimiento de las visitas y los clics del usuario.

Usando diferentes herramientas de análisis

Al igual que Google Analytics, todas las demás herramientas proporcionadas en la lista anterior tienen una forma de funcionamiento diferente. Cuando se trata de usar una herramienta en particular, requiere que se modifique el código del sitio web / blog para comenzar a rastrear el comportamiento del usuario.

Estas herramientas proporcionan un análisis sobre qué página se utilizó la mayoría de las veces, cuáles fueron las actividades realizadas por el usuario, etc. Además, estas herramientas pueden proporcionar una rápida retroalimentación en forma de datos para las funciones recién lanzadas.

La forma en que funciona Google Analytics es bastante similar a cómo funcionarían la mayoría de las otras herramientas enumeradas. Ahora, considere una organización de productos relativamente grande, enfocada en crear una nueva característica para mejorar la experiencia de sus clientes. Para una organización a gran escala, es útil tener procesos / canalizaciones de lanzamiento enormes, que obtienen la característica deseada de una manera perfecta.

Ingrese a Google Analytics. Para que Google Analytics sea útil, es necesario que todas las páginas del código del sitio web del producto tengan este número de cuenta. Por simple que parezca, para las grandes organizaciones de productos, a veces, agregar un pequeño fragmento de código en la página puede ser engorroso y requiere pruebas rigurosas después de crear esta función.

Si la organización del producto tiene como objetivo utilizar varias herramientas de análisis de datos como se indica en la lista anterior, multiplique el esfuerzo en términos de tiempo y costo por la cantidad de herramientas en uso. Esto se vuelve doloroso a medida que el producto madura. Eventualmente, evaluar el comportamiento del usuario también se convierte en una necesidad. En tales casos, es importante tener un mecanismo único para todos, de modo que sea más fácil para los comercializadores de productos crear diferentes campañas sobre la marcha.

Como las diferentes herramientas utilizan diferentes técnicas para rastrear el comportamiento del usuario, existe la necesidad de optar por un solo medio, que da cuenta de estas diferentes técnicas con diferentes herramientas.

Administrador de etiquetas de Google: introducción

Para un comercializador de productos, el uso de diferentes herramientas requiere una curva de aprendizaje respectiva. Tener diferentes herramientas implica introducir diferentes códigos y por tanto los cambios en el sitio web. Si hay un proceso simple y directo de cambiar el código del sitio web, se convierte en una bendición para agregar los diferentes códigos relacionados con diferentes herramientas analíticas.

Google Tag Manager (GTM) es una herramienta gratuita que facilita a los especialistas en marketing agregar y actualizar etiquetas de sitios web. Las etiquetas permiten el monitoreo de las visitas a las páginas del sitio, el seguimiento de conversiones, etc. Con el Administrador de etiquetas de Google, se puede tener una solución de administración de etiquetas efectiva que permite actualizaciones rápidas y fáciles en las etiquetas del sitio web. Las etiquetas son básicamente fragmentos de código, que están destinados al análisis del tráfico y la optimización del marketing.

Para un comercializador de productos involucrado en diferentes soluciones de análisis de productos, Google Tag Manager es imprescindible, ya que cubre muchos aspectos del marketing de productos bajo un mismo techo. Puede agregar y actualizar AdWords, Google Analytics, Firebase Analytics, Floodlight y otras etiquetas de terceros mediante Google Tag Manager.

Para configurar Google Tag Manager, es imprescindible tener un sitio web. A los efectos del tutorial, realizaremos el siguiente proceso para configurar Google Tag Manager.

  • Configurar un blog con Blogger.com
  • Cree una cuenta con Google Tag Manager
  • Instalar una etiqueta en el blog

Crea un blog con Blogger.com

Step 1 - Para comenzar a crear un blog, siga este enlace - https://blogger.com. La página de inicio de Blogger aparecerá como se muestra en la siguiente captura de pantalla.

Step 2 - Haga clic en el botón - CREAR SU BLOG para comenzar a crear un blog.

Como siguiente paso, Blogger le pedirá su cuenta de Google. Blogger, al ser uno de los productos de Google, le facilita la vida al permitir que la cuenta de Google cree un blog en línea.

Step 3 - Ingrese sus credenciales para Google y verá la siguiente pantalla para crear su blog.

Step 4 - Elija un título, una dirección y un tema de blog de su elección.

Ingresar un título es bastante sencillo, puede proporcionar cualquier título que desee. Con la dirección, cuando empiece a escribir la dirección de blog deseada, la interfaz comenzará a buscar disponibilidad. La siguiente captura de pantalla muestra cómo se busca una dirección de blog.

Una vez que haya terminado con este proceso y la dirección del blog esté disponible, verá el siguiente mensaje en el cuadro de texto.

Como se muestra en la captura de pantalla anterior, la dirección del blog: https://gtmtutorial2017.blogspot.com está seleccionado.

Step 5 - Una vez que haya seleccionado el diseño requerido, haga clic en el botón rojo - ¡Crear blog!

El sistema tardará unos segundos y su nuevo blog estará listo. Una vez hecho esto, se le presentará la siguiente interfaz para comenzar a escribir un blog.

Se requiere al menos una publicación para que Google Tag Manager funcione de manera efectiva.

Step 6 - Crea tu primera publicación en el blog haciendo clic en el botón de enlace en azul - Crea una nueva publicación.

Step 7- Puede comenzar a escribir el contenido de su primera publicación de blog. Proporcione un título de publicación según sea necesario en la parte superior de la pantalla.

Muchas veces, Blogger facilita la redacción de contenido HTML y de texto enriquecido. Esto es posible usando el botón de alternar Redactar / HTML en la esquina superior izquierda de la pantalla. Veamos cómo usar la opción Redactar como ejemplo.

Step 8- Haga clic en Redactar, se mostrará un editor de texto enriquecido. Empiece a agregar contenido.

Step 9 - Una vez hecho esto, haga clic en el botón Publicar en la sección superior derecha de la pantalla.

Serás redirigido de nuevo a la pantalla como se muestra en la captura de pantalla anterior, con una nueva publicación visible en la lista. Con esto concluye la creación del sitio en Blogger.com.

El siguiente paso es crear una cuenta de Google Tag Manager. Luego, agregaremos el código del contenedor al sitio web. Finalmente, podremos realizar un seguimiento de las visitas a la página / eventos correspondientes con GTM.

Cree una cuenta con Google Tag Manager (GTM)

Step 1- Para comenzar con Google Tag Manager, use este enlace: Google Tag Manager . Verá la siguiente página de inicio de Google Tag Manager.

Step 2- Haga clic en cualquiera de los enlaces para REGISTRARSE GRATIS. Los enlaces están disponibles en la página, en el centro y en la esquina superior derecha.

Step 3 - Continúe y explore la página como desee, ya que proporciona información muy útil sobre Google Tag Manager.

Una vez que haya hecho clic en REGÍSTRESE GRATIS, aparecerá la siguiente pantalla y la URL cambiará a: https://tagmanager.google.com/?hl=en. Esto se mostrará debajo de la pantalla para iniciar sesión con su cuenta de Google.

Una vez que haya ingresado sus credenciales para Google, aparecerá la interfaz del administrador de etiquetas.

Step 4- GTM requerirá que agregue su nueva cuenta. Hay dos pasos:

  • Configurar la cuenta
  • Contenedor de configuración

Step 5- Como primer paso, agregue el nombre de la cuenta. Para el propósito de este tutorial, usaremos el nombre - Tutorial de Google Tag Manager. Puede optar por compartir datos de forma anónima con Google y otros, para mejorar su experiencia de marketing de productos.

Step 6 - Haga clic en Continuar.

Step 7- El siguiente paso es configurar el contenedor. Proporcione un nombre para el contenedor. Agreguemos el nombre como - Contenedor de etiquetas. En Dónde usar el contenedor, como se muestra en la siguiente captura de pantalla, seleccione Web.

Step 8 - Haga clic en CREAR.

A continuación, aparecerá una pantalla para aceptar el Acuerdo de condiciones de servicio de Google Tag Manager.

Step 9 - Haga clic en SÍ para continuar.

Step 10 - Finalmente, se le presentará un conjunto de fragmentos de código como se muestra en la siguiente captura de pantalla, que se agregarán en head y body etiquetas.

Estos fragmentos de código son necesarios para que los datos del blog creado puedan fluir hacia la interfaz de Google Tag Manager.

Repasaremos la creación de etiquetas y los procesos respectivos en un capítulo posterior.

Interfaz de Google Tag Manager

Dediquemos un tiempo a familiarizarnos con las diferentes secciones de la interfaz de Google Tag Manager.

Primero, comprendamos cómo administrar las siguientes secciones:

  • Workspace
  • Versions
  • Admin

Espacio de trabajo

La sección del espacio de trabajo muestra el trabajo activo en progreso. Esta sección tiene diferentes subsecciones como:

  • Overview
  • Tags
  • Triggers
  • Variables
  • Folders

Aprenderemos más sobre estas subsecciones en los capítulos siguientes.

Versiones

Es muy común que las grandes organizaciones creen pocas etiquetas y las tengan para el proceso de revisión o aprobación.

Al mismo tiempo, es posible que sea necesario comprender las etiquetas anteriores publicadas en el sitio web. Para todos estos fines, podemos utilizar la sección Versiones. Esto muestra todas las etiquetas posibles publicadas en el espacio de trabajo actual y permite revertir los cambios, si es necesario.

Administración

Si desea configurar su cuenta de Google Tag Manager para diferentes entornos o diferentes usuarios, puede utilizar esta sección.

También puede configurar los detalles de la cuenta y revisar las actividades relacionadas con la cuenta, si hay varios usuarios asociados con esta cuenta.

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 &amp;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.

Una vez que haya entendido el proceso de creación de una etiqueta, tiene sentido profundizar y ver cómo se logra el seguimiento utilizando diferentes enfoques.

Etiqueta de vista de página

Un especialista en marketing de productos debe comprender el recuento de visitantes del sitio web / blog del producto. Esto es realmente fundamental, ya que ayuda a comprender la tendencia de los visitantes. Puede ser para saber si el visitante aprecia una mejora / característica particular agregada en el sitio web / blog, si los visitantes acceden al sitio web diariamente / semanalmente, etc.

Teniendo en cuenta que la 'Vista de página' tiene una enorme importancia para comprender la simpatía del sitio web / blog, veamos cómo se puede rastrear una Vista de página usando una etiqueta.

Step 1 - Como hemos seguido los pasos del capítulo anterior, accedemos a la sección de etiquetas en Google Tag Manager.

Mostrará la etiqueta creada recientemente: Primera etiqueta.

Step 2 - Haga clic en Primera etiqueta, mostrará el cuadro de diálogo con los activadores configurados, etc.

Como se destaca en la captura de pantalla anterior, centremos nuestra atención en el ID de seguimiento.

Este ID de seguimiento está asociado con Google Analytics. Cuando iniciamos el modo de depuración y visitamos el blog, se contará como una vista de una sola página.

En este momento en particular, Google Analytics registrará la vista de la página en su interfaz.

Step 3 - Depurar con Google Tag Manager y abrir el Google Analytics dashboard, en Fuentes de tráfico → Descripción general, verá las siguientes estadísticas.

Esto muestra que se registra una vista de página y las vistas de página correspondientes se seguirán más en Google Analytics.

Etiquetas de enlace

Muchas veces habrá ciertas ofertas promocionales para las cuales se puede solicitar al usuario que abandone el blog o el sitio web. Junto con las promociones, estas pueden ser algunas encuestas de terceros que un usuario puede tener que realizar. Estas encuestas generarán ciertas estadísticas, que serán diferentes de los datos que ingresan a través de diferentes etiquetas.

Para este propósito, es útil tener habilitado el seguimiento de cuántas veces se hace clic en el enlace y se redirige al usuario fuera del sitio web. Estos enlaces se denominanoutbound links y estos enlaces se pueden rastrear fácilmente usando Google Tag Manager.

Para demostrar esto, crearemos un enlace en nuestro blog.

La captura de pantalla anterior muestra un enlace llamado - Un enlace saliente. Este enlace se utilizará para realizar un seguimiento en Google Tag Manager. Redirige ahttps://www.google.com

Step 1- Dirígete al espacio de trabajo de Google Tag Manager. Haga clic en Etiquetas en el panel de la izquierda. Haga clic en el botón NUEVO en la página para comenzar a crear la etiqueta del enlace saliente.

Vamos a nombrar la etiqueta como - Etiqueta de enlace saliente.

Step 2 - Siga el mismo proceso que en la configuración inicial de la etiqueta para tener el código de Google Analytics ingresado en el campo correcto - Identificación de seguimiento.

Step 3- Seleccione el campo Tipo de pista como Evento. Podrá ver más las siguientes opciones.

Estas opciones están de acuerdo con el tipo de pista: evento. Tenga en cuenta que estas opciones no estarán disponibles en absoluto en Tipo de pista - Vista de página. Esto se debe a que, como estamos adjuntando el código de Google Analytics con el Google Tag Manager, para ver los detalles del evento en tiempo real, necesitamos ciertos parámetros.

Step 4- Complete los detalles del formulario a continuación. El texto en negrita son los valores que se deben ingresar en los cuadros de texto.

  • Categoría - Outbound

  • Acción - Click

  • Deje los campos Etiqueta y Valor en blanco

  • Mantener el golpe de no interacción como False

Step 5 - A continuación, en la sección Activación, haga clic en Elegir un activador para activar esta etiqueta ...

Step 6- Haga clic en el icono azul + en la esquina superior derecha. Abrirá la sección de disparadores personalizados. Proporcione un nombre a este disparador como - Haga clic en Disparador.

Step 7 - Haga clic en Elegir un tipo de activador para comenzar la configuración ...

Mostrará los siguientes tipos de activadores como se muestra en la siguiente captura de pantalla.

Step 8- Como se destaca en la figura anterior, haga clic en Solo enlaces en Tipo de activador de clic. Esto mostrará las diferentes opciones para configurar el tipo de disparador recién creado.

Ahora, debemos configurar el disparador para que se active si la URL en la que se hizo clic tiene una ruta de página como https://www.google.com. Tenga en cuenta que hemos configurado el enlace en nuestro blog para redirigir a la misma URL.

Step 9 - Configure el disparador como se indica exactamente en la figura anterior.

Queremos configurar este activador para que se active en algunos clics en enlaces cuando la URL de la página sea igual ahttps://www.google.com. Una vez hecho esto, la pantalla debería verse como la siguiente.

Step 10 - Haga clic en el SAVEpara guardar este disparador recién creado. La pantalla de configuración de nuevo a la etiqueta de salida del enlace de retorno etiqueta .

Step 11 - Haga clic en GUARDAR para completar la configuración.

Como se destaca en la figura anterior, una etiqueta completa para el enlace saliente debe verse como la anterior.

Ahora, tengamos la etiqueta en acción.

Step 12- Desde el espacio de trabajo, haga clic en el botón VISTA PREVIA. Se iniciará el modo de depuración.

Step 13- En su navegador, en otra pestaña, abra su blog. La ventana de depuración se mostrará en la parte inferior de la pantalla.

Como se muestra arriba, dado que aún no hemos hecho clic en el enlace, la etiqueta sigue apareciendo en Etiquetas no activadas en esta página.

Step 14- Haga clic en el enlace de salida creado en el paso anterior, la etiqueta se activará. Puede verlo aparecer en Etiquetas activadas en esta página.

Esto concluye el enfoque para crear una etiqueta para un enlace saliente para rastrear los enlaces en el blog / sitio web.

Seguimiento de eventos

El seguimiento de eventos representa cualquier acción que sea diferente a la carga de una página. El navegador tiene una respuesta específica a cualquier acción que realice en la página. Por ejemplo, la acción puede ser tan simple como hacer clic en un enlace o enviar un formulario a uno complejo, como rastrear vistas y descargas de archivos.

Con Google Tag Manager, puede rastrear fácilmente los eventos generados en el navegador. Registra las respuestas del navegador para una acción potencial, lo que permite rastrear fácilmente el evento en particular.

Usaremos el ejemplo anterior para ver el seguimiento de eventos en acción. En el ejemplo anterior hemos creado un enlace, que redirige fuera de nuestro blog. En este ejemplo, crearemos otro enlace, que apuntará hacia nuestro blog. Estamos usando este ejemplo para demostrar cómo se pueden rastrear sin problemas los enlaces que salen del blog.

He creado un enlace llamado Enlace interno en el blog. Este enlace lo redireccionará a la misma página del blog.

Vayamos al panel de Google Tag Manager y creemos un nuevo activador para el enlace saliente. Usaremos la URL de clic variable incorporada para esto. Utilizando Click URL, vamos a detectar si el enlace en el que se hace clic está redirigiendo al usuario fuera del blog o no.

Para habilitar la URL de clic variable incorporada, siga los pasos.

Step 1- En la sección Variables, haga clic en el botón en rojo, CONFIGURAR. Mostrará las variables integradas disponibles. Hay diferentes variables integradas disponibles, que son: páginas, utilidades, errores, clics, etc.

Step 2- En la categoría Clics, marque la casilla Click URL. Esto mostrará las variables disponibles en Click URL inmediatamente. Consulte la siguiente pantalla como referencia.

Ahora que la variable está configurada, podemos configurar el disparador.

El disparador se habilitará cuando un usuario haga clic en todas las URL, que se redirigen fuera del blog. Crear este disparador es bastante simple.

Step 3- Vaya a Desencadenadores, haga clic en Nuevo. Proporcione un nombre al disparador. Digamos que el nombre es - Activador de enlace externo.

Step 4 - En Configuración de activador, haga clic en Elegir un tipo de activador para comenzar la configuración ...

Step 5- De las opciones disponibles, en Hacer clic, seleccione Solo enlaces. Consulte la siguiente pantalla para ver los pasos hasta ahora.

Cuando se hace clic en Solo enlaces, se lo dirige de nuevo a la primera sección, donde deberá proporcionar la excepción de URL. Los siguientes son los pasos para hacerlo.

Step 6 - Para la opción Este disparador se activa, seleccione Algunos clics en enlaces.

Step 7- Bajo las condiciones, seleccione Click URL, que debe estar previamente seleccionada. Seleccione el valor que no contiene de las opciones de condición.

Step 8- En el cuadro de texto de valor, ingrese un valor que sea la URL de su blog. En nuestro caso, ingresaremos a gtmtutorial2017.blogspot.in. Una vez terminado, la pantalla se verá similar a la siguiente.

Step 9 - Haga clic en el botón Guardar en azul para guardar su nuevo activador.

Ahora es el momento de configurar nuestra etiqueta, que usaremos para rastrear el evento de clic, que redirigirá al usuario fuera del blog.

Step 10- Abra la sección Etiquetas, haga clic en el botón NUEVO. Proporcione un nombre a su etiqueta, déjenos llamarlo - Etiqueta de enlace externo.

Step 11 - En Configuración de etiqueta, haga clic en Elegir un tipo de etiqueta para comenzar la configuración ... Seleccione el tipo de etiqueta como Universal Analytics e ingrese los siguientes detalles en la pantalla.

  • En Tipo de pista, seleccione Evento
  • Para Categoría: ingrese Enlace externo
  • En acción: ingrese Haga clic
  • Para la etiqueta, haga clic en el icono de opciones

Step 12 - En el panel lateral que se muestra, seleccione Hacer clic en URL.

Step 13- Una vez hecho esto, marque la casilla Habilitar configuraciones anuladas en esta etiqueta. En el cuadro de texto ID de seguimiento, ingrese su código de seguimiento de Google Analytics.

Step 14- Desplácese hacia abajo para configurar Triggering. Vamos a utilizar nuestro disparador recién creado.

Step 15- Haga clic en Elegir un disparador para hacer que esta etiqueta se active ... Mostrará los disparadores disponibles. Seleccione Activador de enlace externo, que hemos creado anteriormente.

Con esto concluye la configuración de la etiqueta. Haga clic en el botón Guardar.

Step 16- Ahora, para depurar la etiqueta, haga clic en el botón Vista previa en gris. Iniciará Google Tag Manager en modo de depuración.

Step 17- Vuelva a su blog y actualice el blog para que comience el depurador de Google Tag Manager. Teniendo en cuenta el ejemplo anterior, se muestran dos enlaces en la página. Además, existe la etiqueta de enlace externo, que se muestra en Etiquetas no activadas en esta página.

Ahora es el momento de probar la configuración de la etiqueta. Usaremos Ctrl + Click en ambos escenarios para verificar si la etiqueta está activada. Ctrl + Click hará que el enlace se abra en la nueva pestaña, sin actualizar la página actual. Necesitamos tener la página intacta, ya que no podremos ver las etiquetas activadas, si la página se actualiza.

Step 18- Primero, use Ctrl + clic en el enlace interno como se resalta en la figura anterior. Idealmente, la etiqueta no debería activarse, ya que el enlace dirige al usuario al mismo blog.

Como se muestra en la figura anterior, en la sección Resumen del depurador, verá otro evento: gtm.linkClick. Esto significa que GTM ha registrado el evento de clic.

Pero no verá ningún cambio en la sección Etiquetas activadas en esta página. Esto se debe a que hemos configurado la pestaña para enlaces salientes.

Step 19 - Ahora Ctrl + clic en un enlace saliente (esto se creó en la sección anterior).

Observe la sección de resumen, se actualizará nuevamente para otro evento: gtm.linkClick.

Como se muestra en la figura anterior, para el próximo evento registrado, se activará una etiqueta: etiqueta de enlace externo. Podrá verlo en Etiquetas activadas en esta página.

De esta manera, puede emplear el seguimiento de eventos con Google Tag Manager y configurar etiquetas para los datos críticos que necesita de su sitio web / blog.

Seguimiento de formularios

La mayoría de las veces, en cualquier sitio web / blog verá un formulario que capturará ciertos detalles del usuario. Como comercializador de productos, se vuelve tedioso saber si los visitantes están utilizando el formulario.

Puede ser un buen enfoque saber cuántas veces un usuario ha completado información en este formulario y cuántas veces se encontró con un error. Con Google Tag Manager, puede rastrear fácilmente los envíos de formularios. Esta sección lo guiará a través del proceso.

Para este ejemplo, tendremos un formulario de contacto creado en nuestro blog.

Step 1- Para blogger, para crear un formulario de contacto, use la opción Diseño → Agregar un gadget. Una vez que haga clic en Agregar un gadget, verá la siguiente pantalla, donde encontrará el gadget Búsqueda de blogs. Haga clic en el icono azul más (+) para insertarlo en el blog.

Una vez hecho esto, aparecerá en su blog como se muestra en la siguiente captura de pantalla.

Ahora, configuremos los disparadores relacionados y la etiqueta.

Para empezar con el gatillo, seguiremos los mismos pasos. Primero agregaremos enable una variable incorporada llamada Form ID, luego crearemos un disparador que utilizará esta variable recién creada.

Una vez hecho esto, usaremos este nuevo disparador para configurar una etiqueta para rastrear las interacciones con el formulario.

Para habilitar la variable incorporada Form ID, los siguientes son los pasos.

Step 2- En la sección Variables, haga clic en el botón en rojo, CONFIGURAR. En la categoría Formularios, marque la casilla ID de formulario. Esto mostrará la ID del formulario en las variables disponibles inmediatamente. Consulte la siguiente pantalla como referencia.

Ahora que la variable está configurada, podemos configurar el disparador.

El disparador se habilitará cuando el usuario envíe datos en el formulario Contáctenos.

Step 3- Para hacerlo, vaya a Desencadenadores, haga clic en Nuevo. Proporcione un nombre al disparador. Vamos a nombrarlo como - Activador de envío de formulario.

Step 4 - En Configuración de activador, haga clic en Elegir un tipo de activador para comenzar la configuración ...

Step 5- De las opciones disponibles, en Compromiso del usuario, seleccione Envío de formulario. Consulte la siguiente pantalla para ver los pasos hasta ahora.

Cuando se hace clic en Envío de formulario, se le redirige a la primera sección, donde deberá proporcionar el ID del formulario.

Step 6 - Para la opción, Este disparador se activa, seleccione Todos los formularios.

Una vez que haya terminado con el paso anterior, habilitará el seguimiento de todos los formularios enviados en la página del blog. También puede utilizar un ID de formulario específico, que se puede configurar cuando creó su blog.

Para configurar un ID de formulario específico, puede solicitar el apoyo del desarrollador de su sitio web / blog para obtener más detalles. Después de completar estos pasos, consulte la siguiente pantalla para obtener una referencia completa.

Step 7 - Haga clic en el botón Guardar en azul para guardar su nuevo activador.

Ahora es el momento de configurar nuestra etiqueta, que usaremos para rastrear el evento de clic que redirigirá al usuario fuera del blog.

Step 8- Abra la sección Etiquetas, haga clic en el botón NUEVO. Proporcione un nombre a su etiqueta, déjenos llamarlo - Etiqueta de envío de formulario.

Step 9 - En Configuración de etiqueta, haga clic en Elegir un tipo de etiqueta para comenzar la configuración ... Seleccione el tipo de etiqueta como Universal Analytics y complete los siguientes detalles:

  • En Tipo de pista, seleccione Evento
  • Para categoría: ingrese Envío de formulario
  • En acción: ingrese el formulario enviado
  • Para la etiqueta, haga clic en el icono de opciones

Step 10 - En el panel lateral que se muestra, seleccione ID de formulario.

Step 11- Una vez hecho esto, marque y seleccione Habilitar configuraciones anuladas en esta etiqueta. En el cuadro de texto ID de seguimiento, ingrese su código de seguimiento de Google Analytics.

Desplácese hacia abajo para configurar Triggering. Vamos a utilizar nuestro disparador recién creado.

Step 12- Haga clic en Elegir un disparador para hacer que esta etiqueta se active ... Mostrará los disparadores disponibles. Seleccione Activador de envío de formulario, que hemos creado anteriormente.

Con esto concluye la configuración de la etiqueta. Haga clic en el botón Guardar.

Step 13- Ahora, para depurar la etiqueta, haga clic en el botón Vista previa en gris. Iniciará Google Tag Manager en modo de depuración.

Step 14- Vuelva a su blog y actualice el blog para que comience el depurador de Google Tag Manager. Habrá la etiqueta de envío de formulario, que se muestra en Etiquetas no activadas en esta página.

Step 15- Ahora interactúe con el formulario Buscar en este blog ingresando algunos valores en él. Escriba Primero, ya que nuestra primera publicación de blog contiene la palabra Primero.

Step 16- Haga clic en Buscar. El nuevo evento se verá en Resumen y la etiqueta de envío del formulario aparecerá en Etiquetas activadas en esta página.

De esta manera, podemos crear etiquetas de envío de formularios utilizando Google Tag Manager.

Además de crear las etiquetas y administrar los activadores y variables asociados, Google Tag Manager tiene algunas funciones más que ofrecer. Esto incluye las cosas de limpieza, como organizar usuarios, carpetas que se utilizan para organizar las etiquetas según el orden deseado, etc.

En esta sección, obtendremos una descripción general sobre cómo administrar los usuarios y las diferentes carpetas relacionadas con las etiquetas.

Gestión de usuarios

No es raro que un equipo de marketing de productos utilice una sola cuenta de Google Tag Manager para gestionar diferentes campañas de marketing. Habrá diferentes roles, los cuales tendrán ciertos permisos como crear una etiqueta, borrar / modificar una etiqueta, crear otro usuario, etc.

La gestión de usuarios proporciona un portal completo para gestionar a los usuarios que utilizan las funciones de GTM. La gestión de usuarios funciona en dos niveles:

  • Nivel de cuenta
  • Nivel de contenedor

Para acceder a la Administración de usuarios, haga clic en ADMINISTRAR en la barra de menú superior izquierda.

Como se muestra en la siguiente figura, podrá ver la administración de usuarios asociada con la cuenta y el contenedor.

La diferencia importante entre los dos es que si proporciona acceso a un usuario a nivel de cuenta, el usuario tiene acceso a todos los contenedores de esa cuenta. Considerando que, si el acceso se proporciona al usuario a nivel de contenedor, el usuario puede modificar / agregar / eliminar las etiquetas solo debajo de ese contenedor.

Para ver los detalles de todos los niveles de acceso disponibles, haga clic en Administración de usuarios under the Container level (resaltado en amarillo arriba).

Esto mostrará las cuentas disponibles con los permisos que se les proporcionan. En su mayoría, será la cuenta de Google que está utilizando para iniciar sesión en GTM.

Haga clic en el botón NUEVO en rojo. Mostrará la siguiente pantalla.

Como se muestra en la figura, puede agregar una dirección de correo electrónico de su elección, a quien desea asignar permisos de acceso y luego proporcionar los permisos deseados a nivel de contenedor.

Los siguientes son los permisos disponibles:

  • No Access - Bloquear al usuario para que no acceda a las etiquetas del contenedor.

  • Read- El usuario solo podrá leer las etiquetas. No se pueden realizar modificaciones ni operaciones de eliminación.

  • Edit - El usuario puede agregar / modificar / eliminar las etiquetas disponibles.

  • Approve- El usuario tiene un permiso elevado para aprobar las etiquetas en el entorno en vivo. Más sobre entornos más adelante en el tutorial.

  • Publish - Todos los permisos, similar a un usuario administrador.

Con esto concluye la descripción general de la gestión de usuarios a nivel de contenedor.

At the account level, se puede configurar un usuario como usuario general o usuario administrador.

Se pueden asignar permisos similares al usuario que se agrega; La única diferencia es que el usuario tendrá acceso a todos los contenedores de esta cuenta.

Con esto concluye una descripción general de la gestión de usuarios a nivel de cuenta.

Carpetas

Las carpetas son necesarias especialmente cuando tiene numerosas etiquetas y activadores en su cuenta. Las carpetas pueden resultar útiles cuando tiene un número tan grande de etiquetas / activadores que manejar.

Para organizar las etiquetas y los disparadores en estas carpetas, uno puede usar su propia creatividad. Las carpetas se pueden crear sobre la base de diferentes áreas de aplicación o los usuarios o tal vez el propósito por el que se están creando. El equipo de marketing de productos puede tomar su propia decisión de tener una estructura de carpetas específica en su lugar.

Otra forma de ver las carpetas puede ser desde un aspecto de las herramientas analíticas en uso. Sobre la base de la herramienta analítica, se puede crear una etiqueta, que será útil a largo plazo.

Para crear diferentes carpetas, haga clic en Carpetas en el panel izquierdo. Verá la siguiente pantalla.

Las etiquetas creadas hasta ahora se mostrarán en la pantalla. Puede organizar las etiquetas creando diferentes carpetas usando la opción - NUEVA CARPETA que se muestra en la esquina superior derecha de la pantalla.

Una vez que haga clic en NUEVA CARPETA, se abrirá una ventana emergente rápida de la siguiente manera.

Desde la pantalla anterior, siempre puede mover las etiquetas según sus requisitos a la carpeta deseada.

Con esto concluye la introducción a la creación de carpetas en Google Tag Manager.

Hemos estado creando, modificando y depurando las etiquetas en nuestro entorno de depuración. Hasta ahora, no hemos visto las etiquetas en vivo en nuestro blog.

Para que las etiquetas estén activas en el blog, necesitamos publicar las etiquetas. Querremos tener las etiquetas publicadas que tener el modo Vista previa siempre.

Publicar las etiquetas es bastante sencillo.

Step 1 - Haga clic en el botón ENVIAR en la esquina superior derecha de la pantalla.

Mostrará la siguiente pantalla.

Step 2 - Introduzca un nombre de versión identificable para que se pueda entender fácilmente por los cambios realizados.

Con la descripción de la versión, puede ser lo más detallado posible sobre los cambios / adiciones de la etiqueta en esa versión en particular.

Step 3 - Desplácese hacia abajo hasta los cambios del espacio de trabajo, verá todos los cambios realizados en las etiquetas, que no están publicados o en el modo PREVISUALIZAR.

De manera similar, en Historial de actividades, puede obtener una comprensión exacta de los cambios / actualizaciones que se realizaron en la cuenta desde el principio de los tiempos.

Step 4- Proporcione un nombre de versión, descripción. Es posible que desee proporcionar el nombre de la versión como Primera versión y puede proporcionar la descripción como Primera actualización de Google Tag Manager.

Por el momento, dejaremos Publish to Environment como Live. Esto se debe a que todavía no tenemos ningún otro entorno aparte de Live.

Step 5 - Haga clic en PUBLICAR y se le presentará un resumen de esta versión en particular.

Así es como puede publicar los cambios realizados en el espacio de trabajo de Google Tag Manager.

Puede usar un complemento de Google Chrome: Asistente de etiquetas de Google para ver cómo se activan las etiquetas sin el modo de vista previa activado.

Creación de entornos en Google Tag Manager

Hay diferentes formas en las que podemos configurar un entorno para usar con Google Tag Manager.

Por lo general, en el mundo del software, la palabra Entorno se usa en el contexto de dónde se está probando / revisando la característica particular.

Step 1 - Para ver los entornos disponibles en Google Tag Manager, haga clic en ADMINISTRAR.

Step 2 - En la sección Contenedor, haga clic en Entornos.

Podrá ver la pantalla como se muestra arriba.

Normalmente, las grandes empresas de software tienen su sitio web dividido en diferentes entornos para facilitar el proceso de lanzamiento de una función. Los desarrolladores trabajan en su sitio web de desarrollo, luego los cambios de funciones se envían al sitio de prueba. Finalmente, cuando se verifican los cambios en el sitio de ensayo, los cambios se envían al entorno Live.

En el contexto de Google Tag Manager, existe la flexibilidad de agregar diferentes entornos, lo que le permitirá validar su etiqueta por completo antes de que estén en el sitio web en vivo. Para este tutorial, crearemos un entorno, llamado entorno Dev. Los siguientes son los pasos.

Step 3- Haga clic en el botón NUEVO en rojo. Podrá ver el siguiente cuadro de diálogo.

Step 4- Complete los detalles como se muestra en la figura anterior. Fingiremos que nuestro sitio de desarrollo es el mismo sitio en el que estamos trabajando en este momento, para impulsar los cambios en consecuencia.

Step 5 - Haga clic en CREAR y verá un mensaje como el siguiente.

Como se muestra en la figura anterior, el mensaje muestra dos formas de utilizar el entorno.

  • Using a Share Preview Link - Este enlace es útil cuando desea hacer circular los cambios en sus etiquetas a los miembros de su equipo, cuando hay equipos más grandes.

  • With a snippet- Si tiene claro que un sitio en particular va a funcionar como su entorno de desarrollo / preparación, puede usar esta opción de fragmento. Hay disponible un fragmento de este entorno para que pueda acceder al sitio web y ver los cambios que se han realizado últimamente.

Step 6- Haga clic en PUBLICAR PARA DESARROLLAR para verlos en acción. La siguiente pantalla solicitará los cambios disponibles para implementar en el entorno recién creado.

Se mostrarán los cambios que aún no se han enviado al entorno respectivo. Además, se muestra el nombre de la versión, para que el usuario tenga claro qué versión se está publicando en el entorno respectivo.

Step 7- Haga clic en PUBLICAR AHORA para ver los cambios disponibles en su entorno recién creado. Mostrará el mensaje de éxito con una marca de fecha y hora.

En la lista de entornos disponibles, haga clic en el nombre del nuevo entorno, en nuestro caso, Dev.

Se mostrarán las opciones disponibles para compartir el vínculo del entorno, como se muestra a continuación.

Con cualquiera de los enfoques anteriores, podrá ver los cambios en su etiqueta en su entorno de desarrollo (Dev).

Una capa de datos puede verse como un objeto que contiene toda la información para pasar y procesar con Google Tag Manager. Este es un concepto un poco técnico. El término capa de datos se utiliza para denotar la estructura de datos utilizada por Google Tag Manager para almacenar, procesar y pasar datos entre su sitio web / blog y el administrador de etiquetas.

Para elaborarlo más, una capa de datos puede alimentar los datos en su herramienta de análisis sobre su visitante. Tomando otra perspectiva para la definición, la capa de datos es en realidad una lista de requisitos y objetivos comerciales para cada subconjunto del contexto digital.

Tomemos un ejemplo de un sitio web de comercio electrónico, los requisitos comerciales pueden incluir:

  • Información transaccional, teniendo los detalles sobre lo que se compró

  • Datos del visitante, sobre quién compró

  • Otros detalles sobre la compra, como dónde se realizó la compra y a qué hora

  • Por último, la información sobre otros factores, como si el visitante se suscribió a las actualizaciones por correo electrónico o no

Entonces, en pocas palabras, la capa de datos lleva información que puede ser utilizada por diferentes herramientas / usuarios / partes interesadas según sea necesario.

En Google Tag Manager, dataLayer es una matriz de JavaScript. Consiste en pares clave-valor. A continuación se muestra un ejemplo rápido de dataLayer con diferentes tipos de datos:

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

Aquí, tenemos diferentes valores como una matriz de objetos (los productos), valores numéricos (el precio), una matriz de cadenas (tiendas), un objeto de fecha y un objeto (nombre).

En otra nota, cuando coloca el código de contenedor de Google Tag Manager en su sitio web, la capa de datos se crea automáticamente.

En sí mismo, la capa de datos es un concepto bastante complejo de entender a la primera. Este capítulo proporcionará más información sobre cómo interactuar con la capa de datos.

Eventos de la capa de datos

Un ejemplo rápido de un evento de capa de datos puede ser un formulario de suscripción a un boletín, que no se puede rastrear fácilmente con los oyentes automáticos de GTM. Un desarrollador de sitios web puede ayudarlo a impulsar un evento de capa de datos una vez que un nuevo suscriptor haya ingresado su correo electrónico en su sitio web. El código de este evento debería verse así:

push({‘event’: ‘new_subscriber’});

Si lo necesita, puede pedirle a su desarrollador más información, como la ubicación del formulario. Esto es necesario si hay más de un formulario en su sitio web. Se puede lograr usando el siguiente código.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

Además, Google Tag Manager envía un determinado conjunto de valores a la capa de datos de las aplicaciones web de forma predeterminada. Estos valores son:

  • gtm.js - Se envía a la capa de datos tan pronto como Google Tag Manager está listo para ejecutarse

  • gtm.dom - Empujado a la capa de datos cuando el DOM está listo

  • gtm.load - Empujado a la capa de datos cuando la ventana está completamente cargada

Inspeccionar la capa de datos

Como ya sabemos a estas alturas, hay ciertos eventos que se crean como resultado de cualquier interacción en la pantalla.

Por ejemplo, consideremos este simple evento de carga de página. Para ver los eventos, debe tener el depurador en ejecución. Una vez que tenga el depurador en ejecución (en modo de vista previa), visite el blog. Si miras la ventana de resumen en la esquina inferior izquierda, esto es lo que verás:

Step 1 - Haga clic en Ventana cargada y luego en Capa de datos.

La información que se muestra en la pestaña Capa de datos es sobre el evento Window Loaded.

Se muestra como - {event: 'gtm.load', gtm.uniqueEventId: 3}

Además, si desea echar un vistazo más de cerca, debe obtener el soporte de la pestaña de la consola de Chrome. Inspeccionar una capa de datos se vuelve fácil cuando sabe cómo usar el depurador de Chrome de la manera correcta.

Step 2- Cuando esté en su blog, haga clic con el botón derecho en cualquier parte de la página. En el menú contextual que se muestra, haga clic en Inspeccionar. El panel se mostrará en el lado derecho de la pantalla, con la pestaña Elementos activada.

Step 3- Haga clic en Consola. Cuando esté en el modo de consola, haga clic en el icono de la esquina superior izquierda para borrar todos los mensajes que se muestran. Consulte la siguiente captura de pantalla como referencia.

Step 4- Una vez que la ventana esté limpia para cualquier mensaje anterior, escriba dataLayer, asegúrese de que se haya escrito L en mayúsculas. Google Tag Manager proporciona este nombre a su capa de datos. Sin embargo, sus desarrolladores pueden asignarle un nombre diferente cuando sea necesario.

Step 5- Presione enter después de dataLayer. Mostrará los siguientes detalles.

Hay tres objetos y cada objeto contiene información. Ahora bien, es posible que estos objetos no sean los mismos para usted, como se muestran en la captura de pantalla anterior. El dataLayer es configurable y está en gran medida bajo el control del desarrollador configurarlo según el requisito.

Los valores que están presentes se deben al gadget de Blogger que está en uso en esa posición / espacio en particular. Esta es la razón por la que hay cierta información allí.

Si observa el objeto 1, notará que el evento que se dispara es - gtm.dom . GTM lo dispara mientras carga la página.

De esta manera, puede inspeccionar la capa de datos y agregar información cuando sea necesario.

Variables en la capa de datos

Ahora que estamos familiarizados con la capa de datos, intentemos leer una de las variables usando la interfaz de Google Tag Manager.

Aquí, vamos a intentar leer el evento usando una variable de capa de datos.

Si vemos la figura anterior, el evento variable contiene el gtm.dom . Vamos a crear una variable desde la interfaz de GTM y veremos cómo se refleja en la pestaña Variables en Google Tag Manager.

Step 1- En la interfaz del Administrador de etiquetas de Google, vaya a Variables. Desplácese hacia abajo hasta las variables definidas por el usuario. Haga clic en NUEVO.

Step 2 - Proporcione un nombre a esta nueva variable, llamémosla varEvent.

Step 3 - Haga clic en Elegir un tipo de variable para comenzar la configuración ...

Step 4 - Seleccione Variable de capa de datos de la lista.

Step 5 - Cuando seleccione Variable de capa de datos, se le pedirá que proporcione el nombre y la versión.

Este nombre será de la capa de datos real de Google Tag Manager. Como se mencionó anteriormente, la variable que rastrearemos es - event.

Step 6 - Ingrese el evento en el Nombre de la variable de la capa de datos.

Step 7 - Haga clic en GUARDAR.

Step 8 - Haga clic en Vista previa para ver los cambios reflejados en el depurador.

Step 9- Una vez cargada la página, haga clic en Ventana cargada y luego en Variables. Desplácese hasta la parte inferior de la sección Variables, verá varEvent, como se resalta en la captura de pantalla anterior.

Como se ve en la captura de pantalla anterior, el valor será gtm.load.

De esta manera, se puede inspeccionar la capa de datos y capturar los valores en la capa de datos según sea necesario.

Es hora de analizar algunos escenarios complejos, donde puede realizar un seguimiento de los elementos críticos para el negocio. Veremos cómo crear un evento personalizado, que no está predefinido o disponible de forma predeterminada.

En este capítulo, veremos:

  • Implementación de eventos personalizados
  • Seguimiento de desplazamiento del mouse

Implementación de eventos personalizados

Habrá casos en los que es posible que desee crear un evento, que es diferente de los eventos disponibles en GTM. Para lograr esto, necesitaremos crear un evento personalizado, que utiliza las variables existentes de la capa de datos.

Considere el escenario cuando hacemos clic en el enlace interno creado anteriormente. Creemos un evento personalizado llamado urlClick, que leerá la variable de capa de datos gtm.elementurl.

Step 1- Para hacerlo, creemos una variable llamada urlName desde la sección Variables. Usando el proceso habitual, cree la variable.

Arriba se muestra un ejemplo de variable de capa de datos: urlName.

Ahora, usaremos esta variable para crear nuestro evento personalizado. El evento personalizado se usará cuando creamos el disparador. Consulte la siguiente captura de pantalla como referencia.

Step 2- Cree un disparador para disparar en el evento que ya está presente, haciendo clic en el enlace interno. En Nombre del evento, especifique gtm.linkClick.

Ahora, creemos la etiqueta.

Step 3- Siga el mismo proceso para crear la etiqueta. Aquí están los detalles:

  • Tipo de etiqueta: Universal Analytics
  • Tipo de pista: evento
  • Categoría: clic en el enlace
  • Acción: hacer clic

Step 4 - Para la etiqueta, use la etiqueta creada recientemente, urlName.

Step 5- Una vez hecho esto, marque Habilitar configuraciones anuladas en esta etiqueta. En el cuadro de texto ID de seguimiento, ingrese su código de seguimiento de Google Analytics.

Al seleccionar un activador, asegúrese de seleccionar el activador creado recientemente: URL clicada.

Step 6- Guarde la etiqueta. Haga clic en Vista previa para ver los cambios en su blog.

Step 7- Ctrl + clic en el enlace interno. Debería poder ver el evento gtm.linkClick en el cuadro Resumen. Además, debería ver la etiqueta activada como se muestra en la siguiente captura de pantalla.

De esta manera, podemos usar los eventos existentes para crear nuestros propios eventos personalizados y tener un seguimiento exitoso de los controles que queramos.

Seguimiento de desplazamiento del mouse

Cuando se trata de involucrar a los usuarios en el blog, un comercializador de productos puede querer detectar un desplazamiento del mouse. La detección del desplazamiento del mouse es fundamental, ya que requerirá acciones adicionales, como mostrar un enlace a un boletín o activar una ventana emergente que proporcione algún tipo de descuento en el producto.

Usando Google Tag Manager, podemos rastrear fácilmente el evento de desplazamiento. Para este propósito, necesitamos usar un código de terceros, que usaremos al crear una etiqueta.

El código está disponible en esta ubicación. Lo usaremos al crear una etiqueta.

Step 1- Crea un disparador. Llamaremos a este disparador - un disparador de desplazamiento.

Consulte la siguiente imagen para conocer la configuración del disparador.

Step 2- Configurar el tipo de disparador - DOM Ready. Permita que este disparador se active en: Todos los eventos listos para DOM.

Step 3 - Haga clic en GUARDAR una vez que haya terminado con los pasos anteriores.

Ahora creemos la etiqueta.

Step 4 - Esta vez, al crear una etiqueta, seleccione un tipo diferente de seguimiento como se muestra en la siguiente captura de pantalla.

Step 5 - Cuando se selecciona HTML personalizado, se mostrará un espacio para ingresar el código HTML.

Step 6- Introduzca el código copiado de este enlace.

Step 7- Desplácese hacia abajo para configurar el disparador. El activador que creamos recientemente (Activador de desplazamiento arriba), debe seleccionarse.

Step 8 - Haga clic en GUARDAR.

Step 9- Ahora, inicie el depurador de GTM y actualice la página del blog. Verá dos cambios importantes en la sección Resumen y Etiqueta.

Step 10 - Ahora, desplácese hacia abajo para ver el resto del blog, se activarán un par de eventos más.

  • ScrollDistance
  • ScrollTiming

Estos eventos eventualmente se usarán para detectar la ubicación del desplazamiento del mouse y tomar más acciones en consecuencia.