¿Qué son las ubicaciones de contenido?
Ruta en la interfaz: Configuración → Ubicación de contenido (o desde dentro de una acción concreta).
Los placeholders son huecos con nombre en su sitio web donde aparece el contenido de Personyze: un banner en su cabecera, recomendaciones en una ficha de producto, un mensaje sobre la cuadrícula de una categoría, cualquier cosa intermedia. Usted crea un placeholder una vez y, a partir de ahí, cualquier campaña puede apuntar a él.
Esa es precisamente la idea: un placeholder es un anclaje con nombre en el que Personyze muestra el contenido dentro de la página, en lugar de flotar sobre ella como un popup o una superposición. Defina el hueco una vez y después haga pasar por él contenidos distintos para audiencias distintas sin volver a tocar su sitio.
¿Prefiere recorrerlo haciendo clic? Use el recorrido interactivo de más abajo y baje después a la referencia detallada.
Abra Ubicación de contenido
Vaya a Configuración → Ubicación de contenido. Cada placeholder aparece con su selector y con aquello a lo que está conectado. Haga clic en + Agregar nuevo placeholder.
Elija un método
Tres formas de indicar a Personyze adónde va el contenido: Buscar en las páginas (haga clic sobre su sitio), Conozco el selector (pegue el CSS) o Código para colocar en el HTML de la página (un div para su desarrollador). El resultado es el mismo; este recorrido sigue el selector visual.
Abra el selector
Elija Buscar en las páginas, introduzca la URL de una página de su sitio y haga clic en Abrir selector. Personyze carga esa página en el simulador QA con el panel del placeholder al lado.
Señale y haga clic en el elemento
En Seleccione el elemento del placeholder, haga clic en cualquier elemento de la página real para anclarse a él. La ubicación usa un selector CSS: use Seleccionar padres para subir en la jerarquía, o Volver a seleccionar para empezar de nuevo.
#cart-SS4443? Use Seleccionar padres para subir hasta un elemento más estable.
Descríbalo (y deje que la IA le ponga nombre)
Escriba para qué es el placeholder: «barra de envío gratuito mostrada a los visitantes que llegan por primera vez». Sugerir con IA propone un nombre claro, el elemento al que apuntar y la ubicación recomendada. Aplicar sugerencia lo rellena todo.
Colóquelo y pruebe el aspecto
Colocar el contenido personalizado fija la inserción respecto a su elemento: Dentro, Antes, Después o Reemplazar. Después, Probar el aspecto muestra algo en ese punto: previsualice una acción real de su cuenta, o coloque un tamaño de anuncio en blanco (336×280, 300×250, 728×90) para comprobar que encaja.
Úselo en una acción
Guarde el placeholder y, en el paso Ubicación, disparador y frecuencia del constructor, elija Elemento en línea → Haga clic para fijar el placeholder. Si otro elemento de contenido ya usa ese hueco, fije la prioridad: se muestra primero el número más bajo.
Abra Ubicación de contenido
Vaya a Configuración → Ubicación de contenido. Cada placeholder aparece con su selector y con aquello a lo que está conectado. Haga clic en + Agregar nuevo placeholder.
Elija un método
Tres formas de indicar a Personyze adónde va el contenido: Buscar en las páginas (haga clic sobre su sitio), Conozco el selector (pegue el CSS) o Código para colocar en el HTML de la página (un div para su desarrollador). El resultado es el mismo; este recorrido sigue el selector visual.
Abra el selector
Elija Buscar en las páginas, introduzca la URL de una página de su sitio y haga clic en Abrir selector. Personyze carga esa página en el simulador QA con el panel del placeholder al lado.
Señale y haga clic en el elemento
En Seleccione el elemento del placeholder, haga clic en cualquier elemento de la página real para anclarse a él. La ubicación usa un selector CSS: use Seleccionar padres para subir en la jerarquía, o Volver a seleccionar para empezar de nuevo.
#cart-SS4443? Use Seleccionar padres para subir hasta un elemento más estable.Descríbalo (y deje que la IA le ponga nombre)
Escriba para qué es el placeholder: «barra de envío gratuito mostrada a los visitantes que llegan por primera vez». Sugerir con IA propone un nombre claro, el elemento al que apuntar y la ubicación recomendada. Aplicar sugerencia lo rellena todo.
Colóquelo y pruebe el aspecto
Colocar el contenido personalizado fija la inserción respecto a su elemento: Dentro, Antes, Después o Reemplazar. Después, Probar el aspecto muestra algo en ese punto: previsualice una acción real de su cuenta, o coloque un tamaño de anuncio en blanco (336×280, 300×250, 728×90) para comprobar que encaja.
Úselo en una acción
Guarde el placeholder y, en el paso Ubicación, disparador y frecuencia del constructor, elija Elemento en línea → Haga clic para fijar el placeholder. Si otro elemento de contenido ya usa ese hueco, fije la prioridad: se muestra primero el número más bajo.
La lista de Ubicación de contenido
Todos los placeholders de la cuenta aparecen con el método y el selector que usan (por ejemplo CSS · banner.hero), aquello a lo que están conectados —cuántas acciones y audiencias dependen de ellos en este momento—, cuándo se crearon y un interruptor de Activo. Busque por nombre o filtre por Todas / Activas / Inactivo. El lápiz edita un placeholder; el menú … contiene el resto.
Haga clic en + Agregar nuevo placeholder para crear uno. Póngale un nombre que reconozca después: lo elegirá en un desplegable cuando construya campañas.
Elegir un método
Personyze necesita saber en qué punto de la página colocar su contenido. Hay tres formas de indicárselo, y el resultado es idéntico: elija la que mejor encaje con lo que sabe del marcado de la página y con si puede editarlo.
Buscar en las páginas
El selector visual, y la opción a la que recurrir cuando no conoce el marcado, o no quiere ponerse a buscarlo. Introduzca la URL de una página de su sitio y haga clic en Abrir selector: Personyze carga esa página en el simulador QA con un panel de placeholder acoplado al lado, de modo que elige el punto sobre la página real en lugar de adivinar un selector.
Señalar y hacer clic en el elemento
En Seleccione el elemento del placeholder, haga clic en cualquier elemento de la página para anclarse a él. Personyze deduce el selector CSS por usted; para el título de una página, por ejemplo, elegirá H1. Aquí importan dos controles:
- Seleccionar padres — sube por la jerarquía del DOM desde lo que ha pulsado. Es su vía de escape cuando cae en un elemento con un ID dinámico (véase el aviso más abajo).
- Volver a seleccionar — empieza la selección de nuevo.
Descríbalo, y deje que la IA le ponga nombre
Describir esta ubicación es donde dice, en lenguaje natural, para qué es el hueco: “barra de envío gratuito mostrada a los visitantes que llegan por primera vez”. Haga clic en Sugerir con IA y Personyze propone un nombre de placeholder claro, el elemento al que apuntar y una ubicación recomendada respecto a él. Aplicar sugerencia lo rellena.
Merece la pena hacerlo incluso cuando ya sabe la respuesta. La descripción queda asociada al placeholder, de modo que seis meses después su equipo puede saber qué función tenía realmente H3.main-title-heading .
Colóquelo y pruebe el aspecto
Colocar el contenido personalizado es la versión del selector de Colocar acciones: define dónde se inserta el contenido respecto al elemento seleccionado: Dentro (añadido en su interior, al final), Antes, Después o Reemplazar.
Probar el aspecto es la parte que no conviene saltarse. Muestra algo en ese punto para que vea cómo quedará realmente el contenido antes de comprometerse:
- Previsualizar una acción de su cuenta — elija una acción real y haga clic en Previsualizar en esta ubicación para ver el contenido auténtico en su sitio.
- O pruebe un tamaño de anuncio en blanco — coloque un bloque de relleno de 336×280, 300×250 o 728×90 para comprobar que el hueco admite esas medidas sin romper la maquetación.
Haga clic en Guardar placeholder cuando el punto tenga buen aspecto.
Conozco el selector
Pegue un selector CSS que ya identifique el elemento — .hero-banner, #product-grid, [data-slot='recommendations'].
Cuidado con los ID dinámicos. Muchos sitios generan selectores que contienen un ID que cambia según el visitante o el producto — #cart-SS4443. Un placeholder construido sobre uno de ellos funciona para usted y para nadie más, porque ese selector exacto no existe en la página de nadie más. Use en su lugar un elemento padre genérico (#cart o .cart-wrap) para que el placeholder sobreviva cuando cambien esos ID. En el selector visual, la opción seleccionar padres le lleva hasta un elemento más estable.
Encontrar un selector por su cuenta
Haga clic con el botón derecho sobre el elemento de su página y elija Inspeccionar para abrir las herramientas de desarrollo del navegador con ese elemento resaltado. Haga clic con el botón derecho sobre el elemento resaltado en el inspector y copie la ruta del selector. Si su navegador lo llama de otra forma, busque «cómo encontrar el selector HTML en [su navegador]». Recorte lo que obtenga hasta la forma estable más corta: las rutas largas generadas automáticamente se rompen en cuanto cambia la estructura de la página.
Código para colocar en el HTML de la página
Personyze genera un div de anclaje vacío — <div id="placeholder-5rf9"></div> — y usted (o su desarrollador) lo pega allí donde deba aparecer el contenido: dentro de una plantilla, un bloque del CMS, un componente de React, donde sea.
Es el más robusto de los tres, porque el anclaje es suyo y no depende de la estructura que ya tiene la página: no hay ningún selector que se rompa cuando se rediseña el sitio. La contrapartida es que requiere un cambio de código por su parte.
¿Dónde debe aparecer el contenido?
En los métodos basados en selector, Colocar acciones controla la posición respecto al elemento elegido:
- Dentro del elemento seleccionado — el contenido se añade en su interior (opción por defecto).
- Antes del elemento seleccionado — el contenido se inserta justo encima.
- Después del elemento seleccionado — el contenido se inserta justo debajo.
- Reemplazar el elemento seleccionado — el elemento original se sustituye por su contenido.
Gestionar varias campañas
Varias campañas pueden competir por el mismo placeholder. Tres ajustes deciden qué ocurre:
- Máximo de acciones a mostrar — cuántas acciones pueden mostrarse aquí a la vez. Si permite más de una, el contenido se ordena por prioridad de campaña: primero el número más bajo.
- Rotar contenido — va pasando por todos los contenidos en competencia de uno en uno, en lugar de ocultar los que sobran. Úselo cuando prefiera mostrarlo todo por turnos antes que descartar a los perdedores.
- Varios elementos pueden coincidir con el selector — muestra el contenido en todos los elementos que coinciden en lugar de solo en el primero. Es lo que quiere para un selector como
.product-cardque legítimamente coincide con muchos elementos; déjelo desactivado cuando el selector deba resolverse en un único punto.
Haga clic en Guardar nuevo contenedor cuando termine.
Elegir un placeholder desde dentro de una acción
No hace falta crear los placeholders por adelantado. Al construir una acción —en el Constructor de Popup, Banner y HTML, en el paso 3, Ubicación, disparador y frecuencia— usted elige En qué parte de la página va el contenido:
- Elemento en línea — se muestra dentro de una sección de su página. Nativo y nada intrusivo: se apila con el resto de su contenido. Esta es la opción que usa un placeholder: haga clic en Haga clic para fijar el placeholder para elegir uno.
- Popup flotante — se superpone a la página, con un fondo atenuado opcional. No necesita placeholder; en su lugar se fija una posición en pantalla.
El selector le permite asociar un placeholder existente o crear uno en el momento con + Nuevo. Cada placeholder indica cómo se está usando —por ejemplo, usado en 1 acciones, 0 activas—, para que sepa si está a punto de compartir un hueco antes de comprometerse.
Compartir un placeholder entre campañas
Un placeholder no pertenece a una sola campaña. Cualquier número de acciones puede apuntar al mismo hueco, que es precisamente lo que lo hace útil: el mismo punto de la página muestra un mensaje distinto a cada audiencia.
Cuando elige un placeholder que ya usa otro elemento de contenido, Personyze le avisa y le muestra la lista de todos los elementos de contenido que usan este placeholder. Si dos de ellos pueden dispararse a la vez, usted decide el orden con la prioridad: primero el número más bajo. Arrastre los elementos, o use las flechas de Posición, para subir o bajar en la cola la acción que está editando.
Dos cosas que conviene tener claras:
- La prioridad solo importa cuando los elementos compiten. Si las audiencias nunca se solapan, solo una acción puede coincidir con un visitante dado y el orden es irrelevante. Es el caso de coincidencia simultánea el que resuelve la prioridad.
- La prioridad ordena; no multiplica. Por defecto el placeholder muestra un solo elemento —la coincidencia de mayor prioridad— y el resto se descarta. Para mostrar varios a la vez cuando la maquetación lo permite, el propio placeholder tiene que admitir más de un elemento; ese es el ajuste Máximo de acciones a mostrar explicado más arriba (el panel lo llama mostrar varios elementos).
Para ver qué campañas compiten realmente por un hueco con tráfico real, la pestaña de QA de campañas enumera los solapamientos de placeholders y le muestra su prioridad frente a la de las demás antes del lanzamiento.
Usar una ubicación en una campaña
Una vez guardado, el placeholder está disponible para cualquier acción que se muestre visualmente — banners, recomendaciones, formularios. No aparecerá para las acciones de JavaScript ni de email, que no se muestran en la página de esta forma.
Como el hueco está desacoplado del contenido, puede apuntar varias campañas al mismo placeholder y mostrar a cada audiencia algo distinto en el mismo punto de la página.