Configurar etiquetas de UET con Shopify

Si has creado tu sitio web en Shopify, lee este artículo para aprender a configurar las etiquetas de UET.
Notas
  • Este artículo muestra cómo realizar una configuración básica de las etiquetas de UET con Shopify. Consulta Centro de ayuda de Shopify para obtener más información.
  • Microsoft Advertising no es responsable de los procesos o la documentación de Shopify ni de los cambios realizados en los procesos o la documentación de Shopify.
  • Al instalar la aplicación de Microsoft Advertising para Shopify, se crean automáticamente etiquetas de UET, que se agregan a cada página de tu sitio web. Ve a la página de Instalar una aplicación y sigue las indicaciones para obtener tu aplicación de Microsoft Advertising para la configuración de Shopify.

Si has creado y administrado tu sitio web con Shopify, puedes agregar y administrar allí mismo la etiqueta de UET.

Implementación de UET con Shopify

  1. En Microsoft Advertising, selecciona Herramientas > Etiqueta de UET y copia tu código de seguimiento de la etiqueta de UET de JavaScript.
  2. Inicia sesión en tu cuenta de Shopify.
    1. Selecciona Tienda en línea > Temas.
    2. En Tema actual, selecciona Acciones > Editar código. Editar el código en la sección de temas de Shopify
  3. Instala la etiqueta de UET.
    1. En Diseño, selecciona theme.liquid.
      Selecciona theme.liquid
    2. Desplázate hacia abajo en la página hasta que estés en la etiqueta <head>. Desplázate a la etiqueta head tag
    3. Pega la etiqueta de UET directamente arriba {{ content_for_header }}.
    4. Selecciona Guardar. Pegar la etiqueta de UET encima del contenido del encabezado
  4. Personaliza tu proceso de compra en línea.
    1. En la parte inferior del menú izquierdo, selecciona Configuración.
    2. Selecciona Finalización de compra. Selecciona Configuración > Finalización de compra
    3. Desplázate hasta el campo Scripts adicionales. Pega la etiqueta de UET en Scripts adicionales. Pega la etiqueta de UET en Scripts adicionales
    4. Selecciona Guardar.
  5. Si quieres notificar ingresos variables, agrega uno de los siguientes fragmentos de código debajo del código de seguimiento de UET que pegaste en el paso anterior:
    1. Usa este código si quieres excluir los impuestos y el envío:
      <script> window.uetq = window.uetq || []; window.uetq.push('event', '', { 'revenue_value': {{ subtotal_price | money_without_currency }}, 'currency': '{{ shop.currency }}' }); </script>
    2. Usa este código si quieres incluir los impuestos y el envío:
      <script> window.uetq = window.uetq || []; window.uetq.push('event', '', { 'revenue_value': {{ total_price | money_without_currency }}, 'currency': '{{ shop.currency }}' }); </script>
Nota

Para validar que la etiqueta de UET de Shopify está funcionando, descarga e instala Asistente de etiquetas de UET. Ve a tu sitio web de Shopify y comprueba que se recibe el evento de UET y que el Id. de etiqueta coincide con la etiqueta que has seleccionado en el paso 1.

¿Cómo puedo modificar mi etiqueta de UET para el remarketing dinámico con Shopify?

  1. En Shopify, ve a Online Store > Customize (Tienda en línea > Personalizar).
  2. Selecciona los puntos suspensivos de las acciones del tema y selecciona Edit code (Editar código).
  3. En Templates (plantillas), busca index.liquid.
  4. Usa este código para General visitors (visitantes generales):
    <script> var productList = []; {% for product in collections.frontpage.products %} productList.push({{ product.id }}); {% endfor %} window.uetq = window.uetq || []; window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'home'}); </script>
  5. Selecciona Save (Guardar).
  6. En Templates (plantillas), busca search.liquid.
  7. Usa este código para Product searchers (Usuarios de búsquedas de productos):
    <script> var productList = []; {% for item in search.results %} {% if item.object_type == 'product' %} productList.push({{ item.id }}); {% endif %} {% endfor %} window.uetq = window.uetq || []; window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'searchresults'}); </script>
  8. Selecciona Save (Guardar).
  9. En Templates (plantillas), busca search.liquid.
  10. Usa este código para Product viewers (Usuarios que ven tus productos):
    <script> window.uetq = window.uetq || []; window.uetq.push('event', '', {'ecomm_prodid': '{{product.id}}', 'ecomm_pagetype': 'product'}); </script>
  11. Selecciona Save (Guardar).
  12. En Templates (plantillas), busca cart.liquid.
  13. Usa este código para Shopping cart abandoners (Clientes que han abandonado el carro de compra):
    <script> var productList = []; {% for line in cart.items %} productList.push({{ line.product_id}}); {% endfor %} window.uetq = window.uetq || []; window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'cart'}); </script>
  14. Selecciona Save (Guardar).
  15. Ve a Settings (Configuración) y selecciona Checkout (Finalización de la compra).
  16. En Order Processing (Procesamiento de pedidos), busca el cuadro de texto Additional scripts (Scripts adicionales).
  17. Usa este código para Past buyers (Antiguos clientes):
    <script> var productList = []; {% for line in checkout.line_items %} productList.push({{ line.product_id }}); {% endfor %} window.uetq = window.uetq || []; window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'purchase'}); </script>
  18. Selecciona Guardar.
Importante
  • El id. de producto en Shopify debe coincidir con un identificador de tu fuente de productos de .
  • Shopify creará automáticamente identificadores de producto para tus productos. Puedes configurar Shopify para que actualice tus soluciones de administración de fuentes con identificaciones de productos de Shopify que después pueden importarse en Microsoft Merchant Center.

See more videos...