Orientación de la página
Índice
Corto y dulce
Con la ayuda de la orientación a páginas, puede determinar en qué páginas de su sitio web se muestra un experimento. En la configuración del experimento, encontrará varias opciones en „Segmentación de páginas“ para controlar la visualización basada en reglas. Para iniciar un experimento también es necesario que la orientación a páginas esté correctamente configurada.
Opciones de segmentación de páginas
Con la ayuda de las reglas de Segmentación de páginas, usted determina en qué páginas o tipos de páginas los visitantes se convierten en participantes del experimento. Dispone de varios métodos para identificar páginas de forma exclusiva. Un experimento sólo se lleva a cabo si se cumplen las condiciones definidas.
También es posible enlazar varias reglas y utilizar las condiciones AND y OR.
| Método | Cuando tiene sentido |
|---|---|
| Normas URL | Si las páginas pueden distinguirse claramente por el dominio, la ruta o los parámetros, o si sólo hay que dirigirse a una URL específica. |
| Regex | Si hay que cubrir varias URL similares con un patrón. |
| Selector CSS | Si desea dirigirse a varias páginas que no pueden distinguirse claramente mediante reglas de URL, pero que comparten un elemento único. |
| JavaScript | Si necesita condiciones complejas que van más allá de la URL y el DOM, por ejemplo, lógica, estados o entradas DataLayer. |
Puede utilizar reglas para definir las páginas o tipos de páginas en las que sus visitantes se convierten en participantes del experimento. Dispone de varias opciones para identificar las páginas.
El uso del selector CSS es útil si desea seleccionar varias páginas, pero éstas no pueden identificarse claramente mediante reglas URL.
Puede utilizar JavaScript para definir reglas de selección más complejas. Por ejemplo, también tiene la opción de comprobar entradas especiales de DataLayer.
Coincidencia de URL
Con URL Match, puede utilizar reglas de URL para definir las páginas en las que se mostrará su experimento. Puede combinar varias reglas de URL y definir cuáles deben aplicarse y cuáles deben excluirse.
Vinculación de varias reglas URL
Puede crear varias reglas URL al mismo tiempo y enlazarlas entre sí. Utilice el símbolo más para añadir más reglas. Utilice „coincide“ o „no coincide“ para especificar si el experimento debe reproducirse en las URL especificadas o excluirse.
Si desea asignar reglas más complejas, puede combinar varias coincidencias de URL. Por ejemplo, puede especificar que un experimento se muestre en https://www.demo.de, excepto en https://www.demo.de/impressum.
Tipo de correspondencia
A la derecha del campo de entrada, puede especificar el tipo de coincidencia de su condición de selección. En función de la selección, la URL del campo de entrada situado junto a ella se comprueba en función de varias condiciones. Puede elegir entre las siguientes condiciones:
- Partido simple
- Coincidencia exacta
- Contiene
- Regex
A continuación se explican con más detalle las condiciones de selección con ejemplos de aplicación.
Partido simple
Con Simple Match, se seleccionan todas las URL introducidas, incluidos los parámetros de URL asociados.
En el siguiente ejemplo, puede ver qué variantes de URL se consideran aciertos para la URL www.demo.de en la orientación a páginas de „Coincidencia simple“:
| URL | Se aplica la focalizació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 |
| subdominio.demo.de | ❌ no se aplica |
| URL | Se aplica la focalización |
|---|---|
|
www.demo.de |
aplica |
|
www.demo.de#about |
aplica |
|
www.demo.de?color=red |
aplica |
|
www.demo.de/category |
No aplicable |
|
www.demo.com |
No aplicable |
|
sub.demo.de |
No aplicable |
Si desea seleccionar varias páginas, tipos de páginas o subdominios al mismo tiempo, puede utilizar expresiones regulares. Alternativamente, también es posible mediante un selector CSS, por ejemplo, si un elemento específico está presente en la página. Siga leyendo.
Coincidencia exacta
Utilice la condición „Coincidencia exacta“ si la página de destino sólo debe aplicarse a una URL específica, es decir, sin parámetros de URL.
En el siguiente ejemplo, puede ver qué variantes de URL se consideran aciertos para la URL www.demo.de en la orientación a páginas de „concordancia exacta“:
| URL | Se aplica la focalización |
|---|---|
| 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 |
| subdominio.demo.de | ❌ no se aplica |
| URL | Se aplica la focalización |
|---|---|
|
www.demo.de |
aplica |
|
www.demo.de/ |
No aplicable |
|
www.demo.de#about |
No aplicable |
|
www.demo.de?color=red |
No aplicable |
|
www.demo.de/category |
No aplicable |
|
www.demo.com |
No aplicable |
|
sub.demo.de |
No aplicable |
Contiene
Utilice la condición de selección de páginas „Contiene“ si desea seleccionar varias páginas de un grupo específico. El requisito previo es que las páginas puedan delimitarse utilizando una estructura de URL coherente. Por ejemplo, si sólo desea probar páginas de productos, puede utilizar „Contiene“ con „/productos/“ para capturar exactamente estas páginas. La expresión especificada debe aparecer al menos una vez completa en la URL.
En el siguiente ejemplo, puede ver diferentes variantes de URL en las que se aplica la orientación de página „/productos/“.
| URL | Se aplica la focalizació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 |
| URL | Se aplica la focalización |
|---|---|
|
www.demo.de |
No aplicable |
|
www.demo.de/produkte |
No aplicable |
|
www.demo.de/produkte/t-shirts |
aplica |
|
www.demo.de/produkte/hosen |
aplica |
|
www.demo.de/blog/produkte-reviews |
No aplicable |
|
www.demo.de/blog/produkte/tests |
aplica |
Expresiones regulares (Regex)
Las expresiones regulares le permiten dirigir sus pruebas A/B a páginas individuales o grupos de páginas específicos. 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 desean asignar reglas muy precisas. Para facilitarle los primeros pasos, hemos creado esta guía de orientación de páginas con regex. En muchos casos, basta con copiar uno de nuestros ejemplos y sustituir simplemente su propia URL.
Para validar sus expresiones regulares, puede utilizar editores de expresiones regulares como regexr.com.
Ejemplo de creación de una expresión regular
En Plomo-o-Plata, todas las páginas de detalles de productos de la categoría Venta outlet los precios de venta aparecen en rojo. Las páginas de detalles de productos de otras categorías no deben sufrir cambios.
Al utilizar expresiones regulares en la orientación por URL, tiene la opción de asignar explícitamente esta condición de orientación.
Aquí puede ver un ejemplo de URL que se encuentra en la categoría de venta outlet.
La estructura de las URL es la misma para todas las páginas de detalles de productos que se pueden encontrar en esta categoría:
https://plomo-o-plata.de/collections/plomo-o-plata-outlet-sale/products/…
En la tabla Aplicaciones útiles encontrará expresiones regulares predefinidas que puede transferir a la estructura de URL de su sitio web utilizando este ejemplo. En nuestro caso, se aplica el caso de uso 3.
-> Orientación de todas las páginas que siguen la ruta www.demo.de/category/.
-> ^.*www\.demo\.de\/category\/.+
En primer lugar, vamos a https://regexr.com/ y transferimos el caso de uso similar.
Ahora podemos orientarnos en este caso de uso y trasladarlo a nuestro ejemplo de Plomo-o-Plata.
Aplicaciones útiles
| Caso práctico | Página de ejemplo | Expresión regular |
|---|---|---|
| Dirigirse exactamente a una página | www.demo.de/product-list | ^.*www\.demo.de/product-list$ |
| Dirigido exactamente a una página incl. enlaces de anclaje, parámetros y „/“ opcional“ | www.demo.de/?utm_source=google_cpc | ^.*www\.demo\.de(#.*|\/#.*|$|\/$|\/\?.*) |
| Orientación de todas las páginas colgadas en la ruta www.demo.de/category/ | www.demo.de/category/product | ^.*www\.demo\.de\/category\/.+ |
| Orientación global de una página sin „www“.“ | demo.de/ | ^.*demo.de\/.* |
| Segmentación global en todo el dominio www.demo.de/ | www.demo.de/ | ^.*www\.demo.de\/.* |
| Segmentación en un subdominio blog.demo.de/ | blog.demo.de/category/article | ^.*blog.demo.de\/.* |
| Focalización en todo un dominio, incluidos los subdominios demo.de/ |
blog.demo.de/category/article www.demo.de/category/product |
^.*demo.de\/.* |
| Centrarse en dos categorías específicas de productos |
www.demo.de/shirts/product www.demo.de/pants/product |
^.*www\.demo.de/(camisas|pantalones)\/.* |
| Caso práctico | Página de ejemplo | Expresión regular |
|---|---|---|
|
Dirigirse exactamente a una página |
www.demo.de/product-list |
^.*www\.demo.de/product-list$ |
|
Dirigido exactamente a una página incl. enlaces de anclaje, parámetros y "/" opcional |
www.demo.de/?utm_source=google_cpc |
^.*www\.demo\.de(#.*|\/#.*|$|\/$|\/\?.*) |
|
Orientación de todas las páginas colgadas en la ruta www.demo.de/category/ |
www.demo.de/category/product |
^.*www\.demo\.de\/category\/.+ |
|
Orientación global de una página sin "www". |
demo.de/ |
^.*demo.de\/.* |
|
Segmentación global en todo el dominio www.demo.de/ |
www.demo.de/ |
^.*www\.demo.de\/.* |
|
Segmentación en un subdominio blog.demo.de/ |
blog.demo.de/category/article
|
^.*blog.demo.de\/.* |
|
Focalización en todo un dominio, incluidos los subdominios demo.de/ |
blog.demo.de/category/article
www.demo.de/category/product |
^.*demo.de\/.* |
|
Centrarse en dos categorías específicas de productos |
www.demo.de/shirts/product
www.demo.de/pants/product |
^.*www\.demo.de/(camisas|pantalones)\/.* |
¿Necesitas ayuda para configurar tu regex? No se preocupe.
Simplemente escríbanos un mensaje con el grupo de páginas al que desea dirigirse. Le enviaremos la regex adecuada lo antes posible.
Selector CSS
Diríjase sólo a páginas o tipos de páginas en los que esté presente un elemento específico con un selector CSS único. Esto resulta especialmente útil si las páginas no pueden diferenciarse de forma fiable mediante reglas de URL. Ejemplo: desea dirigirse a todas las páginas de detalles de productos de su tienda, pero la estructura de URL no contiene una referencia clara como „/productos/“. En este caso, puede utilizar un elemento que sólo aparezca en las páginas de detalles de productos, por ejemplo el botón „Añadir a la cesta“. A continuación, almacene el selector CSS para este elemento en Orientación de página.
La forma más fácil de encontrar un selector CSS adecuado es directamente en el editor visual Varify: Abra una página adecuada, haga clic en el elemento que sólo aparece en este tipo de página y copie el selector CSS que se muestra. A continuación, puede insertarlo en Orientación de página en „Selector CSS“.
JavaScript
Puede utilizar JavaScript para una orientación más compleja de las páginas. De este modo, también puede buscar cualquier etiqueta o atributo en el DOM de su sitio web. JavaScript también le permite comprobar los datos de las variables de la capa de datos.
Ejemplo de aplicación - Introducción de la capa de datos
Para dirigirse sólo a los usuarios que tienen un parámetro específico o un valor específico en la capa de datos, puede desplazarse por la capa de datos. En el siguiente ejemplo, sólo se selecciona a los usuarios que han visto previamente un producto específico con ID 1111 o ID 2222.
Ejemplo de código: orientación de la capa de datos
return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');
Configuración avanzada
Experimento de limpieza por cambio de URL
Los sitios web que recargan dinámicamente el contenido -como las aplicaciones de página única (SPA) o las tiendas online que ofrecen varias variantes de productos en la página de detalles 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. En cambio, en las SPA y sitios web dinámicos similares, sólo se actualiza el contenido que cambia.
Comportamiento con los cambios de URL
Por defecto, Varify realiza un reinicio de la reproducción de variantes para cada cambio de URL, es decir, se reinician todas las variaciones de la página, se comprueba de nuevo la URL y se vuelven a aplicar todas las variaciones aplicables para la nueva URL.
Desactivación de la función estándar
La desactivación de la función "Experimento de limpieza al cambiar la URL" puede ser especialmente útil en las páginas de productos de las tiendas en línea en las que se pueden seleccionar distintas variantes de productos, como colores. Con dicha selección, la URL puede cambiar para reflejar el color seleccionado. Sin embargo, si hay una variación relacionada con un contenido que no cambia (por ejemplo, el botón "Añadir a la cesta"), no sería deseable eliminar y volver a aplicar esta variación. Esto podría provocar efectos no deseados, como el parpadeo de la pantalla.
Volver a aplicar el experimento al cambiar de DOM
Cuando se activa el ajuste, el DOM de la página web se supervisa permanentemente para garantizar que la optimización de la variante permanece activa. Si la optimización es sobrescrita por scripts o elementos de página del sitio web, el sistema lo reconoce y vuelve a aplicar la optimización. Esto puede ocurrir, por ejemplo, al filtrar determinadas variantes de productos.
Si el ajuste está desactivado, la optimización sólo se aplica una vez; no se realiza un seguimiento continuo.