Para profundizar en el problema y las soluciones, consulte los motivos por los que los elementos no aparecen a continuación.

¿Qué es un selector CSS?

Un selector CSS describe la ubicación de uno o más elementos en una página HTML. Utiliza características como identificadores, clases y otros atributos para crear una ruta de navegación hacia uno o más elementos en el árbol HTML. Para más información sobre los selectores CSS, consulta "Cómo funcionan los selectores CSS".

¿Cómo utiliza Appcues los selectores CSS?

Al colocar una descripción emergente o un punto de interés en nuestro editor, capturamos un selector CSS para el elemento que intentas anotar. Guardamos los selectores CSS de cada una de esas anotaciones para poder volver a colocarlas más tarde. Puedes pensar en los selectores CSS como instrucciones repetibles que indican dónde deben ir tus puntos de interés, descripciones emergentes y marcas de coaching en la página.

Cuando Appcues muestra una descripción emergente o un punto de acceso, comienza escaneando la página para localizar los elementos correctos a los que adjuntar (utilizando los selectores CSS del paso mencionado anteriormente). Al hacerlo, Appcues registra qué elementos están presentes o ausentes en la página.

En algunos casos, Appcues requiere que todos los elementos estén presentes en la página para iniciar el recorrido. En otros casos, se permite una visualización parcial. Si un elemento no está presente cuando creemos que debería estarlo, Appcues envía esa información a nuestros servidores y la muestra en nuestros análisis. Si un elemento falta y no se muestra, se mostrará en la sección de problemas de Flow Analytics.

¿Por qué necesitaría cambiar un selector CSS en Appcues ?

Los selectores CSS que capturamos son un conjunto de instrucciones para acceder a un elemento de la página. Esto significa que una descripción emergente o un punto de acceso pueden volverse irrelevantes y no mostrarse si:

• El elemento ya no está en la página.
• El elemento aún no se ha mostrado en la página.
• Hay demasiados elementos similares en la página, por lo que no podemos encontrar el elemento original/único.

Cosas a tener en cuenta al ajustar los selectores:

• Añade anotaciones solo a los elementos disponibles para todos los usuarios objetivo. Por ejemplo, si hay un botón que solo se muestra para usuarios de pago, se crean flujos que indican que ese botón debe estar dirigido únicamente a usuarios de pago.
• Asegúrese de que los elementos a los que adjunta puntos de acceso e información sobre herramientas estén visibles de forma consistente cuando se cargue la página.

Es posible que los puntos de acceso o la información sobre herramientas no aparezcan si nuestro SDK no puede identificar los elementos específicos a los que están configurados para adjuntarse.

Cuando un elemento no aparece, esto suele ocurrir por cuatro motivos:

• El elemento particular no existe en todas las instancias de la misma URL
• Los selectores CSS a los que están asociados sus información sobre herramientas o puntos de acceso se generan dinámicamente
• El elemento se identifica mediante un selector CSS demasiado genérico que también hace referencia a otros elementos en la misma página
• Selectores que cambian en un estado vacío

Cómo encontrar selectores CSS manualmente

Supongamos que ha identificado que un paso no se muestra debido al selector elegido por el Constructor. En ese caso, podría interesarle determinar manualmente un selector más estático o específico. Puede hacerlo utilizandolas Herramientas de desarrollo de Chrome .

Inspeccionar el elemento objetivo

Una vez que tenga DevTools abierto, puede navegar a la pestaña Elementos donde podrá ver los nodos DOM (que contienen elementos) en la página.

Una vez en la pestaña correcta, puede hacer clic en el botón Inspeccionar en la parte superior derecha del panel DevTools (que se muestra a continuación 👇) y hacer clic en el elemento de la página al que desea adjuntar el paso.

Después de hacer clic en el botón Inspeccionar seguido del elemento de destino, el elemento debería resaltarse en el panel Chrome DevTools.

Elija un selector

Para elegir un selector que sea estático y específico, necesitará saber un poco sobre la estructura de los elementos HTML y los atributos asociados a ellos.

