Todo lo que debes saber sobre la configuración de UET

Los administradores de etiquetas reemplazan las etiquetas estáticas con etiquetas dinámicas que son más fáciles de implementar y actualizar. La etiqueta dinámica es un contenedor, un pequeño fragmento de código que te permite insertar dinámicamente etiquetas en tu sitio web. Puedes considerarlo como si la etiqueta del contenedor fuera un cubo que contiene otros tipos de etiquetas.

UET funciona con todos los sistemas de administración de etiquetas principales. Aquí tienes la lista actual (y vínculos de instrucciones) de administradores de etiquetas probados y admitidos:

• Google Tag Manager
• Qubit Opentag
• Tealium
• Ensighten
• Signal
• Adobe Dynamic Tag Manager
• Adobe Launch

UET está diseñado para funcionar con las principales plataformas de sitios web. Aquí tienes la lista actual (y vínculos de instrucciones) de plataformas probadas y admitidas que te permiten instalar las etiquetas de UET:

• BigCommerce
• Shopify
• WordPress.com
• Wix

Los sitios web de SPA son necesarios para poder usar el código de seguimiento de la etiqueta de UET. Los eventos de SPA se activan con la misma sintaxis que con los eventos personalizados, con una acción "page_view" y con un parámetro "page_path" obligatorio ("page_title" es opcional). El parámetro "page_path" debe comenzar con un "/". Ejemplo:

window.uetq = window.uetq || []; 
window.uetq.push('event', 'page_view', { 'page_path': '/spa_page' }); 

Aquí tienes tres formas diferentes de activar eventos de SPA. Ten en cuenta que recomendamos que uses la primera forma. Por cada opción, tenemos una página web de muestra que puedes visitar para ver el código adecuado en acción.

• Cambio de contenido: activa un evento de SPA cada vez que tu aplicación cargue contenido dinámico. En este caso, la URL real se envía automáticamente en un evento pageLoad estándar en la primera carga. Puedes usar esta URL en tus objetivos de destino, y cualquier evento personalizado activado en la primera página estará asociado a ella. Cada evento de SPA generará un evento pageLoad con una URL de SPA, que no es necesario que sea una ruta que se pueda cargar. También puedes hacer referencia a estas direcciones URL en tus objetivos. Cualquier evento personalizado activado tras un evento de SPA solo estará asociado al pageLoad de SPA (dicho de otro modo, no la URL original).
  • Visita nuestra página web de muestra “Cambio de contenido” para ver este código en acción.
• Todas las páginas: activa un evento de SPA en todas las páginas, incluida la carga inicial. Este escenario es el mismo que el anterior, excepto que no se usa el evento pageLoad automático. Como sigue activando, es importante ordenar los eventos para que el evento de SPA se active antes que cualquier otro evento personalizado. Si se activan de forma desordenada, algunos de ellos o todos ellos podrían asociarse al evento pageLoad automático (y la URL original), en vez del evento pageLoad de SPA (y la URL de SPA, incluido page_path).
  • Visita nuestra página web de muestra “Todas las páginas” para ver este código en acción.
• Todas las páginas, deshabilitación automática: activa un evento de SPA en todas las páginas y deshabilita también la carga de página automática. Esto se consigue agregando “disableAutoPageView: true” a los parámetros de inicialización (Nota: No modifiques el código del fragmento de código directamente para deshabilitarlo). Es lo mismo que en el escenario anterior, pero elimina el requisito de que el evento de SPA debe activarse primero en la carga de página inicial. Sin embargo, los eventos de SPA posteriores aún deben activarse antes de cualquier evento personalizado asociado a ellos (o se atribuirán al evento de SPA anterior).
  • Visita nuestra página web de muestra "Todas las páginas, deshabilitación automática" para ver este código en acción.

Cuando hayas creado un objetivo de conversión de evento personalizado o una lista de remarketing mediante eventos personalizados (consulta Cómo llevar el seguimiento de eventos personalizados con UET), deberás agregar el JavaScript de evento personalizado a tu código de seguimiento de la etiqueta de UET. Supongamos que el evento personalizado del que quieres llevar el seguimiento en tu página web es gente que selecciona el botón "Descargar ahora" en una de las páginas web.

Para ver un ejemplo del código de seguimiento de la etiqueta de UET de un evento personalizado instalado en el cuerpo de una página web, visita esta página web (solo en inglés), haz clic con el botón derecho en la página web y después selecciona Ver código fuente o Ver código fuente de la página, según cuál sea tu explorador. En esta página, también verás algunos botones. Al seleccionar cada botón, se activará un evento personalizado. Si usas una herramienta de supervisión de terceros como Fiddler, podrás ver la solicitud HTTP generada para bat.bing.com para notificar cada evento personalizado.

