Transmitir valores a etiquetas de Floodlight mediante Google Tag Manager

Cuando implemente etiquetas de Floodlight en Google Tag Manager, quizá le interese transferir ciertos valores de su sitio a esas etiquetas para registrar importantes parámetros de marketing con los que más adelante podrá crear audiencias o generar informes sobre determinadas métricas personalizadas.

dataLayer es un objeto de JavaScript de Google Tag Manager que proporciona una interfaz para transferir valores obligatorios a macros con las que luego puede rellenar etiquetas designadas. En este artículo se explica cómo usar dataLayer para comunicarse con Campaign Manager 360 específicamente y transferir valores obligatorios a sus etiquetas de Floodlight. Si quiere una explicación más detallada, visite la página de Google Developers sobre las implementaciones de Google Tag Manager para la Web.

Normalmente, en las etiquetas de Floodlight acabadas de crear se incluyen marcadores de posición que los desarrolladores web sustituyen por los valores necesarios cuando se llama a esas etiquetas. Supongamos que tenemos este fragmento:

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
...

Los elementos en negrita (item, quantity, price, postage y seller) tendrían que sustituirse por los valores reales que quiera transferir a la etiqueta de Floodlight. Por lo general, podrá reemplazarlos mediante su sistema de gestión de contenido o hacer que su equipo de desarrollo los introduzca en el fragmento de código.

Para configurar Google Tag Manager de modo que inserte valores mediante variables cuando se llame a las etiquetas, siga los pasos que se incluyen más abajo. En esos pasos se presupone que su cuenta de Campaign Manager 360 ya está vinculada con su cuenta de Google Tag Manager, y que puede enviar etiquetas a Google Tag Manager y aprobarlas. Una vez que haya hecho los cambios en Google Tag Manager, puede seguir sus procesos de prueba y publicación habituales.

Configuración

1. En Google Tag Manager, cree macros para cada valor que necesite transferir.

   1. Asigne un nombre descriptivo a la macro. Por ejemplo, si captura el nombre del producto que ha pedido, puede llamar a la macro "nombre_producto".

   2. Elija Variable de capa de datos como el tipo de macro.

   3. Indique el nombre de la variable, ya que se declarará en la llamada dataLayer.

   4. Seleccione Versión 2 como número de versión.

2. En Campaign Manager 360, cree una etiqueta de Floodlight y habilite las variables estándar u.

3. Envíe la etiqueta de Floodlight a Google Tag Manager y apruébela.

4. Edite la etiqueta en Google Tag Manager y asigne las macros adecuadas a las diferentes variables u. Por ejemplo, si quiere registrar el nombre de productos en la variable u "u1", debería hacer lo siguiente:

   1. Diríjase a la sección Variables personalizadas.

   2. Haga clic en el menú desplegable y seleccione “u1”.

   3. Haga clic en el icono de la macro situado junto al cuadro de texto y seleccione la macro “{{nombre_producto}}” como se creó en el paso 1 (recuerde que las llaves “{{}}” se utilizan para indicar que se trata de una macro y no el texto específico “nombre_producto”).

   4. Repita el proceso para todas las demás variables u y macros que desee captar.

Implementación

Hay muchas formas distintas de implementar dataLayer que dependen de cuál de las siguientes situaciones coincide más con la suya.

Método 1: Ya tiene una página de confirmación que contiene todos los valores necesarios

Algunos sitios web usan un sistema de gestión de contenido (CMS) u otro método similar para crear páginas a medida que se solicitan. El CMS puede transferir valores que estuvieran establecidos en una página anterior o que vienen de bases de datos del servidor.

En estos casos, puede hacer lo siguiente:

1. Cree una regla que active la etiqueta de Floodlight cuando la URL sea la de su página de confirmación.

