> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎯 Announcement Bar — Opciones avanzadas de segmentación

> ℹ️ **Note:** Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

La pestaña **Placement** (ubicación) es donde controlas exactamente quién ve tu barra de anuncios, dónde aparece y cuándo se publica. En lugar de mostrar el mismo mensaje a cada visitante en cada página, puedes crear reglas de visibilidad precisas que se ajusten a los objetivos de tu campaña.

Ya sea que quieras saludar a clientes VIP recurrentes, promocionar una oferta solo a visitantes de Instagram o programar un banner navideño para que aparezca automáticamente, el sistema de segmentación te ofrece un control detallado sin tocar ningún código 🎯

---

# **⚠️ Antes de empezar**

Para configurar los ajustes de **Advanced Targeting** (segmentación avanzada):

→ Abre una barra de anuncios existente
→ O crea una nueva primero

Luego, haz clic en la pestaña **Placement** (ubicación) dentro del editor.

ℹ️ Algunas opciones de segmentación están ocultas según el tipo de ubicación que seleccionaste al crear la barra. Por ejemplo, **Page Targeting** (segmentación por página) no se muestra para las ubicaciones Cart o Checkout, y **Customer Targeting** (segmentación por cliente) no está disponible para la ubicación Checkout. A continuación se indica cuándo esperar cada una de estas secciones condicionales.

---

# **📐 Display Position (Posición de visualización)**

Este ajuste controla la ubicación física de la barra en la página.

## **Posiciones en la tienda (Storefront Positions)**

Disponible cuando la barra se crea para la ubicación **Storefront Page** (página de la tienda):

* **Top Push** — Empuja el resto del contenido de la página hacia abajo. La barra se sitúa en el flujo normal del documento.
* **Top Push (Sticky)** — Permanece fija en la parte superior de la ventana mientras el cliente se desplaza. El contenido de la página sigue siendo empujado hacia abajo.
* **Top Overlap** — Flota sobre la parte superior de la página sin empujar el contenido hacia abajo.
* **Top Overlap (Sticky)** — Flota en la parte superior y permanece visible al desplazarse.
* **Bottom Overlap (Sticky)** — Aparece en la parte inferior de la ventana y permanece ahí al desplazarse.
* **Manual** — Controlas exactamente dónde aparece la barra usando un fragmento de código o un bloque de aplicación.

## **Posiciones en el carrito (Cart Positions)**

Disponible cuando la barra se crea para la ubicación **Cart Page** (página del carrito) o **Cart Drawer** (cajón del carrito):

* **Top of Cart** — Inserta la barra en la parte superior del área del carrito.
* **Bottom of Cart** — Inserta la barra en la parte inferior del área del carrito.
* **Manual** — Colócala tú mismo usando un fragmento de código personalizado.

## **Posición en el checkout (Checkout Position)**

Disponible cuando la barra se crea para la ubicación **Checkout Page** (página de checkout) *(solo Shopify Plus)*:

* La barra se renderiza como un bloque personalizado dentro del flujo de checkout. La posición se gestiona a través de los ajustes de la extensión de UI de checkout.

### **Comportamiento de la ubicación Manual (Manual Placement Behavior)**

Cuando se selecciona **Manual**:

* El menú desplegable **Page Targeting** (segmentación por página) se desactiva automáticamente y se fuerza a **Custom** (personalizado).

Se proporciona un fragmento de código para que lo pegues en tu tema:
\<div class=\"futureblink-announcement-block\" id=\"{announcementId}\"\>\</div\>

* 
* La barra solo se renderizará donde se coloque este bloque.

---

# **🎯 Page Targeting (Segmentación por página)**

Page Targeting decide en qué páginas aparece la barra. Esta sección está **oculta** para las ubicaciones Cart y Checkout, ya que estas están diseñadas para una página específica.

## **Opciones disponibles**

* **Every page** — Se muestra en todas las páginas de tu tienda.
* **Home page only** — Se muestra solo en la página de inicio.
* **All product pages** — Se muestra en todas las páginas de detalle de producto.
* **Products in specific collections** — Se muestra solo en las páginas de producto que pertenecen a las colecciones seleccionadas.
  * Cuando se selecciona, aparece el botón **Select collections** (seleccionar colecciones) para que elijas qué colecciones aplican.
