1 Followers
25 Following
showtheory6

showtheory6

SPOILER ALERT!

Guía de Google Tag Manager para principiantes



Google Tag Manageres un
sistema de gesión de etiquetas gratuitoincluido en
Google Marketing Platformque permite instalar
Analytics,
Google Adsy otras
herramientas de marketingen tu página web de forma
rápiday
sencillasin necesidad de tener
conocimientos de programación.


Si no eres un usuario avanzado quizá solo tengas instalada una
etiqueta de Google Analyticspara lograr información y
estadísticas elementalesde tu web, y en un caso así
Tag Managerno te proporcionará ninguna ventaja.


Sin embargo, según avances en tus
conocimientos de Analytics, quizá desees
monitorizarcuántos usuarios
empiezan a rellenar un formulario y no lo envían, o bien
cuántas ventas se te escapan a la mitad del proceso de compra.


En esos casos para cada
seguimientoconcreto que desees realizar tendrás que
añadir un fragmento de código JavaScript a tu weben lugares muy concretos de su
código fuente, donde un pequeño
errorpuede resultar
catastrófico.


En este punto descubrirás que
las etiquetas repetidas o bien incorrectas pueden distorsionar la medición de los datos, y la
acumulación de código JavaScriptinfluirá en la
velocidad de carga de tu web.


La cosa se dificulta cuando descubres
Google Adsy la
publicidad online, y las increibles
posibilidadesque ofrece si tienes acceso a suficientes
datospara
optimizarlacorrectamente.


Llegados a este punto no hay otra opción que emplear
Tag Manager, una
herramienta de gestión de etiquetasincreible que a primer aspecto
parece más difícil de lo que es.


Agrupando tus
etiquetasen un
contenedor de Tag Manager, podrás
gestionarlastodas mediante una
interfaz fácil y amigable.



Tag Managerpermite
instalar,
gestionary
organizartodas tus
herramientas de seguimientoal mismo tiempo que
evita la pérdida de velocidad de cargaque se produciría al instalar tanto
código JavaScriptdirectamente en tu web.


Sin embargo esta
herramientaes tan formidablemente
configurableque puede atemorizar al comienzo.


Para no perdernos en su dificultad, en esta
guía para principiantesvamos a
acercarnos a Tag Mánager por partes:



Tag Managery la
etiqueta gtag.js de Google Analyticsson métodos
compatiblespara realizar el
seguimientoy
mediciónestándar de los
datos de visitantes de tu web, cada uno de ellos de con
característicasdistintas:



  • Tag Manager es un sistema de gestión de etiquetasque deja
    instalary
    actualizarlos
    códigos de seguimientode tu web o bien aplicación móvil desde una interfaz web, sin volver a tocar su código

  • gtag.js es una API(interfaz de programación de aplicaciones) y un
    sistema de etiquetado JavaScriptque permite enviar datos de acontecimientos a
    Google Analytics(también a AdWords y DoubleClick),
    insertando un fragmento de códigopara cada caso particular

utilizar
Tag Managersi quieres:



  • Instalar y modificar etiquetasde Google y de terceros en páginas web y aplicaciones móviles

  • Implementar y alterar etiquetas desde una interfaz web
  • Usar funciones de
    colaboracióny
    control de versiones

En cambio puedes usar el código
gtag.jsde
analyticssi no puedes utilizar Tag Mánager o bien si consideras importante:


  • Instalar etiquetas de forma directa en tu web sin dedicar tiempo a configurar un sistema de gestión de etiquetas
  • Trabajar con tus etiquetas de forma directa en JavaScript sin usar una interfaz independiente

Si ya empleas Tag Manager, sigue haciéndolo.
Las etiquetas de Google Ads y Google Marketing Platform son completamente compatiblesy no es preciso utilizar código auxiliar basado en gtag.js en tu web.


Si utilizas gtag.js de analytics, puedes mudar a Tag Mánager en cualquier instante.



Crear una cuenta de Tag Mánager es gratisy puedes
< webs empresas la misma cuenta de Tag Mánager para dirigir las etiquetas de todos los sitios o bien aplicaciones móvilesde tu empresa u organización.