2. Inserte en su sitio web, antes de la etiqueta de Google Tag Manager, una definición de dataLayer similar a la que se incluye a continuación. Sustituya todos los elementos que están entre corchetes por los valores que quiere transferir (se supone que el nombre de todas sus macros termina en _value):

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   Ejemplo de etiqueta rellenada:

   <script>
    var dataLayer = [{“item_value”:”great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

Cuando Google Tag Manager active las etiquetas de Floodlight, las macros especificadas se sustituirán por los valores que haya indicado en la definición de dataLayer.

Método 2: Sus páginas de compra y de confirmación tienen la misma URL, o bien la página utiliza AJAX (método JavaScript)

1. Cree una regla para activar la etiqueta después de un evento. Por ejemplo, puede crear un evento denominado "purchase_complete" (compra finalizada).

   Nombre de la regla: fire_floodlight_tag
   Condiciones: {{event}} es igual a purchase_complete
   Etiquetas con esta regla: ninguna

2. Utilice JavaScript para activar el evento y transferir toda la información necesaria a la etiqueta de Floodlight:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   Ejemplo de llamada de JavaScript rellenada:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:”great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   Tenga en cuenta que, con el valor de evento añadido (que se muestra en negrita arriba), se identifica el evento que utiliza Google Tag Manager para activar la etiqueta de Floodlight.

Método 3: Sus páginas de compra y de confirmación tienen la misma URL, o bien la página utiliza AJAX (método de seguimiento automático de eventos).

El seguimiento automático de eventos utiliza procesadores de eventos, que son un tipo de etiqueta especial que se coloca en la página, espera a que los eventos del usuario se produzcan y crea un evento programático que puede utilizarse para activar otras etiquetas. Los eventos de usuario pueden incluir acciones como el clic de un botón o un enlace, el envío de un formulario o un temporizador que alcanza un intervalo definido.

El siguiente ejemplo describe cómo usar un detector de clics en enlaces para activar una etiqueta. En este ejemplo, el evento ocurre cuando el usuario selecciona un producto haciendo clic en una lista o seleccionándolo de un menú desplegable. A continuación, se redirecciona al usuario a una página para descargar un folleto en PDF. Esta página contiene un enlace al folleto; la acción de hacer clic en ese enlace es lo que deseamos registrar en el seguimiento como una conversión.

Vaya a su cuenta de Google Tag Manager y haga lo siguiente:

1. Configure un detector de clics en enlaces.

   1. Elija Nueva etiqueta.

   2. Introduzca un nombre descriptivo como “descargaDetectorEnlaces” (este podría ser el nombre que se utilizara en el enlace de descarga del folleto en PDF).

   3. En el menú desplegable "Tipo de etiqueta", coloque el ratón sobre la sección "Procesador de eventos" y, en el menú desplegable que aparece a la derecha, seleccione Procesador de clics en enlaces.

   4. Si el enlace debería redirigir a los visitantes a una página distinta, asegúrese de que la opción Esperar etiquetas está activada. No modifique el campo "Tiempo de espera máximo" a menos que tenga un motivo específico para hacerlo, por ejemplo, que active un amplio número de etiquetas y desee asegurarse de que todas se hayan ejecutado.

2. Configure una macro para captar la URL cuando se haga clic en el enlace.

   1. Elija Nueva macro.

   2. Introduzca un nombre descriptivo, por ejemplo, “URLenlace”.

   3. En el menú "Tipo de macro", elija Variable de evento automático.

   4. En el menú desplegable "Tipo de variable", elija URL de elemento. Tenga en cuenta que, a diferencia de los enlaces de JavaScript, esta opción solo funcionará con enlaces que utilicen el formato estándar HREF.

3. Configure una macro que registre los productos que seleccionan los usuarios. En el caso de este ejemplo, asumiremos que los nombres de productos aparecen en una lista desplegable y que la etiqueta de ID HTML de la lista es "nombreProducto". Si necesita ayuda para encontrar este ID, póngase en contacto con el equipo de desarrolladores web.

   1. Elija Nueva macro.

   2. Introduzca un nombre descriptivo, como “productoSeleccionado”.

   3. Elija Elemento Dom en el menú desplegable "Tipo de macro".

   4. En el campo "ID de elemento", introduzca el ID del campo. En este caso, el ID es "nombreProducto" (sin las comillas).

   5. Introduzca value (valor) en el campo "Nombre del atributo", ya que recuperaremos el contenido del atributo de valor cuando se seleccione el menú desplegable.

4. Configure una regla para activar la etiqueta del detector de eventos.

   1. Elija Nueva regla.

   2. Introduzca un nombre descriptivo, como “DescargaEnlaceClic”.

   3. En "Condiciones", elija {{event}} (evento) en el primer menú desplegable, es igual a en el segundo y, en el cuadro de texto, introduzca gtm.linkClick.

   4. Haga clic en el signo más (+).

   5. En el primer menú desplegable de la nueva línea, elija la macro {{linkURL}} (URL de enlace) que creó en el paso 2, seleccione es igual a en el segundo menú y, en el cuadro de texto, introduzca la URL del PDF que se va a descargar (por ejemplo, http://www.sitio.com/pdfs/folleto1.pdf).

5. Configure una etiqueta de Floodlight para registrar conversiones. Si ya la ha creado o si la ha compartido desde Campaign Manager 360, vaya directamente al paso E.

   1. Elija Nueva etiqueta.

   2. Introduzca un nombre descriptivo, como “etiquetaDescargaFolleto”.

   3. Seleccione el tipo de etiqueta adecuado según sus necesidades, como "Contador de Floodlight".

   4. Defina los valores identificativos de la etiqueta en los campos “ID del anunciante”, “Etiqueta de grupo” y “Cadena de etiqueta de actividad” y configure los demás valores de etiqueta estándares según se precise.

   5. En el menú desplegable situado en Variables personalizadas, escoja u1 o cualquier variable personalizada que quiera utilizar para hacer el seguimiento.

   6. Haga clic en el botón Macro, situado al lado del cuadro de texto, y elija la macro {{selectedProduct}} (producto seleccionado) que creó en el paso 3.

6. Hagas las pruebas necesarias y publique la etiqueta si quiere.