* **Specific products** — Se muestra solo en las páginas de producto seleccionadas manualmente.
  * Cuando se selecciona, aparece el botón **Select products** (seleccionar productos) para que elijas productos individuales.
* **All collection pages** — Se muestra en todas las páginas de listado de colecciones.
* **Specific collections** — Se muestra solo en las páginas de colección seleccionadas.
  * Cuando se selecciona, aparece el botón **Select collections** (seleccionar colecciones).

### **Cómo funciona en la tienda**

La barra verifica el tipo de página actual y la ruta de la URL antes de renderizarse:

* Para **Specific products**, la barra coincide con el ID del producto.
* Para **Products in specific collections**, la barra comprueba si el producto actual pertenece a alguna de las colecciones seleccionadas.
* Para **Specific collections**, la barra coincide con el handle de la colección en la URL.

---

# **⏰ Scheduling (Programación)**

Scheduling te permite controlar **cuándo** se publica la barra y cuándo se detiene automáticamente. Si no se configura, la barra aparece inmediatamente después de publicarla y permanece activa hasta que la desactives manualmente.

## **Hora de inicio (Start Time)**

* **Right now** — La barra aparece inmediatamente después de publicarla.
* **Specific date** — La barra permanece oculta hasta la fecha y hora elegidas.
  * Cuando se selecciona, aparece un **Date Picker** (selector de fecha) junto con campos de hora, minuto y AM/PM.

## **Hora de finalización (End Time)**

* **Never** — La barra permanece activa indefinidamente.
* **Specific date** — La barra deja de mostrarse automáticamente después de la fecha y hora elegidas.
  * Cuando se selecciona, aparece un **Date Picker** (selector de fecha) junto con campos de hora, minuto y AM/PM.

### **Comportamiento importante de la programación**

* Si configuras una hora de inicio y otra de finalización, la finalización debe ser posterior a la de inicio.
* Si publicas un anuncio cuya fecha de finalización ya ha pasado, la programación se **borra automáticamente** y la barra se publica inmediatamente.
* En la tienda, una barra programada se crea en el DOM pero se oculta con `display: none` hasta que se alcance la hora de inicio. Cuando pasa la hora de finalización, se oculta automáticamente de nuevo.

💡 *La programación es ideal para ventas flash, campañas navideñas o anuncios por tiempo limitado que quieras configurar con antelación.*

---

# **👥 Customer Targeting (Segmentación por cliente)**

Customer Targeting te permite mostrar u ocultar la barra según quién esté viendo tu tienda. Esta sección está **oculta** para las ubicaciones Checkout.

## **Visibilidad según el estado de inicio de sesión (Visibility by Login Status)**

* **All customers** — Se muestra a todos, ya sea que hayan iniciado sesión o no.
* **Logged in customers only** — Oculta la barra a los invitados.

## **Show Bar To (Mostrar barra a)**

Controla qué segmento de clientes debe ver la barra:

* **All Customers** — Sin restricciones.
* **Specific tag** — Solo los clientes con una etiqueta específica pueden ver la barra.
  * Cuando se selecciona, aparece un campo de texto: **Enter tags** (ingresar etiquetas, separadas por comas).
  * Ejemplo: `VIP, wholesale, returning`
* **Specific lifetime spent** — Solo los clientes que hayan gastado una cierta cantidad en todos sus pedidos pueden ver la barra.
  * Cuando se selecciona, aparece un campo numérico para el gasto mínimo de por vida.
  * La barra comprueba el valor `total_spent` del cliente en Shopify.

## **Hide Bar From (Ocultar barra a)**

Controla qué segmento de clientes **no** debe ver la barra. Las reglas de ocultación se evalúan antes que las de visualización.

* **No one** — No ocultarla a nadie.
* **Specific tag** — Ocultarla a los clientes con una etiqueta específica.
  * Cuando se selecciona, aparece un campo de texto para etiquetas separadas por comas.
* **Specific lifetime spent** — Ocultarla a los clientes que hayan gastado al menos una cierta cantidad.
  * Cuando se selecciona, aparece un campo numérico para el gasto mínimo de por vida.

### **Cómo funciona Customer Targeting**

En la tienda, la aplicación comprueba los datos del cliente actual (inyectados a través de Liquid):

