Páginas y features: etiquetado preciso

El tagging es la base de todo: convierte tráfico genérico en datos de producto. Aquí defines qué URLs son páginas y qué elementos son features.

Páginas

Cada página agrupa URLs con reglas (se cumplen en OR):

• exacta:/facturacion — esa URL exacta (path + query).
• prefijo:/app/fact/ — todo lo que empiece así.
• contiene:checkout — lo contenga donde sea.
• regex:^/fact/[0-9]+$ — patrón exacto para ids variables.

Consejos: crea primero las páginas específicas y al final las genéricas (la primera que encaja gana); normaliza ids con regex; revisa las páginas auto registradas por tráfico y renómbralas.

Features

Un elemento de la UI por selector CSS. Orden de preferencia:

1. data-* propio: [data-sv='crear-proyecto'] — inmune a rediseños.
2. #id único y estable.
3. [aria-label='…'] para botones icónicos.
4. Ruta CSS corta: solo como último recurso (se rompe con cualquier cambio).

Verifica siempre en la consola de la página real: document.querySelectorAll(miSelector).length debe ser exactamente 1.

Modo diseñador (recomendado)

Escribe la URL de tu web y pulsa 🎯 Feature o 📄 Ruta: se abre tu web con el agente en modo selección; al hacer click en un elemento, el selector se rellena solo. También puedes abrir https://tu-web?argumentum_designer=feature.

Por framework

• Vue: no taggees con data-v-xxxx (cambian por build); usa data-* propios.
• React: evita clases generadas (css-1x2y3z); usa data-testid.
• Angular: evita _ngcontent-; data- propios o aria-label.

Cómo se usa

1. Añade la página con nombre y reglas.
2. Añade features indicando nombre, selector y (opcional) su página.
3. Los datos son retroactivos: al taggear, el histórico de clicks ya almacenado se reevalúa contra el nuevo selector.