O jQuery deve ser usado apenas para casos excepcionais
Recomendamos usar o jQuery o mínimo possível. Os aplicativos da Web estão mudando constantemente e pequenas atualizações na interface do usuário e na estrutura da página podem quebrar qualquer jQuery usado.
A seleção de elementos pronta para uso do WalkMe se adapta às alterações no aplicativo subjacente sem o uso do jQuery.
Breve Visão Geral
jQuery é uma biblioteca JavaScript usada para identificar e manipular elementos HTML em uma página. Embora o WalkMe forneça uma seleção de elementos prontos para uso que se adapta às alterações da interface do usuário, os seletores jQuery atuam como uma alternativa poderosa para casos extremos.
Esses seletores identificam elementos com base em características específicas, como ID, Classe, Tipo e Atributos.
Casos de uso
Recomendamos usar o jQuery com moderação para manter a estabilidade da compilação. No entanto, é uma ferramenta vital para as seguintes tarefas:
- Criar Metas de Onboarding: definir metas com base em um elemento na tela
- Configurar lançadores: insira seletores específicos na guia Elemento Selecionado
- Capturar valores: capturar variáveis de usuário ou texto na tela para anúncios dinâmicos
- Verifique as condições da página: use o Mecanismo de Regras para analisar atributos de elementos
Como Funciona
Siga estas etapas para criar, testar e implementar seletores personalizados no seu conteúdo do WalkMe.
🎓 Instituto de Adoção Digital
Operadores do Mecanismo de Regras disponíveis
Ao usar o tipo de regra jQuery no Mecanismo de Regras, use esses operadores para definir sua lógica:
- Verdadeiro: pelo menos um elemento foi encontrado
- Falso: nenhum elemento foi encontrado
- Visível: o elemento está visível no momento na página
- Texto É / Não É: o texto do elemento corresponde ou não corresponde à sua entrada
- Observação: Quando o seletor retorna mais de um elemento, o texto de todos os elementos é combinado como um elemento
- Maior que/Menor que: o valor está acima ou abaixo de um número inteiro
- Como/Não como: significa uma sintaxe de texto complicada
- O comprimento é / não é / maior que/menor que: o número de elementos retornados pela consulta
- Encontre o comprimento exato da consulta: wmjQuery(“element.value”).length
Observação
O Editor do WalkMe suporta apenas seletores escritos na sintaxe jQuery até a usada no jQuery 1.8.3. No entanto, você pode usar qualquer versão do jQuery para outros fins em seu site sem medo de conflito com a versão do jQuery do WalkMe (wmjQuery).
Recomendamos que você também utilize o jQuery Selector Optimizer do WalkMe.
Seletores Comuns do jQuery
Use esses padrões para identificar elementos dentro do aplicativo:
- elemento: localizar um elemento HTML específico pelo nome da tag
- element[attribute]: localize um elemento que contenha um atributo específico
- element[attribute][attribute]: localize um elemento que corresponda a vários atributos simultaneamente
- elemento[attribute= value=""]: localizar uma correspondência exata para um atributo e seu valor
- elemento[attribute^= text=""]: localize um elemento onde o atributo começa com texto específico
- elemento[attribute*= text=""]: localize um elemento onde o atributo contém texto específico em qualquer lugar da string
- elemento[attribute!= text=""]: localizar um elemento que não contenha o texto do atributo especificado
- element child-element: localize um elemento filho aninhado (o espaço indica uma relação pai-filho)
- element:checked: localize o status de uma caixa de seleção ou botão de rádio
- [element]:visible: verifique se um elemento específico está visível atualmente na página
- element:contains(Texto): localize um elemento com base na string de texto específica que ele contém
- element:eq(#): localize um índice específico em uma lista de resultados (observe que a contagem começa em 0)
Etapa 1: criar o seletor
- Localize o elemento no HTML clicando com o botão direito do mouse e selecionando Inspecionar Elemento
- Identifique características exclusivas, como classe, ID ou estilo
- Elabore o seletor usando a sintaxe: Elemento → Seletor → Valor
- Exemplo (ID): ul#create-account
- Exemplo (classe): ul.nav
Crie jQuery usando seus dados do WalkMe
Agora você pode utilizar os dados existentes do WalkMe em favor de um seletor jQuery.
Isso pode ser feito adicionando '${wm-data-key}' ao seletor desejado. Por exemplo: o seletor: [id=], terá o '${key}' substituído pelos dados reais do WalkMe e terá a seguinte aparência: [id=”value”].
Etapa 2: Teste no console
Observação: você deve ter a Extensão do Editor ativada para usar esse método.
- Abra as Tools do Desenvolvedor do navegador e selecione a guia Console
- Digite wmjQuery("your-selector-here") e pressione Enter
- Passe o mouse sobre os objetos retornados no console para verificar se o elemento correto está destacado na tela
Etapa 3: Implementar no editor
Depois de verificado, você pode aplicar o seletor em vários locais:
- Guia Elemento selecionado: use para identificação específica de Etapa ou Lançador
- Acionadores de etapas adicionais: use para acionar etapas ao clicar ou passar o mouse
- Editor de Rich Text: use para exibir Texto Dinâmico em balões ou Shoutouts
- Mecanismo de regras: selecione o Tipo de Regra jQuery para criar lógica complexa
Etapa 4: Otimizar para desempenho
Para garantir a melhor experiência de usuário, compare a velocidade dos seletores:
- Digite o seguinte script no console: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Execute o comando várias vezes para encontrar o tempo médio de execução
- Selecione a versão com o menor tempo médio
Dica
Lembre-se de que o jQuery deve ser usado com moderação nas suas compilações do WalkMe e sempre em combinação com condições mais leves. Consulte o seguinte artigo para obter mais informações: Melhores práticas de desempenho do WalkMe
Notas técnicas
- Para sites que usam o Shadow DOM, você não poderá executar o wmjQuery no Console DevTools, você precisará usar esta sintaxe:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('insira seu seletor aqui')