1. Si se selecciona **Logged in only** (solo conectados) y el visitante es un invitado → la barra se oculta.
2. Primero se comprueban las reglas de ocultación. Si el cliente coincide con alguna condición de ocultación → la barra se oculta.
3. A continuación se comprueban las reglas de visualización. Si el cliente coincide con alguna condición de visualización → la barra se muestra.
4. Si no coincide ninguna condición, la barra se oculta por seguridad.

⚠️ **Importante:** La segmentación por cliente requiere que el cliente haya iniciado sesión para que apliquen las reglas basadas en etiquetas o gasto. Los invitados no coincidirán con las condiciones de etiqueta o gasto.

---

# **🌍 Geolocation Targeting (Segmentación por geolocalización)**

Geolocation Targeting controla qué países o regiones pueden ver la barra.

* **All world** — Visible para todos los visitantes, independientemente de su ubicación.
* **Specific countries** — Solo los visitantes de los países seleccionados pueden ver la barra.
  * Cuando se selecciona, el botón **Select countries** (seleccionar países) se activa.
  * Al hacer clic, se abre un modal con una lista de 246 países en la que se puede buscar.
  * Selecciona los países que quieras incluir. Los países seleccionados aparecen como una lista resumida debajo del botón.

### **Cómo funciona la geolocalización**

La tienda detecta el país del visitante usando el endpoint `/browsing_context_suggestions.json` de Shopify. El resultado se almacena en caché en el `sessionStorage` del navegador bajo `country_code`, para que las cargas de página posteriores no repitan la solicitud.

💡 *Úsala para ejecutar campañas específicas por región; por ejemplo, una barra de “Envío gratis a EE. UU.” que solo vean los visitantes de Estados Unidos.*

---

# **🔗 UTM Source Targeting (Segmentación por fuente UTM)**

UTM Targeting te permite mostrar la barra solo a los visitantes que lleguen desde fuentes de tráfico específicas. Es útil cuando quieres alinear el mensaje con una campaña publicitaria o plataforma social en particular.

Esta sección está **oculta** para las ubicaciones Checkout.

## **Activar el filtrado UTM (Enable UTM Filtering)**

Marca la casilla **"ONLY show to visitors who match UTM Source"** (mostrar solo a visitantes que coincidan con la fuente UTM) para activar el filtrado.

⚠️ Cuando está activado, los visitantes que lleguen directamente (sin una fuente UTM) **no** verán la barra.

## **Casillas de plataformas disponibles (Available Platform Checkboxes)**

Cuando se activa, aparecen las siguientes casillas:

* **TikTok**
* **Facebook**
* **Instagram**
* **Google**
* **Pinterest**
* **Twitter**

ℹ️ *Facebook e Instagram están vinculados:* al seleccionar una se incluye automáticamente la otra en la comprobación.

## **Código UTM personalizado (Custom UTM Code)**

Si necesitas un filtrado más específico:

* Marca **Custom UTM_CODE** (código UTM personalizado) para revelar un campo de entrada de texto.
* Ingresa pares `key=value` separados por comas.
  * Ejemplo: `utm_medium=sales,utm_campaign=newsletter`
* La comprobación no distingue entre mayúsculas y minúsculas.

### **Cómo funciona UTM Targeting**

La tienda lee el parámetro `utm_source` de la URL actual:

* Si solo se usan las casillas de plataformas, la barra se muestra si el `utm_source` del visitante coincide con alguna plataforma seleccionada.
* Si también se proporciona un código UTM personalizado, la barra se muestra si **cualquiera** de las dos condiciones se cumple: la plataforma coincide **o** todos los pares clave-valor personalizados coinciden con la URL.

💡 *Crea una barra de “Bienvenidos, compradores de Instagram” que solo aparezca cuando `utm_source=instagram` esté presente en la URL.*

---

# **⏱️ Time-on-Site Targeting (Segmentación por tiempo en el sitio)**

Time-on-Site Targeting controla cuánto tiempo debe estar un visitante en la página antes de que aparezca la barra.

* **Always Show (Default)** — La barra aparece inmediatamente cuando se carga la página.
* **Show after a while** — Retrasa la aparición de la barra.
  * Cuando se selecciona, aparece un campo numérico **Delay (in seconds)** (retraso en segundos).
  * Acepta valores de 1 a 300 segundos (5 minutos).

### **Cómo funciona el retraso**

En la tienda, la barra se crea inmediatamente, pero comienza con `display: none`. Después del número de segundos configurado, se hace visible.

