Envío de dimensiones personalizadas con Google Tag Manager

Publicado en Configuración Avanzada, Configuración de Google Analytics, Herramientas el 18 de octubre de 2013 por .

Hace un par de semanas se celebró en Mountain View el Google Analytics Summit 2013, donde se presentaron las nuevas funcionalidades que nos iremos encontrando en las distintas herramientas de Google durante los próximos meses. En el caso particular de Google Tag Manager, nos explicaron que a partir de ahora será posible configurar el lanzamiento automático de eventos sin tocar ni una línea de código y que dispondrá de un SLA (Service Level Agreement) para los clientes de Google Analytics Premium. En los próximos días compartiremos más detalles sobre esas y el resto de novedades del Summit, así que estad atentos!

Después del post sobre cómo funciona Google Tag Manager y tras explicar cómo hacer el seguimiento de eventos, hoy le toca el turno a la recopilación y envío de dimensiones personalizadas.

Ante todo, me gustaría hacer hincapié una vez más en que el hecho de utilizar un sistema de Tag Management no siempre es sinónimo de simplicidad. Ya lo explicó en su día Oriol Farré en el artículo de los 10 mitos sobre Google Tag Manager, y creo que esta ocasión es especialmente oportuna para recordar que la implementación de una herramienta de medición a través de un sistema de Tag Management también conlleva cierta complejidad.

Dicho esto, intentaré que este post sirva para dar algo de luz sobre algunos de los métodos que podemos utilizar a la hora de recopilar dimensiones personalizadas de Google Analytics (o custom dimensions) a través de Google Tag Manager.

A modo de ejemplo, vamos a suponer que necesitamos obtener los siguientes datos de un sitio web para su posterior envío a Google Analytics:

  • Sección del sitio web = Productos
  • Subsección = Camisetas
  • Tipo usuario = Anónimo

Definición de las custom dimensions

Lo primero que haremos será definir las tres dimensiones personalizadas con las que vamos a trabajar. Para ello, accederemos a la sección de Administración de nuestra cuenta de Google Analytics y configuraremos las dimensiones anteriores: Admin > Custom Definitions > Custom Dimensions > New Custom Dimension

Dimensiones personalizadas en Google Analytics

Dimensiones personalizadas en Google Analytics

Ahora que ya tenemos creadas las variables, explicaremos las diferentes alternativas mediante las cuales podremos asignarles un valor a las mismas utilizando Google Tag Manager.

Método 1: Data Layer

El Data Layer es un objeto a través del cual se puede definir la información a enviar utilizando el par ‘nombre’: ‘valor’ y separándolo por comas tantas veces como sea necesario.

<script>
dataLayer = [{
   'nombre1': 'valor1',
   'nombre2': 'valor2',
   ...
   'nombreN': 'valorN'
}];
</script>

 

Para implementar nuestro ejemplo, antes de meter las manos en el código tendríamos que acceder a Google Tag Manager y configurar el tag de Google Analytics de la siguiente forma:

Google Tag Manager

Definir la macro “Secciones del site” dentro del tag de Universal Analytics:

Google Tag Manager

Google Tag Managert

Y lo mismo con las macros “Subsecciones” y “Tipo de usuario”:

Google Tag Manager

Google Tag Manager

Como veis, se trata simplemente de crear un nuevo tag de Universal Analytics y posteriormente definir tres macros (una para cada dimensión) de tipo Data Layer.

Una vez finalizada la configuración, sólo nos faltaría incluir el propio Data Layer en el código de la página en la que vamos a recopilar los datos:

<script>
dataLayer = [{
   'seccion': 'Productos',
   'subseccion': 'Camisetas',
   'tipo_usuario': 'Anonimo'
}];
</script>

 

Finalmente, incluyendo este mismo Data Layer en todo el sitio web (obviamente, en cada caso con los valores que correspondan), ya tendríamos todo listo para recopilar la sección, la subsección y el tipo de usuario que navega por el site.

Método 2: Variables Javascript

Esta segunda opción consiste en utilizar variables Javascript (nuevas o ya existentes en el código) para asignarle valores a las dimensiones personalizadas de Google Analytics.

Para ello, lo primero que debemos hacer es indicar en el Tag Manager que las macros en este caso serán de tipo “Javascript Variable” (sólo muestro la macro “Secciones”, pero habría que hacerlo con las tres):

Google Tag Manager

Al igual que en el caso del Data Layer, sólo nos faltaría incluir las variables Javascript que hemos definido o asegurarnos de que ya existan y tomen los valores correspondientes:

<script>
   var seccion = “Productos”;
   var subseccion = “Camisetas”;
   var tipo_usuario = “Registrado”;
</script>

 

Método 3: Elementos del DOM

El último método que explicaremos en este post consiste en la utilización de elementos del DOM.

Para este ejemplo, vamos a suponer que disponemos de los siguientes elementos en el código HTML (migas de pan y estado del usuario):

Estás en:
<ul id="breadcrumb">
<li id="section"><a href="productos.html" title="Productos">Productos</a></li> |
<li id="current">Camisetas</li>
</ul>
<p>Hola <span id="userType">Anónimo</span>. <a href="login.php" title="Identificate">Identificate</a></p>

 

