1 Followers
26 Following
shortsheaven0

shortsheaven0

SPOILER ALERT!

Guía de Google Tag Manager para principiantes



< tienda online presupuesto es 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 página web, y en un caso así
Tag Managerno te proporcionará ninguna ventaja.


Sin embargo, según avances en tus
conocimientos de Analytics, quizá quieras
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 quieras efectuar 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 primera vista
parece más difícil de lo que es.


Agrupando tus
etiquetasen un
contenedor de Tag Manager, podrás
gestionarlastodas a través de 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 principio.


Para no perdernos en su dificultad, en esta
guía para principiantesvamos a
acercarnos a Tag Manager 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 página web o aplicación móvil desde una interfaz web, sin regresar a tocar su código

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

utilizar
Tag Managersi quieres:



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

  • Implementar y modificar 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 usar Tag Mánager o si consideras importante:


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

Si ya usas Tag Mánager, sigue haciéndolo.
Las etiquetas de Google Ads y Google Marketing Platform son plenamente compatiblesy no es necesario usar código adicional basado en gtag.js en tu web.


Si usas gtag.js de analytics, puedes mudar a Tag Manager en cualquier momento.



Crear una cuenta de Tag Manager es gratisy puedes
utilizar exactamente la misma cuenta de Tag Manager para regentar 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 clic en
    Cuentasy a continuación en
    Crear cuenta.
  2. Escribe un
    nombre de cuentapara poder identificarla y haz click en
    continuar.
  3. Introduce un
    nombre de contenedor, selecciona el
    tipo de contenidopara el que lo vas a utilizar: web, AMP, iOS o Android y haz clic en
    crear.
  4. Lee y admite 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 emplear Tag Manager como una parte del
SDKde la
plataforma para móvilesque hayas elegido.


Puedes
instalar los fragmentos de códigoahora o hacer click en Admitir para suprimir 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 página web con los
servidores de Tag Manager, lo que te permitirá
configurar etiquetas de seguimiento, acotar
activadorespara algunos
eventosy crear
variablesque se puedan emplear para
simplificar y mecanizar las opciones de configuración de las etiquetas.


Cómo instalar el código de Tag Manager en tu web?


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


Cuando hagas clic 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 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 bien más
contenedores, que por su parte contiene una o varias
etiquetasconfiguradas para diferentes usos.


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


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



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


Parece muy complicado? No te preocupes, vamos a ver cada una de estas cuestiones separadamente.



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


En traducir drupal al español , 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 diversas
herramientas de marketing digitalsin una solución de
administración de etiquetascomo Google
Tag Manager, cada una de ellas requerirá la
instalación de diferentes 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 seleccionarla, suministrar los
detallessolicitados y seleccionar los
activadoresque activarán la etiqueta.



Tag Manageradmite las siguientes
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 precisas
implementar una etiqueta no admitida explícitamente a través de una plantilla, puedes utilizar
etiquetas personalizadasde
imagen,
HTMLo
funcióncon las que podrás instalar casi cualquier etiqueta desde
Google Tag Manager.



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


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


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



  • Evento: Página vista

  • Tipo de activador: Página vista

  • Activar: Ciertas páginas vistas

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


Tag Managerofrece los próximos
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 personalizados (Web y móvil)
  • Vídeo de YouTube (Web)


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


Las
variablesse pueden utilizar tanto en
activadorescomo en
etiquetas:


  • Las
    variables en activadoresse utilizan para definir filtros que detallan cuándo activar una etiqueta en concreto.
  • Las
    variables en etiquetasse utilizan para atrapar valores dinámicos.

Tag Manager tiene muchas
variables integradas predefinidasentre las que seleccionar, 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 bien 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.

  • Cadena constante: 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 sitio 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 el valor del atributo de elemento DOM especificado

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

  • 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 parecida 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 examinar 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 paquete (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 halla 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 halla en ejecución.

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

  • 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 previa del contenedor.

  • ID del dispositivo: en Android se asigna el ID del dispositivo al valor, al paso 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 encuentra 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 encuentra 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 viejos): 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 temporalmente en las cookies del navegadorpara que puedan emplearse en
etiquetas,
activadoresy
variables.


Las
variables de Tag Managertambién pueden
configurarsepara recuperar directamente los valores de las variables de
JavaScript, de las
cookiespropias o del
DOM, mas 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 desapercibidos, se promueve un
modelo de datos bien organizado y accesibley es más fácil
solucionar posibles problemas.