Los pasos para
crear una cuenta de Tag Managerson los siguientes:


  1. Entra en, haz click en
    Cuentasy a continuación en
    Crear cuenta.
  2. Escribe un
    nombre de cuentapara poder identificarla y haz clic en
    continuar.
  3. Introduce un
    nombre de contenedor, escoge el
    tipo de contenidopara el que lo vas a utilizar: web, AMP, iOS o bien Android y haz clic en
    crear.
  4. Lee y acepta las
    Condiciones de Servicio.

Cuando el nuevo contenedor se cargue por primera vez, verás un mensaje con el
fragmento de código de instalación del contenedor webo te pedirá que empieces a utilizar Tag Mánager como una parte del
SDKde la
plataforma para móvilesque hayas escogido.


Puedes
instalar los fragmentos de códigoahora o hacer clic en Aceptar para eliminar el cuadro de diálogo e
instalar el fragmento de contenedormás adelante.


En realidad solo necesitarás instalar el
fragmento de código que te proporcionará Tag Managerpara poder
configurar el resto de las etiquetas mediante una interfaz de usuario basada en la Websin tener que mudar o
implementar código adicional.


Este
fragmento de códigoo
contenedorconecta tu web con los
servidores de Tag Manager, lo que te permitirá
configurar etiquetas de seguimiento, definir
activadorespara algunos
eventosy crear
variablesque se puedan usar para
simplificar y mecanizar las opciones de configuración de las etiquetas.


Cómo instalar el código de Tag Mánager en tu página web?


Si has escogido
instalar el fragmento de contenedormás adelante, encontrarás el acceso en la parte superior derecha del
área de trabajo de Tag Manager, haciendo clic en tu
ID de contenedor(su aspecto es
GTM-XXXXXXX).


Cuando hagas click se abrirá una ventana emergente titulada "
Instalar Google Tag Manager" en la que encontrarás
dos fragmentos de códigoque deberás copiar y pegar en la plantilla de tu web, para que aparezca en todas y cada una de las url de tu lugar.


Su aspecto es el siguiente:


Copia este código y pégalo a continuación de la etiqueta
<head>de tu página :


Copia este otro código y pégalo después de la etiqueta
<body>de apertura:



Una
cuenta de Tag Manageres el nivel más alto de organización de
Tag Managery dispone de uno o más
contenedores, que por su parte contiene una o varias
etiquetasconfiguradas para distintos usos.


Cada
cambioque realices en
Tag Managercreará un nuevo
contenedorperfectamente identificado que te permitirá
volver fácilmente a cualquier punto de implementación anteriorsi ciertos cambios que efectúes
funciona de forma distinta a como habías previsto.


De este modo se
reduce el número de erroresy se evita recurrir a un
desarrolladorpara hacer
cambioso instalar
actualizaciones.



Google Tag Managerutiliza de forma conjunta
activadores,
variablesy la
capa de datospara
controlar cómo se configuran y activan las etiquetas.


Parece muy complicado? No te preocupes, veremos cada una de estas cuestiones separadamente.



Un
contenedor de Tag Manageres una
secciónque agrupa un
conjunto de etiquetas, activadores, variables y opciones de configuraciónrelacionadas.


En general, tendrás un
contenedor activo en tu cuenta de Tag Managercon la
implementación actualy una
relación histórica de contenedorescon todas y cada una de las implementaciones que hayas
publicado en el pasado.


Si al publicar un
contenedorcon un nuevo
conjunto de etiquetas, activadores y variables activodescubres que
no se comporta de la forma prevista, podrás
volver facilmente a la configuración anteriorque escojas.



Una
etiqueta de Tag Manageres un
fragmento de código JavaScriptque se ejecuta en una página
webo
aplicación móvily envía información a terceros como Google
Analytics,
Google Ads,
Doubleclick Floodlight, etc.


Si empleas diferentes
herramientas de marketing digitalsin una solución de
administración de etiquetascomo Google
Tag Manager, cada una de ellas requerirá la
instalación de distintos fragmentos de código en tu web.


Para que sea más fácil
configurar y publicar códigos de seguimiento, Google
Tag Managerpresenta un potente sistema de
plantillas de etiquetas certificadas.


Para utilizar una
plantilla, solo tienes que elegirla, administrar los
detallessolicitados y escoger los
activadoresque activarán la etiqueta.