De esta forma, tendríamos todo lo necesario para definir nuestras tres dimensiones personalizadas en Google Tag Manager y ya no necesitaríamos tocar nada en el código fuente.

La configuración asociada sería en este caso la siguiente:

Macro “Secciones del site”:
Google Tag Manager

Macro “Subsecciones”:

Google Tag Manager

Macro “Tipo usuario”:

Google Tag Managert

Lo que hemos hecho es decirle a Google Tag Manager que:

  • Las secciones del site deben tomar el valor del elemento del DOM cuyo id es “section” => Secciones del site = “Productos”.
  • Las subsecciones deberán tomar el valor del elemento del DOM cuyo id es “current” => Subsecciones = “Camisetas”.
  • El tipo de usuario tomará el valor del elemento del DOM cuyo id es “userType” => Tipo usuario = “Anónimo”.

Alternativamente, podríamos utilizar el valor de un atributo HTML en lugar de obtener directamente el texto asociado al elemento del DOM. Un ejemplo de dicho escenario lo podríamos encontrar en el siguiente código:

[...]
<li id="section"><a href="productos.html" title="Productos">Productos</a></li>
[...]

Google Tag Manager

En este caso, le hemos dicho a Google Tag Manager que las secciones del site se deben alimentar del valor del atributo “title” (es decir, “Productos”) del elemento cuyo id es “section”.

Está claro que tenemos varias opciones a nuestra disposición a la hora de asignarle valores a las dimensiones personalizadas. En la gran mayoría de los casos, la clave es tener una buena comunicación con el equipo de IT para decidir conjuntamente cuál (o cuáles, porque se pueden combinar) de estas alternativas es la que mejor se adapta a las particularidades del sitio web o del CMS y con las necesidades de personalización en la recopilación de datos que se plantean desde el equipo de negocio.

Como siempre, espero que este post os resulte útil y que nos contéis vuestra experiencia :)

 

Etiquetas: , , , ,

Sobre Nicolás D'Angelo

Ingeniero Técnico Informático de Sistemas por la Universidad de Oviedo, certificado en Google Analytics y con amplia experiencia en la implantación de sistemas de medición como Adobe SiteCatalyst y Webtrends Analytics.

Me encanta la música, jugar al fútbol y disfrutar de los paseos con mi perra.

Puedes encontrar a Nicolás en:

LinkedIn Blog


7 Comentarios en Envío de dimensiones personalizadas con Google Tag Manager

  1. jose

    Muy buen articulo, ¿pero que regla lanzaría la etiqueta?

  2. .U9xhE-N_vJI

    When someone writes an article he/she retains the idea of a user in his/her mind
    that how a uszer can be awaare of it. Thhus that’s why this article is great.

    Thanks!

    Feel free to visit my web-site .U9xhE-N_vJI

  3. email Reading

    That is very interesting, You’re an overly skilled
    blogger.I have joined your feed and stay up
    for in quest of more of your wonderful post. Also, I’ve shared your web site in my social networks

    Here is my webpage email Reading

  4. pack

    Hi there, I disscovered your site viaa Googlpe at the sqme
    time as looking for a related matter, your site got here up, iit seems to
    be great. I’ve bookmarked it inn my googlle bookmarks.

    Hello there, just changed into aware of your blog through Google, and foubd that it’s truly
    informative. I am gonna watch out for brussels.I will be grateful in case you continue this in future.
    Numerous folks shall be benefited out of your writing.
    Cheers!

    Feel free to surf to my blog post :: pack

  5. Roxana

    I hardly crwate responses, but i did ome searching and wound
    uup here Envío de dimensiones personalizadas coon Goolgle Tag Manager.
    Andd I actyally ddo have some questions for you iff youu doo not mind.
    Coul it bbe jujst me orr ddoes iit lok lkke a few of tthe remarks come across likje written by brain dead visitors?
    :-P And, if you are posting on other online ssocial sites, I’d liike tto follkw anything resh you ave to post.
    Wouldd you lizt off every one off all our publicc sites
    like your linkein profile, Facebook pawge or ttwitter feed?

    Also viseit my web-site: gamee – Roxana,

  6. Car Dealerships in Tampa

    An impressive share! I’ve just forwarded this onto a
    fried whoo was conducting a little research on this.
    Annd hee in fact ordered mee breakast due to the fact
    that I stumbled upon it for him… lol. So let me reword this….

    Thank YOU for the meal!! But yeah, thanks for spending the time to discuss this subject here on your website.

  7. advertise in chinese

    I do accept as true witgh all the ideas you have presented to your post.
    They are very convincing and will certainly work. Still, thhe posts arre very brief
    for newbies. Could you please prilong them a bit from subsequent
    time? Thanks for the post.

1 Trackbacks For This Post

  1. Lo mejor de la semana sobre desarrollo web en español vol. 30 | ADWE Says:

    [...] Envío de dimensiones personalizadas con Google Tag Manager [...]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>