Para ver un ejemplo de eventos de comercio electrónico personalizados, consulta Ejemplo de eventos personalizados para clientes de comercio electrónico.

Cuando hayas creado un objetivo de conversión de ingresos variables (consulta Cómo generar informes de ingresos variables con UET), deberás editar el código de seguimiento de UET para admitirlo.

Veamos cómo pasar los ingresos variables de un objetivo de tipo de dirección URL de destino en las páginas PHP. En el ejemplo siguiente, se lee un valor dinámico de los ingresos variables desde una función de JavaScript. Será muy fácil enviar un valor estático o leer desde una variable de JavaScript o un elemento HTML.

Para agregar el código a las páginas PHP con tu editor de páginas web, consulta la siguiente muestra de código de seguimiento de la etiqueta de UET:

                      <script>

   (function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[] ,f=function(){var o={ti:"TAG_ID_HERE"}; o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")} ,n=d.createElement(t),n.src=r,n.async=1,n.onload=n .onreadystatechange=function() {var s=this.readyState;s &&s!=="loaded"&& s!=="complete"||(f(),n.onload=n. onreadystatechange=null)},i= d.getElementsByTagName(t)[0],i. parentNode.insertBefore(n,i)})(window,document,"script"," //bat.bing.com/bat.js","uetq");
</script>

<script>
   function GetRevenueValue()
	  {
		 return 6;
	  }
</script>
<script>

   window.uetq = window.uetq || [];
   window.uetq.push('event', '', {'revenue_value': GetRevenueValue(), 'currency': 'Replace_with_Currency_Code'});
</script>

Avanzado: muestras de código para objetivos de conversiones de eventos

Ahora que ya sabes qué código se debe anexar al final del código de seguimiento de la etiqueta de UET para los objetivos de conversiones de dirección URL de destino, sería conveniente que probaras algunos de estos:

Objetivo de conversión de eventos

Hay un código diferente que debes anexar para generar informes de los ingresos variables de un objetivo de conversión de evento. Si usas la misma función de JavaScript que en el paso 2, tendría este aspecto:

                            <script>
   window.uetq = window.uetq || [];
   window.uetq.push('event', 'Event action', {'event_category': 'Replace_with_Event_Category', 'event_label': 'Replace_with_Event_Label', 'event_value': 'Replace_with_Event_Value', 'revenue_value': GetRevenueValue(), 'currency': 'Replace_with_Currency_Code'});  
</script>

Nota: para ver la lista completa de códigos de monedas, consulta Monedas de ingresos del objetivo de conversión.

Cuando hayas creado una lista de remarketing dinámico (consulta Listas de recomercialización dinámicas: recomercialización de productos), tendrás que agregar parámetros personalizados a tu código de seguimiento de la etiqueta de UET para que funcione.

Agrega el siguiente código JavaScript en cada página de tu sitio web:

                      
                        <script>
                      

                      
                         
                         
                         window.uetq = window.uetq || []; 
   window.uetq.push ('event', '', {'ecomm_prodid': 'Replace_with_Product_ID', 'ecomm_pagetype': 'Replace_with_Page_Type'});  
                      

                      
                        </script>
                    

En el JavaScript anterior, cambia los siguientes parámetros:

• Replace_with_Product_ID : Reemplázalo por uno de los siguientes identificadores de productos:
  • El id. de SKU que identifica exclusivamente un producto. En ocasiones se denomina UPC (código universal de producto).
  • Un identificador de grupo de artículos representa un conjunto de variantes del mismo producto (como el color o las opciones de tamaño).

  Importante

  El id. de producto en el código JavaScript debe coincidir con algún id. de tu Microsoft Merchant Centerr r fuente de productos.

• Replace_with_Page_Type : Reemplázalo por uno de los siguientes valores en la columna derecha de esta tabla, en función de la página en la que usarás este JavaScript:

  Lista de remarketing dinámico de la que estás llevando el seguimiento	Tipo de página obligatoria
  Visitantes generales	'ecomm_pagetype': 'home' 'ecomm_pagetype': 'category' 'ecomm_pagetype': 'other' Nota: cualquier usuario no incluido en el tipo de página de los resultados de búsqueda, producto, carro o compra se incluirán en el público de visitantes generales.
  Usuarios de búsquedas de productos	'ecomm_pagetype': 'searchresults'
  Usuarios que ven tus productos	'ecomm_pagetype': 'product'
  Clientes que han abandonado el carro de compra	'ecomm_pagetype': 'cart'
  Antiguos clientes	'ecomm_pagetype': 'purchase'

  Nota: los clientes que compran un producto se agregan a la lista de "antiguos clientes" y se quitan de otras listas (para ese producto en particular). Para que esto funcione, la etiqueta de UET en tu página de confirmación de compra debe enviar tanto el identificador del producto (ecomm_prodid) como el tipo de página (ecomm_pagetype).

Para ver un ejemplo del código de seguimiento de una etiqueta de UET de remarketing dinámico instalado en el texto de una página web, visita esta página web (solo en inglés), haz clic con el botón derecho en la página web y después selecciona Ver código fuente o Ver código fuente de la página, según cuál sea tu explorador. En esta página, también puedes definir un identificador de producto y un tipo de página, y después seleccionar un botón para activar un evento personalizado de esta lista de remarketing dinámico. Si usas una herramienta de supervisión de terceros como Fiddler, podrás ver la solicitud HTTP generada para bat.bing.com para notificar cada evento personalizado.

Tal como se indicó en las secciones anteriores, algunas características de Microsoft Advertising requieren que agregues y modifiques un fragmento de código de JavaScript en tu etiqueta de UET existente:

• Eventos personalizados: Para los objetivos de conversión o las listas de remarketing basadas en eventos personalizados, tendrás que modificar el siguiente fragmento de código para devolver la acción de evento, la categoría de evento, la etiqueta de evento y el valor de evento:

  <script>
     window.uetq = window.uetq || [];  
     window.uetq.push ('event', 'Replace_with_Event_Action', {'event_category': 'Replace_with_Event_Category', 'event_label': 'Replace_with_Event_Label', 'event_value': 'Replace_with_Event_Value'});  
  </script>

• Ingresos variables: Para los objetivos de conversiones que siguen ingresos variables, tendrás que modificar el siguiente fragmento de código para devolver el valor de ingresos y el código de moneda:

  <script>
     window.uetq = window.uetq || [];  
     window.uetq.push ('event', '', {'revenue_value': 'Replace_with_Revenue_Value', 'currency': 'Replace_with_Currency_Code'});  
  </script>

• Remarketing dinámico: Para segmentar una lista de remarketing dinámico, tendrás que modificar el siguiente fragmento de código para devolver el id. de producto y el tipo de página:

  <script>
     window.uetq = window.uetq || [];  
     window.uetq.push ('event', '', {'ecomm_prodid': 'Replace_with_Product_ID', 'ecomm_pagetype': 'Replace_with_Page_Type'});  
  </script>

Si vas a implementar más de una de estas características, deberás tener en cuenta un par de cosas:

• Recomendamos mantener el fragmento de código de JavaScript de cada característica por separado en el código de tu página web (dicho de otro modo, en secciones apartes) <script></script> ya que cada fragmento de código envía un evento.
• En concreto, no puedes usar un fragmento de código de JavaScript para llevar el seguimiento de las dos características siguientes en la misma página web:
  • Ingresos variables del objetivo de conversión de la URL de destino
  • Eventos personalizados basados en un objetivo de conversión o una lista de remarketing

  En este caso, deberás tener dos fragmentos de código aparte en el código de tu página web:

  • Fragmento de código 1 — para ingresos variables del objetivo de conversión de la URL de destino:

    <script>
       window.uetq = window.uetq || [];  
       window.uetq.push ('event', '', {'revenue_value': 'Replace_with_Revenue_Value', 'currency': 'Replace_with_Currency_Code'});  
    </script>

  • Fragmento de código 2 — para eventos personalizados basados en un objetivo de conversión o una lista de remarketing. Sin embargo, ten en cuenta que, si llevas el seguimiento de ingresos variables para un objetivo de conversión de eventos personalizados (no un objetivo de conversión de URL de destino), lo deberías incluir en el fragmento de código del evento personalizado:

    <script>
       window.uetq = window.uetq || [];  
       window.uetq.push ('event', 'Replace_with_Event_Action', {'event_category': 'Replace_with_Event_Category', 'event_label': 'Replace_with_Event_Label', 'event_value': 'Replace_with_Event_Value', 'revenue_value': 'Replace_with_Revenue_Value', 'currency': 'Replace_with_Currency_Code'});  
    </script>