Tag Manageradmite las próximas
funciones y plataformas de etiquetas:



  • AB Tasty

  • AdAdvisor

  • adjust

  • Adobe Analytics

  • Adometry

  • AdRoll

  • AppsFlyer

  • Apsalar

  • AT Internet

  • AWIN

  • Bizrate Insights

  • Burt

  • Chartbeat

  • ClickTale

  • Clicky

  • comScore

  • Crazy Egg

  • Conversant

  • Criteo

  • Custom HTML

  • Custom Image

  • Cxense

  • DistroScale

  • dstillery

  • Eulerian Technologies

  • Firebase Analytics

  • Floodlight

  • Function Call

  • FoxMetrics

  • Google Ads

  • Google Analytics

  • Google Consumer Surveys

  • Google Optimize

  • Hotjar

  • Seguimiento de Infinity

  • Intent Media

  • K50

  • Kochava

  • Salesforce DMP (Krux)

  • LeadLab de wiredminds

  • LinkedIn

  • LinkPulse

  • Lytics

  • Marin

  • Médiamétrie

  • Microsoft Bing Ads

  • Mouseflow

  • mParticle

  • Nielsen

  • Neustar

  • Nudge

  • Oktopost

  • Optimise Media

  • ÖWA

  • OwnerListens

  • Parse.ly

  • Píxel de Perfect Audience

  • Personali

  • Piano

  • Placed Inc.

  • Pulse Insights

  • Quantcast

  • Rawsoft

  • SaleCycle

  • SearchForce

  • Segment

  • Shareaholic

  • SimpleReach

  • Snowplow

  • Survicate

  • Tradedoubler

  • Tune

  • Turn

  • Twitter

  • UpSellIt

  • Ve Interactive

  • VisualDNA

  • Webtrekk

  • Xtremepush

  • Yieldify

Si necesitas
implementar una etiqueta no admitida explícitamente a través de una plantilla, puedes usar
etiquetas personalizadasde
imagen,
HTMLo
funcióncon las que podrás instalar prácticamente cualquier etiqueta desde
Google Tag Manager.



Un
activador de Tag Managero
reglaes una
herramientaque deja
detectar acontecimientos específicoscomo
cargas de página,
clics en botones,
envíos de formularios,
desplazamientos de página, etc. para decidir cuándo ejecutar o activar las
etiquetas de Tag Manager.


Por lo tanto
un activador es una condición cuya evaluación da como resultado "true" o bien "false" en el tiempo de ejecución.


Por ejemplo, si deseas que una
etiquetase
activesolo en la página ejemplo.com/compra/recibo.html, puedes acotar un
activadorcon la
configuraciónsiguiente:



  • Evento: Página vista

  • Tipo de activador: Página vista

  • Activar: Algunas páginas vistas

  • Activar la etiqueta cuando se cumplan estas condiciones: URL contiene ejemplo.com/compra/recibo.html


Tag Managerofrece los siguientes
tipos de activadorespredeterminados:


  • Número de páginas vistas (Web)
  • Clics (Web)
  • Visibilidad del elemento (Web)
  • Envío de formulario (Web)
  • Cambio en el historial (Web)
  • Error de JavaScript (Web)
  • Profundidad de desplazamiento (Web)
  • Temporizador (Web)
  • Eventos adaptados (Web y móvil)
  • Vídeo de YouTube (Web)


Una
variablede Tag Manager o bien
macropermite
definir un marcadorpara que corresponda a un
valor que puede cambiar, como un nombre de producto, un coste o una fecha.


Las
variablesse pueden usar tanto en
activadorescomo en
etiquetas:


  • Las
    variables en activadoresse usan para acotar filtros que especifican cuándo activar una etiqueta concretamente.
  • Las
    variables en etiquetasse emplean para apresar valores dinámicos.

Tag Mánager tiene muchas
variables integradas predefinidasentre las que escoger, y deja
configurar variables personalizadasadicionales.


Por ejemplo, la variable predefinida "
url" contiene la
dirección de la página cargada en el instante en que se accede a la variable.


Puedes
configurar variables integradas o personalizadaspara ser usadas como
activadoro para
enviar información a las etiquetas.