Si eres nuevo en estos conceptos o necesitas refrescarlos, ¡los siguientes artículos de w3schools son un excelente lugar para comenzar!

• Elementos HTML
• Atributos HTML
• Clases HTML
• Identificadores HTML

Hay muchos tipos de selectores CSS, pero si su elemento de destino tiene un id o class puede usar un selector simple para seleccionar el elemento de destino.

Si la clase del elemento no es lo suficientemente única o el elemento no tiene una class o id , puede ser necesario utilizar uno de los otros tipos de selectores enumeradosaquí .

Elementos faltantes

Si coloca una información sobre herramientas o un punto de acceso en un elemento que no existe en todas las instancias, sus flujos no se mostrarán cuando esos elementos no aparezcan.

Por ejemplo, en la imagen a continuación tenemos una información sobre herramientas colocada en el Proyecto 2. Si un usuario no tiene dos proyectos, la información sobre herramientas no aparecerá en esta página ya que estaría buscando un selector CSS para el segundo proyecto.

Selectores generados automáticamente (dinámicos)

A veces, tus elementos serán visibles en todas las instancias, pero podrían tener atributos dinámicos o generados automáticamente (clases, ID, etc.). En este caso, los elementos en tu marcado HTML se verán así:

Los atributos autogenerados (como "core___2PzPF") mencionados anteriormente son comunes en ciertos frameworks javascript como React.js y Ember.js. Estos ID se generan dom al cargar la página. Por lo tanto, Appcues no podrá determinar automáticamente el mejor selector CSS para usar al crear sus Appcues de acceso o descripciones emergentes.

Para que sus información sobre herramientas y puntos de acceso se muestren correctamente, elimine la parte generada automáticamente del selector CSS.

En el editor Appcues , haga clic en el ícono de engranaje junto a la información sobre herramientas o el punto de acceso que desea ajustar:

Ahora verá que el selector CSS generado automáticamente se utiliza para posicionar su paso. Aquí encontrará instrucciones sobre otros métodos para representar un atributo . Por ejemplo, si tuviera el siguiente selector CSS

div.menu-panel__2Hkc9 > encabezado

Puedes reemplazar la parte generada automáticamente ajustándola a:

div[class^="menu-panel__"] > encabezado

Como alternativa, puede crear su propio selector a partir de otros atributos asociados al elemento de destino. El editor Appcues recopilará y listará los siguientes atributos cuando estén disponibles: tipo de etiqueta HTML, id, clase, href, src, alt, título, tipo, nombre y marcador de posición.

Selectores CSS genéricos

Para los selectores CSS que son demasiado generales y pueden hacer referencia a más de un elemento en su página, las informaciones sobre herramientas o los puntos de acceso no pueden identificar en qué elemento aparecer y, por lo tanto, no se mostrarán:

Para que tus flujos aparezcan en los elementos correctos, identifica un selector más único inspeccionando el elemento en tu página. Una vez que tengas un selector más específico, haz clic en el icono del engranaje del punto de acceso o la descripción emergente que quieras ajustar y añade el identificador único en el campo Selector o selecciona otro atributo de la lista.

¡También puedes seleccionar Por orden si tienes varios objetos con el mismo encabezado CSS!

Los mensajes del Selector de Elementos le avisarán si su selector, ya sea introducido automática o manualmente, es 1) único y válido, 2) válido, pero no único, o 3) no se encuentra. Elija un selector que sea único y válido. Guarde el nuevo selector y previsualice su flujo para comprobar su correcto funcionamiento.

Selectores que cambian en un estado vacío

Otro aspecto a tener en cuenta es que un selector puede ser ligeramente diferente cuando alguien ve una parte de la página vacía (en comparación con una página completa). Por lo tanto, asegúrese de revisar el flujo desde cero, como lo haría un nuevo usuario, y asegúrese de que el selector sea el mismo en ambos estados. Normalmente, en este caso, alguna parte del selector es consistente.

¿Aún estás atascado?

Comuníquese con support@appcues si tiene preguntas sobre lo anterior.