💡 *Un breve retraso (5–10 segundos) puede resultar menos intrusivo que una ventana emergente inmediata, especialmente para barras de anuncios en la parte inferior de la página.*

---

# **📱 Device Visibility (Visibilidad por dispositivo)**

Aunque la visibilidad por dispositivo se configura en la pestaña **Design** (diseño), impacta directamente en el comportamiento de segmentación y merece mencionarse aquí para completar la información.

* **Desktop and Mobile** — Visible en todos los dispositivos.
* **Only Desktop** — Oculta en pantallas de 768 px o menos.
* **Only Mobile** — Oculta en pantallas de más de 768 px.

Esto es útil cuando quieres barras diferentes (o mensajes diferentes) para compradores de escritorio y móviles.

---

# **⚠️ Notas importantes**

* La **posición Manual** desactiva Page Targeting porque controlas la ubicación a través de un fragmento de código.
* La **ubicación Checkout** oculta Customer Targeting y UTM Targeting porque Shopify Checkout no expone etiquetas de cliente o parámetros UTM a las extensiones de UI de la misma forma.
* La **ubicación Cart** oculta el menú desplegable de Page Targeting porque la barra está limitada al área del carrito por diseño.
* **Geolocation** utiliza el país de navegación detectado del visitante. Las VPN o servicios proxy pueden causar resultados inesperados.
* Las **etiquetas y el gasto del cliente** solo funcionan para clientes conectados. Los invitados se tratan como no coincidentes en las reglas de etiqueta o gasto.
* El **filtrado UTM** ocultará la barra al tráfico directo. Asegúrate de que esto sea intencional antes de activarlo.
* Varias condiciones de segmentación funcionan juntas con lógica **AND**. La barra debe superar **todas** las comprobaciones de segmentación activas para mostrarse.

---

# **💡 Ejemplos y casos de uso**

## **Ejemplo 1 — Envío gratis por región**

* **Geolocation:** Specific countries → Estados Unidos, Canadá
* **Page Targeting:** Every page
* **Position:** Top Push (Sticky)

Resultado: Solo los visitantes de EE. UU. y Canadá ven una barra de envío gratis persistente.

## **Ejemplo 2 — Recompensa para clientes VIP**

* **Customer Show:** Specific tag → `VIP`
* **Customer Hide:** No one
* **Page Targeting:** Home page only

Resultado: Solo los clientes conectados etiquetados como VIP ven la barra en la página de inicio.

## **Ejemplo 3 — Seguimiento de campaña en Instagram**

* **UTM Source:** Instagram + Facebook
* **Page Targeting:** All product pages
* **Position:** Bottom Overlap (Sticky)

Resultado: Los visitantes que lleguen desde anuncios de Instagram o Facebook ven una barra exclusiva en las páginas de producto con mensajes específicos de la campaña.

## **Ejemplo 4 — Venta flash programada**

* **Scheduling:** Start → viernes 9:00 a. m., End → viernes 11:59 p. m.
* **Page Targeting:** Every page
* **Position:** Top Push

Resultado: La barra aparece automáticamente el viernes a las 9:00 a. m. y desaparece a la medianoche, sin necesidad de desactivarla manualmente.

## **Ejemplo 5 — Barra inferior con retraso**

* **Time-on-Site:** Show after a while → 10 segundos
* **Position:** Bottom Overlap (Sticky)
* **Page Targeting:** All product pages

Resultado: Después de que un visitante haya navegado una página de producto durante 10 segundos, aparece una sutil barra inferior con una oferta relacionada.

---

# **🚀 Resultado final**

Una vez configurada correctamente, la configuración de **Advanced Targeting** (segmentación avanzada) te ayuda a mostrar el mensaje correcto a la persona correcta en el momento correcto.

Con una segmentación adecuada:

✅ Las barras aparecen solo en las páginas donde son relevantes
✅ Los clientes ven mensajes adaptados a su ubicación, fuente o segmento
✅ Las campañas sensibles al tiempo se ejecutan automáticamente sin intervención manual
✅ Los compradores invitados y los conectados reciben experiencias diferenciadas
✅ El tráfico de anuncios recibe mensajes coherentes desde el clic hasta la conversión
✅ Los comerciantes evitan mostrar la misma barra genérica a cada visitante

Usar estas opciones de segmentación de manera efectiva garantiza que cada barra de anuncios se sienta intencional, oportuna y relevante para las personas que la ven 🎯