Dynamic Tag Manager : El nuevo gestor de etiquetas de Adobe

Hace unos meses os traíamos un post sobre el gestor de etiquetas de Google (Google Tag Manager) y las diferentes opciones que nos ofrecía. Hoy os venimos a hablar de otro, en este caso el “nuevo” Adobe Dynamic Tag Manager. Para contextualizar cómo y por qué ha visto la luz este gestor de etiquetas debemos remontarnos a mediado de 2013 cuando Adobe nos sorprendía con la adquisición de Satellite, un potente gestor de etiquetas que le daría a Adobe la posibilidad de competir de tú a tú con Google y su tag manager lanzado allá por 2012 y en constante evolución.

Veamos en detalle lo que este gestor de etiquetas nos proporciona para que podáis, cada uno de vosotros, evaluar los pros y los contras de la herramienta ante una hipotética integración de este gestor en vuestros sitios web.

Para la integración de Adobe Dynamic Tag Manager se deben seguir cinco pasos:

1- Creación de una propiedad dentro de la cuenta de ADTM, estas propiedades serán, o se recomienda que sean, únicas por sitio web, varios subdominios o varios sitios web que se desean administrar de forma conjunta.

2- Integración de herramientas de analítica, testing, etc, en el contenedor anteriormente creado. Obviamente la integración con las herramientas Adobe Marketing Cloud es total (Adobe Analytics, Adobe Target,…), pero también se ha incluido la integración con Google Analytics Classic y Universal:

3- Creación de las reglas de carga. Existen reglas de carga condicionadas a eventos o a la propia carga de página. Como regla básica se recomienda la creación de una regla de lanzamiento para todas las páginas, y en virtud a nuestras necesidades con cada herramienta ir añadiendo las más específicas.

4- Configuración de las herramientas añadidas en el paso 2. Adobe Dynamic Tag Manager nos permitirá utilizar recursos propios (data elements, asignación de variables de forma visual,…) o bien recurrir a la integración vía JavaScript, que para una integración avanzada puede ser muy útil.

5- Por último, se debe integrar el código de Adobe Dynamic Tag Manager en todas las páginas de los sitios web objeto de medición. El código consta de dos etiquetas:

1. Header code: Adobe recomienda que se incluya dentro de la cabecera HTML de todas y cada una de las páginas de nuestro sitio web, lo más próximo a la apertura (etiqueta <head>):

2. Footer code: Deberá ser incluida justo antes de la etiqueta HTML de cierre del cuerpo de cada una de las páginas de nuestro sitio web (etiqueta </body>):

Existen dos versiones de estas etiquetas, una para los entornos de desarrollo o pre-producción (la etiqueta de la cabecera tendrá el sufijo “-staging”) y otra etiqueta para los entornos de producción (etiqueta idéntica a la anterior pero sin el sufijo “-staging”). La etiqueta del footer es idéntica para los diferentes entornos.

Ejemplo de etiquetas:

<script src="//assets.adobedtm.com/<identificador_cuenta_ADTM> /satelliteLib-<identificador_contenedor_ADTM>-staging.js"></script>  <script src="//assets.adobedtm.com/<identificador_cuenta_ADTM> /satelliteLib-<identificador_contenedor_ADTM>.js"></script>  <script type="text/javascript">_satellite.pageBottom();</script>

Como veremos a continuación la integración de una nueva herramienta en Adobe Dynamic Tag Manager es algo sencillo, para verlo con un ejemplo mostraremos el detalle de una integración de Adobe Analytics sobre un contenedor de pruebas.

Lo primero que debemos hacer es acceder a nuestra cuenta de Adobe Dynamic Tag Manager, una vez dentro veremos la lista de contenedores que tenemos definidos y en el caso de querer crear uno nuevo, la herramienta nos da la opción desde esta misma pantalla mediante un botón “Add Property”:

Iremos al contenedor correspondiente y haciendo clic sobre el nombre, la herramienta nos conducirá a la página de configuración del contenedor donde se podrán añadir nuevas herramientas, nuevos tags, crear y administrar reglas, etc, para el contenedor seleccionado:

Antes de ir a la integración propia de la herramienta veamos las diferentes secciones de la consola de administración de un contenedor concreto.

La consola de administración está dividida en una serie de pestañas donde se nos proporcionan una serie de opciones de configuración para nuestro contenedor:

Overview: Nos da una visión global de los elementos del contenedor (herramientas, tags, usuarios,…), ofreciéndonos las opciones de publicar y editar el contenedor que hemos seleccionado.
Rules: Sección para la gestión de las diferentes reglas del contenedor, así como la creación y definición de los data elements (variables de uso global dentro de la herramienta).
Approvals: En esta pestaña se nos mostrarán los diferentes cambios que hemos realizado de una versión a otra del contenedor. Si éstos no son aprobados no se verán reflejados en nuestro sitio web. Es muy importante indicar que un cambio aprobado puede ser revisado desde “-staging” y mientras el contenedor no sea publicado este cambio no se verá reflejado en el entorno de producción (huella sin el sufijo “-staging”).
History: Nos dará una visión del histórico de cambios realizados segmentado por días. En cada cambio se indicará el usuario que lo ha realizado así como el detalle del mismo (nuevo, modificación o eliminación). Cada cambio puede ser a su vez editado en el caso de que necesitáramos deshacerlo.
Embed: Aquí nos encontraremos los códigos a integrar en nuestro sitio web así como el servidor, de los que nos proporciona Adobe, donde queremos que esté alojado nuestro contenedor (Akamai, Amazon S3,…).

Una vez repasadas las diferentes secciones de la consola de administración de Adobe Dynamic Tag Manager, nos dirigimos a la pestaña overview desde donde poder añadir la herramienta Adobe Analytics que veremos como ejemplo de integración. En la sección “overview” debemos ir al botón Add a Tool y seleccionaríamos dicha herramienta en el listado:

Una vez la hemos añadido a nuestro contenedor, debemos configurar las diferentes variables que harán que la información sea enviada al contenedor de Adobe Analytics adecuado. Para configurar la herramienta debemos dirigirnos a la página inicial donde se encuentra el listado de herramientas y clicar en el icono de la derecha del nombre de la herramienta que deseamos configurar. Una vez dentro, se nos mostrarán una serie de pestañas plegadas que podemos ir desplegando para configurar dentro de ellas los diferentes datos. A continuación os explicamos que os encontraríais en cada una de las pestañas en la integración de Adobe Analytics:

General: Permitirá configurar variables generales de Adobe Analytics como pueden ser Character Set, Currency code, Tracking server,…
Library Management: En esta pestaña nos encontraremos las opciones de integración de la librería que contendrá la lógica de seguimiento de Adobe Analytics, el conocido fichero “s_code.js”. En Adobe Dynamic Tag Manager se nos permitirá integrar de forma estándar la última versión existente del fichero (con la opción “Manager by Adobe”), o bien una la lógica personalizada mediante un fichero creado por nosotros , que podremos tener alojado en el propio Adobe Dynamic Tag Manager (copy & paste en ADTM) o en nuestro servidor y simplemente añadir la ruta.

En esta pestaña además se permite seleccionar si queremos que se cargue la librería al inicio o al final de la página.

Global Variables: Nos proporciona la gestión dinámica de nuestras variables de tráfico (prop’s) y conversión (eVar’s) de Adobe Analytics, pudiéndoles asociar una cadena constante o data elements que crearemos en el contenedor correspondiente de nuestro gestor de etiquetas. Estas variables también podrían definirse mediante código JavaScript dentro del fichero “s_code” y será el usuario quien deberá elegir la opción que más se adapte a sus necesidades.
Pageviews & Content: Pestaña para la definición de las variables pageName, Channel, Hier’s y Page URL. Nuevamente a estas variables se les podrá asignar data elements o valores constantes y podrán definirse mediante código JavaScript dentro del fichero “s_code” o directamente en la consola de ADTM.
Link tracking: La integración de Adobe Analytics con Adobe Dynamic Tag Manager nos permitirá en esta pestaña realizar el seguimiento de forma automática de diferentes eventos como pueden ser descargas o enlaces de salida. En ambos casos Adobe nos facilita una serie de opciones de personalización como extensiones de ficheros a seguir o la definición de los dominios que deben ser considerados o no de salida.
Referrer & Campaigns: En esta opción se permite al usuario definir los referentes que no deben ser tenidos en cuenta y los parámetros de campaña a considerar en la variable “campaigns” de Adobe Analytics.
Cookies: Se podrán definir en esta pestaña las cookies propias de Adobe Analytics: VisitorID, Visitor Namespace,…
Customize Page Code: Por último tendremos la pestaña Customize Page Code en donde se permite al usuario la inserción de código JavaScript que se cargará inmediatamente antes del final de la carga de todas y cada una de las páginas en las que se haya incluido la huella de Adobe Dynamic Tag Manager. En esta sección podrían incluirse eventos asíncronos personalizados mediante funciones de escucha que permanezcan a la espera de algún tipo de acción por parte del visitante. Por ejemplo de la realización de un clic sobre un determinado botón.

Como veis Adobe ha integrado a la perfección su herramienta de analítica con su nuevo gestor de etiquetas, lo cual nos permite realizar una configuración bastante avanzada a nivel de consola, es decir sin necesidad de pelearnos con código JavaScript. Si bien es cierto que para una integración avanzada, como sucede en todos los gestores de etiquetas, es aconsejable entrar a nivel de código.

Esperamos que este post os haya servido para conocer el nuevo gestor de etiquetas de Adobe y lanzaros a realizar vuestras primeras integraciones.

Si lo has utilizado déjanos conocer tu experiencia. Y si no lo has utilizado aún ¿a qué estas esperando? 🙂