Segmentación de páginas
En resumen
Con la ayuda de la segmentación de páginas, puedes determinar en qué páginas de tu sitio web se muestra un experimento. En la configuración del experimento, encontrarás varias opciones en «Page targeting» para controlar la reproducción según reglas. Una segmentación de páginas configurada correctamente es también un requisito previo para iniciar un experimento.
Opciones de segmentación de páginas
Con la ayuda de las reglas en Page Targeting, determinas en qué páginas o tipos de página los visitantes se convierten en participantes del experimento. Dispones de varios métodos para identificar páginas de forma unívoca. Un experimento solo se ejecuta si se cumplen las condiciones definidas.
También es posible enlazar varias reglas entre sí y usar condiciones AND y OR.
| Método | Cuándo tiene sentido |
|---|---|
| Reglas de URL | Si las páginas se pueden distinguir claramente por dominio, ruta o parámetros, o si solo se debe segmentar una URL específica. |
| Regex | Si se deben cubrir varias URL similares con un solo patrón. |
| Selector CSS | Si quieres segmentar varias páginas que no se pueden distinguir claramente mediante reglas de URL, pero comparten un elemento único. |
| JavaScript | Si necesitas condiciones complejas que van más allá de la URL y el DOM, p. ej., lógica, estados o entradas de DataLayer. |
Puedes usar reglas para definir las páginas o tipos de página en los que tus visitantes se convierten en participantes del experimento. Tienes varias opciones para identificar páginas.
El uso del CSS Selector es útil si quieres dirigirte a varias páginas, pero estas no se pueden identificar claramente mediante reglas de URL.
Puedes usar JavaScript para definir reglas de targeting más complejas. Por ejemplo, también tienes la opción de comprobar entradas especiales del DataLayer.
Coincidencia de URL
Con URL Match, usas reglas de URL para definir las páginas en las que se muestra tu experimento. Puedes combinar varias reglas de URL y definir cuáles deben aplicarse y cuáles deben excluirse.
Vincular varias reglas de URL
Puedes crear varias reglas de URL al mismo tiempo y vincularlas entre sí. Usa el símbolo más para añadir más reglas. Usa „coincide“ o „no coincide“ para especificar si el experimento debe reproducirse en las URLs especificadas o excluirse.
Si quieres mapear reglas más complejas, puedes combinar varias coincidencias de URL. Por ejemplo, puedes especificar que un experimento se muestre en https://www.demo.de, excepto en https://www.demo.de/impressum.
tipo de coincidencia
A la derecha del campo de entrada, puedes especificar el tipo de coincidencia de tu condición de segmentación. Según la selección, la URL en el campo de entrada junto a ella se comprueba con distintas condiciones. Tienes las siguientes condiciones para elegir:
- Coincidencia simple
- Coincidencia exacta
- Contiene
- Regex
Las condiciones de segmentación con ejemplos de aplicación se explican con más detalle a continuación.
Coincidencia simple
Con Simple Match, se seleccionan como objetivo todas las URLs introducidas, incluidos los parámetros de URL asociados.
En el siguiente ejemplo, puedes ver qué variantes de URL se consideran coincidencias para la URL www.demo.de en la segmentación de páginas «Simple Match»:
| URL | Se aplica la segmentación |
|---|---|
| www.demo.de | ✅ se aplica |
| www.demo.de#about | ✅ se aplica |
| www.demo.de?color=red | ✅ se aplica |
| www.demo.de/category | ❌ no se aplica |
| www.demo.com | ❌ no se aplica |
| subdomain.demo.de | ❌ no se aplica |
Si quieres segmentar varias páginas, tipos de página o subdominios al mismo tiempo, puedes usar regex para ello. Alternativamente, la segmentación también es posible mediante un selector CSS, por ejemplo si un elemento específico está presente en la página. Sigue leyendo.
Coincidencia exacta
Usa la condición „Exact Match“ si la segmentación de página solo debe aplicarse a una URL específica, es decir, sin parámetros de URL.
En el siguiente ejemplo, puedes ver qué variantes de URL se consideran coincidencias para la URL www.demo.de en la segmentación de página „Exact Match“:
| URL | La segmentación se aplica |
|---|---|
| www.demo.de | ✅ se aplica |
| www.demo.de#about | ❌ no se aplica |
| www.demo.de?color=red | ❌ no se aplica |
| www.demo.de/category | ❌ no se aplica |
| www.demo.com | ❌ no se aplica |
| subdomain.demo.de | ❌ no se aplica |
Contiene
Usas la condición de segmentación de página «Contiene» si quieres dirigirte a varias páginas de un grupo específico. El requisito previo es que las páginas puedan delimitarse mediante una estructura de URL coherente. Por ejemplo, si solo quieres testear páginas de producto, puedes usar «Contiene» con «/products/» para dirigirte exactamente a esas páginas. La expresión especificada debe aparecer al menos una vez completa en la URL.
Por supuesto, «Contiene» también se puede usar para dirigirse a todo el sitio web (como https://www.demo.com), por ejemplo, para un test A/A. Para ello, simplemente introduce el dominio de tu sitio.
En el siguiente ejemplo puedes ver diferentes variantes de URL donde se aplica la segmentación de página «/products/».
| URL | Se aplica la segmentación |
|---|---|
| www.demo.com | ❌ no se aplica |
| www.demo.com/products | ❌ no se aplica |
| www.demo.com/products/t-shirts | ✅ se aplica |
| www.demo.com/products/pants | ✅ se aplica |
| www.demo.com/blog/products-reviews | ❌ no se aplica |
| www.demo.com/blog/products/tests | ✅ se aplica |
Expresiones regulares (Regex)
Las expresiones regulares te permiten segmentar tus test A/B a páginas individuales específicas o grupos de páginas. En muchos casos, esto es más preciso que las condiciones de segmentación presentadas anteriormente.
Esta opción está dirigida principalmente a usuarios avanzados que ya tienen experiencia con regex o que quieren definir reglas muy precisas. Para facilitarte el comienzo, hemos creado esta guía sobre segmentación de páginas con regex. En muchos casos, es suficiente con copiar uno de nuestros ejemplos y simplemente reemplazar tu propia URL.
Para validar tus expresiones regulares puedes usar editores de regex como regexr.com.
Ejemplo de creación de una regex
En Plomo-o-Plata, en todas las páginas de detalle de producto de la categoría Outlet Sale los precios de venta se mostrarán en rojo. Las páginas de detalle de producto de otras categorías deben permanecer sin cambios.
Al usar regex en la segmentación por URL tienes la posibilidad de mapear explícitamente esta condición de segmentación.
Como ejemplo, aquí puedes ver una URL que se encuentra en la categoría Outlet Sale.
La estructura de las URL es la misma para todas las páginas de detalle de producto que se encuentran en esta categoría:
https://plomo-o-plata.de/collections/plomo-o-plata-outlet-sale/products/…
En la tabla Casos de uso útiles encontrarás expresiones regulares predefinidas que puedes aplicar a la estructura de URL de tu sitio web usando este ejemplo. En nuestro caso, se aplica el caso de uso 3.
-> Segmentación de todas las páginas que son www.demo.de/category/ después de la ruta.
-> ^.*www.demo.de/category/.+
Primero, vamos a https://regexr.com/ y trasladamos el caso de uso similar.
Ahora podemos usar este caso de uso como guía y aplicarlo a nuestro ejemplo de Plomo-o-Plata.
En la captura de pantalla puedes ver cómo personalizamos la regex para nuestro caso de uso. Dado que la URL de Plomo-o-Plata tenía dos directorios más que el caso de uso, se añadieron de forma análoga al ejemplo del caso de uso. Otra herramienta muy útil para definir regex es: https://www.autoregex.xyz/ Aquí puedes definir en inglés qué tipos de página deberían ser el objetivo. La herramienta convierte esta especificación en una regex.
Casos de uso útiles
| Caso de uso | Página de ejemplo | Expresión regular |
|---|---|---|
| Targeting de exactamente una página | www.demo.de/product-list | ^.*www\.demo\.de\/product-list$ |
| Targeting de exactamente una página incl. anchor links, parámetros y „/“ opcional | www.demo.de/?utm_source=google_cpc | ^.*www\.demo\.de(#.*|\/#.*|$|\/$|\/\?.*) |
| Targeting de todas las páginas colgadas en la ruta www.demo.de/category/ | www.demo.de/category/product | ^.*www\.demo\.de\/category\/.+ |
| Targeting global de una página sin „www.“ | demo.de/ | ^.*demo.de\/.* |
| Targeting global en todo el dominio www.demo.de/ | www.demo.de/ | ^.*www\.demo.de\/.* |
| Targeting en un subdominio blog.demo.de/ | blog.demo.de/category/article | ^.*blog\.demo.de\/. |
| Targeting en un dominio completo incl. subdominios demo.de/ | blog.demo.de/category/article www.demo.de/category/product | ^.*demo.de\/.* |
| Targeting en dos categorías de producto específicas | www.demo.de/shirts/product www.demo.de/pants/product | ^.*www\.demo.de\/(shirts|pants)\/.* |
Selector CSS
Solo apunta a páginas o tipos de página en los que esté presente un elemento específico con un selector CSS único. Esto es especialmente útil si las páginas no se pueden distinguir de forma fiable mediante reglas de URL. Ejemplo: quieres apuntar a todas las páginas de detalle de producto de tu tienda, pero la estructura de URL no contiene una referencia clara como „/products/“. En este caso, puedes usar un elemento que solo aparece en las páginas de detalle de producto, por ejemplo el botón „Add to cart“. A continuación, guardas el selector CSS de este elemento en Page Targeting.
La forma más fácil de encontrar un selector CSS adecuado es directamente en el editor visual de Varify: abre una página adecuada, haz clic en el elemento que solo aparece en este tipo de página y copia el selector CSS mostrado. Luego puedes insertarlo en Page Targeting bajo «CSS Selector».
JavaScript
Para un page targeting más complejo, puedes usar JavaScript. De esta manera, también puedes buscar cualquier etiqueta o atributo en el DOM de tu sitio web. JavaScript también te permite comprobar datos de variables del data layer.
Ejemplo de aplicación - Entrada de data layer
Para segmentar únicamente a usuarios que tienen un determinado parámetro o un determinado valor en el data layer, puedes navegar a través del data layer. En el siguiente ejemplo, solo se segmenta a los usuarios que previamente han visto un producto específico con ID 1111 o ID 2222.
Ejemplo de código - Data Layer Targeting
return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');
Configuración avanzada
Limpieza del experimento al cambiar la URL
Los sitios web que recargan contenido de forma dinámica, como las aplicaciones de una sola página (SPA) o las tiendas online que ofrecen varias variantes de producto en la página de detalle del producto, se comportan de forma diferente a las páginas estáticas tradicionales. Con las páginas estáticas, todo el contenido se recarga completamente cada vez que se cambia la URL. Con las SPA y sitios web dinámicos similares, en cambio, solo se actualiza el contenido que cambia.
Comportamiento con cambios de URL
Por defecto, Varify realiza un reinicio de la reproducción de variantes cada vez que se cambia la URL, es decir, todas las variaciones de la página se reinician, se vuelve a comprobar la URL y se vuelven a aplicar todas las variaciones aplicables para la nueva URL.
Desactivación de la función estándar
Desactivar la función "Cleanup Experiment on URL change" puede ser especialmente útil en páginas de producto de tiendas online donde se pueden seleccionar diferentes variantes de producto, como colores. Con dicha selección, la URL puede cambiar para reflejar el color seleccionado. Sin embargo, si hay una variación que se refiere a contenido que no cambia (por ejemplo, el botón "Add to cart"), no sería deseable eliminar y volver a aplicar esta variación. Esto podría provocar efectos indeseables como el parpadeo de la pantalla.
Reaplicar experimento al cambiar el DOM
Cuando el ajuste está activado, el DOM del sitio web se supervisa de forma permanente para garantizar que la optimización de la variante permanezca activa. Si la optimización es sobrescrita por scripts o elementos de página del sitio web, el sistema lo detecta y vuelve a aplicar la optimización. Esto puede ocurrir, por ejemplo, al filtrar por determinadas variantes de producto.
Si el ajuste está desactivado, la optimización solo se aplica una vez; no se realiza una supervisión continua.