Aplicativo de página única
O que há nesta página
Sobre aplicativos de página única
Os aplicativos de página única (SPA) são um tipo especial de aplicativo da Web. Um SPA carregará uma única página quando você entrar em um site e, a partir desse ponto, carregará todo o conteúdo subsequente nessa mesma página à medida que você navegar. Isso parecerá funcionar como um site normal, mas ao alternar entre “páginas”, a página não recarrega de fato.
Por padrão, código de implementação é executado assim que uma página da Web é carregada. No entanto, como os SPAs não são atualizados ao navegar entre as páginas, código de implementação não será reavaliado quando você navegar entre as páginas. Usando as técnicas descritas abaixo, você pode permitir que o código de implementação funcione em seu site SPA sem problemas.
Qdica: algumas dessas técnicas usam a API JavaScript de feedback do site. Para obter documentação detalhada sobre a API JavaScript do Qualtrics Website Insights, consulte esta página.
Atenção: A documentação a seguir requer conhecimento de programação para ser implementada. Recomendamos passar essas informações para a equipe que implementará seu código de implementação. Nossa equipe de suporte não oferece assistência nem consultoria em codificação personalizada. Ao invés disso, você pode perguntar para nossa comunidade de usuários dedicados. Se quiser saber mais sobre os serviços de codificação personalizada que podem ser encomendados, entre contato seu executivo Conta Qualtrics.
Qdica: O Javascript não está incluído em todas as licenças Qualtrics. Entre em contato com seu executivo Conta Qualtrics se estiver interessado em obter acesso.
Reavaliação da lógica de Interceptor e atividade de rastreamento após a mudança de URL
Se o seu aplicativo de página única depender do roteamento do lado do cliente para a navegação do usuário, você poderá forçar a reavaliação das interceptações nas alterações subsequentes de URL ativando a configuração Reavaliar lógica de interceptor quando o URL for alterado. Marcar essa configuração permitirá a avaliação da lógica interceptor, além da avaliação que ocorre no carregamento inicial da página.
Qdica: essa configuração afeta todas as interceptações do projeto.
Atenção: Se você decidir usar essa configuração do SPA em conjunto com a opção de nível de interceptação para Exibir com código Javascript personalizado (manualmente), ainda será necessário chamar o
QSI.API.run();para obter o interceptor a ser exibido em cada página do SPA.
Implementação manual com a API JavaScript
Qdica: Para obter documentação detalhada sobre a API JavaScript para feedback do site Qualtrics, consulte esta página.
Este método descreve como mudar seu código de implementação para ser executado manualmente. Isso significa que o código de implementação não será executado nem avaliará a lógica associada até que a solicitação apropriada API JavaScript seja iniciada.
Para implementar manualmente
Solicitações API JavaScript
Qdica: Para obter documentação detalhada sobre a API JavaScript para feedback do site Qualtrics, consulte esta página.
Se quiser que o Qualtrics avalie seu projeto em uma única instância, use essas duas solicitações:
QSI API.load(); Qdica: se você tiver a opção Manually Load Project ativada nas configurações do projeto, não precisará chamar essa API para carregar o código de implementação no carregamento inicial da página. Só será necessário forçar o carregamento para levar conta as alterações de estado na página que ocorrem sem recarga.
QSI API.run(); Se você quiser que o Qualtrics avalie o código do seu projeto mais de uma vez na mesma página, repita as três etapas a seguir a cada vez:
Perguntas frequentes
Eu ativei meu interceptor, mas ele não aparece no meu site. Por que não?
Eu ativei meu interceptor, mas ele não aparece no meu site. Por que não?
- Lógica: a lógica de direcionamento de interceptor e a lógica de conjunto de ações são as condições que devem ser atendidas para que uma interceptor seja exibida a um visitante. A verificação dessa lógica será útil para descobrir por que o Interceptor não está sendo exibido em uma página.
- Conjuntos lógicos que usam "Contém": Uma causa comum de erro lógico é o uso do conjunto lógico "Contains" vs. "Contains". "É." Dizer que uma condição "Contém" significa que o parâmetro no qual você está baseando a lógica (ou seja, URL atual) terá o valor especificado presente, além de mais informações. Por exemplo, se eu tivesse uma lógica que lesse como URL atual contém "qualtrics", isso faria com que a interceptor fosse exibida em qualquer URL que tivesse a palavra qualtrics presente. A outra opção que você tem é usar o URL atual é [URL]. Essa condição depende do fato de o URL visitado ser uma correspondência exata. Quaisquer diferenças ou caracteres adicionais impedirão a aprovação da lógica interceptor.
- Revisões Interceptor: Ao fazer edições em interceptações, as alterações não são ativadas até que a interceptor seja publicada. Ao publicar uma Interceptor, uma versão da interceptor, ou uma "revisão", é salva. A revisão das revisões feitas é muito útil para identificar quaisquer alterações que possam ter impedido repentinamente o aparecimento da interceptor.
- Janela de depuração: A janela de depuração é uma ferramenta inestimável para testar por que uma interceptor não está sendo exibida em uma determinada página.
Para interceptações cujo código de implementação foi implementado antes de março de 2019, para ativar a janela de depuração, anexe uma query string a qualquer URL chamado Q_DEBUG. Isso deve ser prefixado com um ? ou um &, como nos exemplos a seguir: https:qualtrics qualtrics
Para interceptações cujo código de implementação foi implementado após março de 2019, execute o seguinte trecho de JavaScript no console da sua página da Web:QSI.API.unload(); QSI.isDebug = true; QSI.API.load(); QSI.API.run();A janela de depuração divide todas as condições necessárias para que as interceptações em execução na URL sejam exibidas. Se você achar que uma interceptor não está aparecendo, localize-a na janela de depuração e identifique os avisos vermelhos de falha.Qdica: O depurador do Website Insights não funcionará se o código tiver sido implementado usando um gerente de tags. Além disso, se o URL já tiver uma query string com um ?, o depurador exigirá um & em vez disso. - Solicitação de rede: A maioria dos navegadores possui um menu ferramentas desenvolvedor que permite que o usuário veja o código-fonte, os recursos, os cookies e as chamadas de rede de um site. O Website Insights possui uma presença distinta na seção Rede dessas ferramentas. Para verificar se esses scripts estão sendo executados, abra ferramentas do desenvolvedor e navegue até a seção Rede. Uma vez aqui, recarregue a página da Web e o menu deverá começar a ser preenchido com todas as solicitações de rede que estão sendo feitas pelo site. Para identificar o código do Website Insights, procure por chamadas que comecem com ?Q_ZID ou ?Q_SID. Esse é o próprio código que executa verificações na lógica de exibição. Se você não encontrar nada que corresponda a esse formato, há um problema com a implementação do código do seu projeto. Você pode consultar nossa página de suporte sobre implementação para obter orientação sobre o melhor local para colocar o código.
- Problemas de política de segurança de conteúdo: Se você receber um log de console que viole uma política de segurança de conteúdo, provavelmente há uma restrição no seu site que está impedindo a implementação das nossas interceptações. Recomendamos entrar em contato com sua equipe de desenvolvimento da Web para resolver o problema. Para garantir que suas interceptações funcionem, geralmente recomendamos permitir a inclusão dos seguintes itens nos cabeçalhos da Content Security Policy:
- connect-src https://*qualtrics.com
- frame-src https://*qualtrics.com
- img-src qualtrics
- script-src https://*qualtrics.com
- Tratamento de URL de SPA: Se o seu site usa uma estrutura de aplicativo de página única (SPA), verifique se o código aciona history.pushState() ao navegar entre as exibições. Algumas estruturas podem renderizar novamente ou atualizar o URL sem enviar uma nova entrada de histórico, o que pode impedir o disparo de interceptações. Se estiver usando useEffect ou ganchos lifecycle semelhantes, certifique-se de que a lógica interceptor seja executada após a conclusão da navegação.
Criei meu interceptor, mas gostaria de testá-lo antes da ativação. Como eu posso fazer isso?
Criei meu interceptor, mas gostaria de testá-lo antes da ativação. Como eu posso fazer isso?
Isso é ótimo! Obrigado pelo seu feedback!
Obrigado pelo seu feedback!