Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Google Tag Manager: un nuevo paso en la Analítica Digital (Congreso de Zaragoza 2015)

7.627 visualizaciones

Publicado el

Presentación de mi ponencia "Google Tag Manager: un nuevo paso en la Analítica Digital", realizada en el Congreso Web de Zaragoza en 2015.

Publicado en: Marketing
  • Sé el primero en comentar

Google Tag Manager: un nuevo paso en la Analítica Digital (Congreso de Zaragoza 2015)

  1. 1. @SeoBilbao  #CW15   Congreso  Web  de  Zaragoza   Google  Tag  Manager Un  nuevo  paso  en  la  Analí3ca  Digital  
  2. 2. @SeoBilbao  #CW15   Sobre  mí Lucía  Marín lucia@experimentando.es      @SeoBilbao AnalíBca  Web,  Tag  Manager  y  Formación  en  Aukera
  3. 3. @SeoBilbao  #CW15   Un  nuevo  paso  en  la  AnalíBca  Digital
  4. 4. @SeoBilbao  #CW15   Lo  que  vamos  a  ver  hoy ü   Qué  es  y  por  qué  es  conveniente  usar  un  tag  manager ü   Estructura,  funcionamiento  y  capa  de  datos  de  GTM ü   Ejs.  de  eBquetas:  Google  AnalyBcs  y  AdWords ü   Consejos  e  ideas  para  sacar  el  máximo  parBdo  a  GTM
  5. 5. @SeoBilbao  #CW15   Qué  es  Google  Tag  Manager Una  puerta  abierta  al  código  en  Bempo  real,  que  flexibiliza  el  MarkeBng   Online,  al  dotarle  de  más  independencia  respecto  a  Desarrollo.   Sirve  para  insertar  y  gesBonar  algunos  fragmentos  de  código  HTML  y  JS   remotamente,  sin  tener  que  subir  cambios  a  producción  ni  publicar. Para  instalarlo  y  comenzar  a  trabajar  solo  debemos  insertar  un  código    JS   de  contenedor/iframe  en  el  siBo  web.
  6. 6. @SeoBilbao  #CW15   Usos  principales  de  Google  Tag  Manager ü Códigos  de  seguimiento  y  conversión  (analíBca,  campañas  online). ü   Otros  códigos  HTML  y  JS:  cambios  de  contenido  puntuales,  o   pequeñas  modificaciones  del  aspecto  del  siBo  web. ü   Personalización  en  Bempo  real,  según  interacción  del  usuario,  al   poder  vincularse  la  ejecución  de  código  a  eventos  generados  por  el   usuario.  Ej.  Pop  up  tras  15  minutos  de  inac2vidad…
  7. 7. @SeoBilbao  #CW15   Por  qué  usar  un  Tag  Manager Mejora  el  nivel  de  implementación  y  consultoría  de  analíBca  web
  8. 8. @SeoBilbao  #CW15   Por  qué  usar  un  Tag  Manager Mejor  que  el  código.  Menor  complejidad.  Mayor  análisis.  Mayor  control.
  9. 9. @SeoBilbao  #CW15   Por  qué  usar  un  Tag  Manager Si  sabes  programar,  mejor  para  B  :) ü     Variables ü     JavaScript  Personalizado ü     Aprende  más  rápido ¡Oportunidad,  no  Amenaza!
  10. 10. @SeoBilbao  #CW15   Por  qué  usar  un  Tag  Manager Nicho  de  mercado  ($$$). Estandarización  de  peBciones  a  desarrollo. Capa  de  datos:  es  donde   residen  los  datos  y  es  la   encargada  de  acceder  a  los   mismos.  (Wikipedia)
  11. 11. @SeoBilbao  #CW15   Estructura  y  Funcionamiento   de  Google  Tag  Manager
  12. 12. @SeoBilbao  #CW15   CONTENEDOR      =      Instalación  individual  de  GTM  con  la  que   trabajamos.  Normalmente:  Una  por  web.              CUENTA          =      Agrupación  lógica  de  1  o  más  contenedores.   Una  por  empresa,  o  por  cliente.          USUARIO            =        Cuenta  de  usuario  (email)  de  Google.  Puede   tener  acceso  a  una  o  más  cuentas    y  /  o  contenedores. Conceptos:  Usuario  -­‐  Cuenta  -­‐  Contenedor  
  13. 13. @SeoBilbao  #CW15   Permisos  a  nivel  de  Cuenta  o  Contenedor   Usuario Cuenta Contenedor Contenedor Cuenta Contenedor Usuario
  14. 14. @SeoBilbao  #CW15   Estructura  del  Contenedor  de  GTM CONTENEDOR  DE  GTM   E3quetas   (tags)   Ac3vadores   (triggers,  reglas)   Variables   (macros)  
  15. 15. @SeoBilbao  #CW15   ELquetas:   ¿Qué  fragmentos  de  código  vamos  a   gesBonar  desde  GTM?
  16. 16. @SeoBilbao  #CW15   ELquetas  en  Google  Tag  Manager Códigos  HTML  o  JS  que  integramos  en  nuestras  webs  de   manera  remota  desde  los  contenedores  de  GTM. Ejs.  códigos  de  seguimiento  de  analí2ca,  usabilidad,  conversiones,  remarke2ng,  … Google  Tag  Manager  
  17. 17. @SeoBilbao  #CW15   ELquetas  en  Google  Tag  Manager •  PLANTILLAS  para  servicios  de  Google  y  de  otros  proveedores. •  EBquetas  HTML  PERSONALIZADAS  para  otros  códigos.
  18. 18. @SeoBilbao  #CW15   Ejemplo:   Seguimiento  de  Google  AnalyLcs  
  19. 19. @SeoBilbao  #CW15   EBqueta  de  Universal  AnalyLcs   En  lugar  de  esto…
  20. 20. @SeoBilbao  #CW15   EBqueta  de  Universal  AnalyLcs   Configuramos  esto… Y   Google   Tag   Manager   se   encarga   de   generar   el  código  correcto.
  21. 21. @SeoBilbao  #CW15   AcLvadores:   ¿Cómo  hacemos  que  aparezcan  los  códigos   donde  deseamos?
  22. 22. @SeoBilbao  #CW15   AcLvadores  /  Triggers  /  Reglas  en  v1 ü   Marcan  cuándo  se  debe  acLvar  (o  no)  una  eBqueta.   ü   Por  cada  eLqueta  como  mínimo  un  acLvador. ü El  bloqueo  para  excepciones  (“gana”  a  la  acBvación).
  23. 23. @SeoBilbao  #CW15   AcBvadores:  Evento  +  Condiciones   EVENTO  Obligatorio ¿Qué  medir?   CONDICIÓN  Opcional ¿Cuándo  medirlo?
  24. 24. @SeoBilbao  #CW15   Eventos  AutomáLcos:  Salto  de  calidad  en   AnalíBca  Web  y  Medición  de  Conversiones Ejs.  Descargas  PDF,  clics  enlaces/elementos,  temporizadores… Eventos  AutomáLcos  con  pocos  clics  de  configuración. Para  todo  lo  demás…  Eventos  Personalizados.
  25. 25. @SeoBilbao  #CW15   Ejemplos  npicos  de  AcLvadores   Google  AnalyLcs:     AcBvar  en  PÁGINAS  SEGUIMIENTO Google  AdWords:   AcBvar  SOLO  en  CONVERSIÓN
  26. 26. @SeoBilbao  #CW15   Ejemplo:  Seguimiento  Google  AnalyBcs  (en   todas  las  páginas  que  nos  interese)
  27. 27. @SeoBilbao  #CW15   Ejemplo:  Conversión  de  Google  AdWords  (en   descarga  de  PDF)
  28. 28. @SeoBilbao  #CW15   ¿Qué  ocurre  si  tenemos…   …  acBvadores  diferentes? …  varias  condiciones  en  acBvador? AcLvadores  vs  Condiciones  /  Filtros aukera.es/blog/estructura-­‐de-­‐google-­‐tag-­‐manager/    
  29. 29. @SeoBilbao  #CW15   Variables:   Enriquece  tus  datos  y  OpBmiza  GTM
  30. 30. @SeoBilbao  #CW15   {{Variables}}:  Consultas  en  Bempo  real Capturan  datos  en  Bempo  de  ejecución,   para  acceder  a  ellos  donde  se  necesite.   Ej.  Importe  carrito. El  equivalente  a  variables  o  funciones   de  apoyo  de  la  mayoría  de  lenguajes  de   programación.  
  31. 31. @SeoBilbao  #CW15   {{Variables}}:  Almacena  y  ReuBliza  datos Almacena   datos:   FIJOS   o   DINÁMICOS.   En   Lempo  real  (se  recalculan  cada  vez  que  se   hace  referencia  a  ellos).  Ej.  UA-­‐  AnalyBcs. Comunes   al   Contenedor:   se   pueden   reuLlizar   en   diversas   eBquetas   y   acBvadores,  los  definen  y  complementan.
  32. 32. @SeoBilbao  #CW15   {{Variables}}:  Para  datos  que  queramos… -­‐  ReuLlizar  o  comparLr  entre  eLquetas.  Ej.  Importe  Pedido.   -­‐  Calcular  en  Lempo  real    (ej.    Hostname,  URL  clicada,  etc.) -­‐  ULlizar  en  acLvadores:  Definen  condiciones  al  compararse   con  un  valor  concreto.   -­‐  ULlizar  en  otras  variables.  Por  ej.  JavaScript  personalizado.  
  33. 33. @SeoBilbao  #CW15   {{Variables}}:  Ejs.  Uso  dentro  de  eLquetas   -­‐ PlanLllas  de  ELqueta: -­‐ ELquetas  HTML  personalizadas.  Por  ej.: <img height="1" width="1" style="display:none;" alt="" src="//t.co/i/adsct? p_id=Twitter&tw_sale_amount={{ImportePedido}} &tw_order_quantity={{NumPedido}}" /></noscript>
  34. 34. @SeoBilbao  #CW15   Ejemplo  de  Evento  AutomáBco  aprovechando   Variables:  Seguimiento  de  descargas  PDF  
  35. 35. @SeoBilbao  #CW15   Evento  +  Variables  =  AutomaBzación  +  Info No  afecta  al  Rebote  -­‐>  
  36. 36. @SeoBilbao  #CW15   {{Variables}}  Integradas  vs  Definidas  por  usuario
  37. 37. @SeoBilbao  #CW15   Variables  definidas  por  el  usuario:   Las  4  Variables  Fundamentales  en  GTM aukera.es/blog/variables-­‐clave-­‐google-­‐tag-­‐manager    
  38. 38. @SeoBilbao  #CW15   Los  4  fantásLcos  en  Tag  Manager   JavaScript   Personalizado   Constante   Tabla  de   Consulta   Variable  de   dataLayer  
  39. 39. @SeoBilbao  #CW15   1.  Variable  Constante  en  GTM Almacena  un  valor  (para  modificaciones  globales) Ideal  para:  UA-­‐  AnalyBcs,  ID  Cuenta  AdWords…  y  todos  los   campos  que  vayan  a  repeBrse  en  eBquetas  o  acBvadores
  40. 40. @SeoBilbao  #CW15   2.  Variable  Tabla  de  Consulta DisBntos  valores  dependiendo  de  otra  variable. aukera.es/blog/google-­‐tag-­‐manager-­‐agencias-­‐publicidad   Filtro  por  Hostname:   -­‐  Las  pruebas  a  otra  UA -­‐  Evita  datos  de  dominios   disBntos  al  tuyo  (¡valor   predeterminado!) Todas  las   llamadas  a   tu  GTM  (GA)   que  no   procedan  de   tu  dominio,   irán  a  la   segunda  UA-­‐
  41. 41. @SeoBilbao  #CW15   3.  Variable  de  Capa  de  datos  (dataLayer) Recupera  valores  de  variables  enviadas  desde   código  siguiendo  el  estándar  de  dataLayer  de  GTM.
  42. 42. @SeoBilbao  #CW15   Fundamental  Colaboración  de  desarrollo  …
  43. 43. @SeoBilbao  #CW15   Principales  usos  de  la  dataLayer  en  GTM ü     Eventos  Personalizados:  envío  de  evento  en   código  (cuando  no  basten  eventos  automáBcos)   ü     Seguimiento  de  Ecommerce  (Classic  y  Enhanced) ü     Seguimiento  de  Conversiones  (valor,  id  pedido…)
  44. 44. @SeoBilbao  #CW15   Capa  de  datos  (dataLayer)  en  GTM Formato  válido  en  cualquier  parte  de  la  página   (antes  o  después  del  código  del  contenedor  de  GTM): window.dataLayer = window.dataLayer || []; dataLayer.push({ Para  cualquier  lenguaje  de  programación. ¡Gracias  @BaldrickTM!
  45. 45. @SeoBilbao  #CW15   dataLayer  para  Variable  con  Valor  del  Pedido Ejemplo  de  dataLayer: <script type='text/javascript'> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'revenue': 45 </script> Ponemos  el  nombre  de  la  variable  tal  cual,  ¡y  listo!  J Capturar  valor  en  VARIABLE  DE  DATALAYER  
  46. 46. @SeoBilbao  #CW15   dataLayer  para  AcBvador  Evento  Personalizado <script type='text/javascript'> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'Pedido' </script> Para  acLvadores  complejos  de  eBquetas,  para  mandar  datos/eventos   a  Google  AnalyBcs…  Muy  úBl  en  envío  de  transacciones  (para  evitar   duplicidad),  en  formularios  sin  thank  you  page… Ac3vador  de  EVENTO  PERSONALIZADO  
  47. 47. @SeoBilbao  #CW15   dataLayer  de  Enhanced  Ecommerce  (I)   <script type='text/javascript'> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'Pedido', 'ecommerce': { 'purchase': { 'actionField': { 'id': 'AB1234', 'revenue': 45, 'tax':3.5, 'shipping': 4.5, 'coupon': '', //ej. Valor vacío }, // continúa en la siguiente página… Ahorra  Lempo  y  detecta  errores     1.    Mandar  siempre  con  evento 2.    Números  sin  comillas,  cadenas  con 3.    Puntos  para  decimales 4.    ¡Vigila  las  comillas! support.google.com/tagmanager/answer/3002596   simoahava.com/analy3cs/ecommerce-­‐3ps-­‐google-­‐  tag-­‐manager   developers.google.com/tag-­‐manager/devguide  
  48. 48. @SeoBilbao  #CW15   Cómo  recuperar  valores  anidados: 'products': [{ 'name': 'Pulsera Amazonas', 'id': 'PUL23', 'price': 45, 'brand': 'AR', 'category': 'Pulseras', 'variant': 'Roja', 'quantity': 1, 'coupon': '' //último sin coma }] } } }); </script> developers.google.com/tag-­‐manager/devguide     developers.google.com/tag-­‐manager/enhanced-­‐ecommerce   ecommerce.purchase. acBonField.revenue dataLayer  v2:  El  punto   (.)  representa  un  valor   anidado: ecommerce  {                purchase  {                          acBonField  {                                        revenue:   dataLayer  de  Enhanced  Ecommerce  (II)  
  49. 49. @SeoBilbao  #CW15   Ej.  EBqueta  de  AdWords  con  valor  dinámico  :) AcBvamos  en  página  o  en  evento  de  confirmación: ¡OJO!  Solo    uno  de  los  acBvadores/eventos  (página   o  personalizado).  Si  no,  duplicaremos.  Leer  más  >
  50. 50. @SeoBilbao  #CW15   4.  Variable  de  JavaScript  Personalizado Código  JavaScript  insertado  desde  GTM  para   recopilar  un  dato  que  nos  interese,  uBlizamos  una   función  JS  que  devuelva  un  valor.
  51. 51. @SeoBilbao  #CW15   Ej.  Variable  de  JavaScript  Personalizado <script type='text/javascript'> function() { return document.getElementById('importe') .innerHTML; } </script>
  52. 52. @SeoBilbao  #CW15   Publicación  y  Vista  Previa/Depuración:   ¿Cómo  subimos  y  probamos  los   cambios  realizados  con  GTM?
  53. 53. @SeoBilbao  #CW15   ¡¡No  olvidemos  PUBLICARRR!! Borrador  del   contenedor   Vista  previa  y   depuración   Publicación   Funcionamiento  de  Google  Tag  Manager
  54. 54. @SeoBilbao  #CW15   Control  de  Versiones  y  Publicación   Los  cambios  van  a  un   borrador  de  contenedor   que  debemos  publicar. Cada  publicación  es  una   versión  que  podremos   consultar  y  restaurar. RESTAURAR  versión  
  55. 55. @SeoBilbao  #CW15   Publicar  o  no  publicar:  Esa  es  la  cuesBón
  56. 56. @SeoBilbao  #CW15   Probar  siempre:  Vista  previa  y  depurar   Como  si  publicáramos  pero  solo   lo  vemos  en  nuestro  navegador. Entorno  de  pruebas  ideal,  revisa   la  correcta  ejecución  de  las   eBquetas  antes  de  su  publicación   definiBva.
  57. 57. @SeoBilbao  #CW15   Depuración:  verificar  que  todo  funcione Secuencia  de  eventos  a  la  izquierda. En  cada  evento  vemos  eBquetas,  dataLayer  y  valores  de  variables   (pueden  ser  diferentes  según  el  elemento  al  que  afecten  ej.  Clic).
  58. 58. @SeoBilbao  #CW15   Google  AnalyBcs:  Configuraciones  y  consejos   ¡Adiós  a  personalizaciones  de  código!
  59. 59. @SeoBilbao  #CW15   Google  AnalyBcs:  Algunas  Configuraciones   Datos  de  display Ecommerce  Mejorado Dimensiones  personalizadas Páginas  virtuales
  60. 60. @SeoBilbao  #CW15   Google  AnalyBcs:  Campos  para  configurar   ¡Fundamental!  userID,  cookieDomain,  anonymizeIp,  page   (páginas  virtuales),  referrer… aukera.es/blog/actualizacion-­‐tag-­‐manager-­‐campos-­‐para-­‐configurar-­‐google-­‐analy3cs    
  61. 61. @SeoBilbao  #CW15   Grupos  de  Contenido  para  Expedientes  X   •  URL  real  (completa)  de  desBno,  anterior,  siguiente  y  de  salida. •  Resolución  de  cuesBones  de  eBquetado  de  enlaces,  falso  tráfico   directo  (redirecciones),  errores  404,  etc. l3analy3cs.com/2014/10/07/2-­‐unusual-­‐content-­‐groups    
  62. 62. @SeoBilbao  #CW15   Ahorra  Bempo:  Configura  y  duplica   1)  Perfecciona  eLquetas  BASE:  dimensiones  personalizadas,  grupos  de   contenido,  seguimiento  mulBdominio,  UserID… 2)  Variables  en  todos  los  campos  posibles  (modificaciones  GLOBALES) 3)  Copia  y  duplica  para  arrastrar  configuraciones
  63. 63. @SeoBilbao  #CW15   Ejemplo  avanzado:  Cambios  en  Contenido   Coexistencia  de  varias  versiones  de  página,  cambios  en  APARIENCIA. QUÉ:  Varias  versiones  simultáneas  en  el  contenedor,  que  se  publicarán   en  función  de  las  necesidades  con  un  par  de  clics.                          V1                                                                                                                          V2 CÓMO:  Contenedor  GTM  separado  del  “normal”. Solo  recogida  en  local   Entrega  y  Recogida  
  64. 64. @SeoBilbao  #CW15   ¿Varios  contenedores  en  un  siBo  web? Es  posible  que  en  un  siBo  web  convivan  varios  contenedores  de  GTM,   siempre  que  realicemos  un  sencillo  cambio:  renombrar  la  dataLayer. <script type='text/javascript'> window.dataLayer2 = window.dataLayer2 || []; dataLayer.push({ 'event': 'Pedido' </script>
  65. 65. @SeoBilbao  #CW15  
  66. 66. @SeoBilbao  #CW15   ¿Dudas  o  preguntas? Lucía  Marín lucia@aukera.es @SeoBilbao experimentando.es cursotagmanager.com

×