Tipos de variables para páginas web



  • Cookie de origen: el valor se asigna a la cookie de origen cuyo nombre coincida con el dominio en el que se encuentra el usuario.

  • < diseño de paginas web economicas : el valor que se le asigna es la cadena que el usuario proporciona.

  • Número de versión de contenedor

  • JavaScript personalizado: el valor se configura como el resultado de una función JavaScript.

  • Capa de datos: se le asigna el valor "value" cuando se ejecuta este código en su lugar web: dataLayer.push('Data Layer Name': 'value').

  • Modo de depuración: el valor se configura como "true" si el contenedor se visualiza en modo de depuración.

  • Elemento DOM: el valor se configura como el texto del elemento DOM (modelo de objeto de documento) o bien el valor del atributo de elemento DOM especificado

  • Visibilidad del elemento: el valor se establece en función del estado perceptible del elemento DOM especificado.

  • URL de referencia HTTP: el valor se configura como la URL de referencia HTTP, la página precedente que ha visitado el usuario.

  • Variable de JavaScript: al valor se le asigna el de la variable global que especifique.

  • Tabla de consulta: el valor se configura según las instrucciones de la tabla de consulta.

  • Número aleatorio: el valor que se le asigna es un número azaroso comprendido entre 0 y .

  • Tabla RegEx: esta variable funciona de forma semejante a las tablas de consulta y, además, deja ejecutar patrones de expresión regular que coincidan con los elementos que desees.

  • URL: con esta clase de variable se pueden analizar y exponer los componentes de URL.

Tipos de variables para aplicaciones móviles



  • Seguimiento del anunciante habilitado: en Android, esta variable devuelve el valor "true" si el seguimiento de anuncios está habilitado, y "false" si el usuario ha inhabilitado los anuncios basados en intereses.

  • ID de la aplicación: al valor se le asigna el nombre del bulto (Android) o el ID del conjunto (iOS).

  • Nombre de la aplicación: al valor se le asigna el nombre de la aplicación que se encuentra en ejecución.

  • Código de versión de aplicación: al valor se le asigna la versión de la aplicación que se encuentra en ejecución.

  • Constante: al valor se le asigna la cadena que dé.

  • ID de contenedor: el valor es el ID público del contenedor

  • Número de versión del contenedor: cuando el contenedor está en el modo perfecto de vista anterior, el valor de esta variable es el número de versión de la vista anterior del contenedor.

  • ID del dispositivo: en Android se asigna el ID del dispositivo al valor, mientras que en los contenedores viejos de iOS, se le asigna " (la cadena vacía).

  • Nombre del dispositivo: al valor se le asigna el nombre del dispositivo de la aplicación que se halla en ejecución

  • Nombre del evento

  • Parámetro de evento: al valor se le asigna el de un parámetro de acontecimiento de Firebase Analytics registrado de la clave en cuestión.

  • Propiedad de usuario de Firebase: al valor se le asigna el de la propiedad de usuario de Firebase Analytics de la clave en cuestión.

  • Llamada de la función: al valor se le asigna el valor devuelto de una llamada a una función registrada previamente.

  • ID para publicidad: en Android, el valor que se le asigna es el ID de publicidad.

  • Idioma: al valor se le asigna el código de 2 letras asociado al idioma configurado por el usuario en el dispositivo.

  • Tabla de consulta: el valor se configura según las instrucciones de la tabla de consulta.

  • Versión del sistema operativo: al valor se le asigna la versión del sistema operativo en el que está instalada la aplicación.

  • Plataforma: al valor se le asigna la plataforma de la aplicación que se halla en ejecución (p. ej., "Android").

  • Número aleatorio: al valor se le asigna un número azaroso comprendido entre 0 y .

  • Resolución de pantalla: al valor se le asigna la resolución de pantalla del dispositivo de la aplicación que se halla en ejecución.

  • Versión del SDK: al valor se le asigna la versión del SDK del sistema operativo en el que está instalada la aplicación.

  • Recopilación de valores(solo en contenedores antiguos): esta variable contiene un conjunto de pares de clave-valor en formato JSON.


La
capa de datos de Tag Managero
Data Layeres un
objeto JavaScriptque deja
retener valores provisionalmente en las cookies del navegadorpara que puedan usarse en
etiquetas,
activadoresy
variables.


Las
variables de Tag Managertambién pueden
configurarsepara recobrar de forma directa los valores de las variables de
JavaScript, de las
cookiespropias o del
DOM, pero la
capa de datospermite
estructurary
organizarmejor el proceso.


Implementando una capa de datos
se reduce la probabilidad de perder datosdebido a cambios de código inadvertidos, se promueve un
modelo de datos bien organizado y accesibley es más fácil
solucionar posibles problemas.