Problemas com as gravações

Nenhuma gravação está sendo gerada

Se você não estiver obtendo gravações em sua conta do Smartlook, pode haver várias razões para isso:

  • You don’t have Smartlook installed on your page, or it was incorrectly installed. Make sure you install Smartlook correctly. Você não tem o Smartlook instalado em sua página ou foi instalado incorretamente. Certifique-se de que instala o Smartlook corretamente.
  • Se você usa um CMS como o WordPress e atualizou seu website ou tema, o plug-in pode ter sido excluído. Se esse for o caso, você precisará reinstalá-lo.
  • You have your recordings disabled (toggled off). Simply toggle them on again in the Dashboard. Você tem suas gravações desativadas. Basta ativá-las novamente em seu dashboard.
  • Os visitantes ainda estão navegando no site. As gravações serão disponibilizadas alguns minutos depois que os visitantes saírem do site.
  • Se você percebeu algumas discrepâncias entre a contagem de visitantes em outras ferramentas de análise e o número de gravações de visitantes no Smartlook, confira a seção de ajuda chamada “O Smartlook grava todos os visitantes?

As gravações não estão mostrando o layout correto da página

Pode haver diversos fatores que podem fazer com que as gravações não mostrem o estilo CSS correto de sua página, tais como:

  • Seu site pode estar em um ambiente local (localhost), uma intranet ou em de uma rede VPN. Para funcionar corretamente, o Smartlook precisa ser instalado em um site totalmente público, de modo que todos os dados possam ser transferidos por meio de um proxy para nossos servidores.
  • A gravação é demasiado curta (isto é, termina após um segundo) e a conexão não foi estabelecida, o que significa que o estilo CSS de sua página não foi transferido.
  • O tema do layout de seu site pode ter elementos que não são compatíveis (por exemplo, Canvas, iframes ou elementos Flash). O Smartlook registra apenas elementos HTML, CSS e JavaScript.
  • Seu site tem CSS dinâmico. Saiba mais aqui.
  • You might have a firewall blocking the Smartlook proxies. Check your web security settings and make sure you have the header access-control-allow-origin:* enabled. Você pode ter um firewall bloqueando os proxies Smartlook. Verifique suas configurações de segurança da web e verifique se você tem o cabeçalho access-control-allow-origin: * ativado.

Saiba mais aqui.

O Smartlook grava iframes?

Não é tecnicamente possível para o Smartlook registrar iframes porque o script não pode interagir com o conteúdo que está contido dentro de tais elementos.

Problemas de CSS comuns

Ao reproduzir gravações de visitantes, as gravações podem mostrar uma página com um layout defeituoso, sem estilos, parcialmente sem estilo ou sem certos elementos, como imagens, que podem ser causados por vários fatores. Abaixo estão descritos os problemas mais comuns.

Depurar um problema

Quando você reproduz uma gravação, o Smartlook usa proxies para acessar seus assets (como arquivos de CSS) e carregar os dados para que as gravações possam mostrar os estilos.

Para que uma gravação mostre o layout correto da página, quando você abrir as Ferramentas do desenvolvedor do navegador, poderá ver os arquivos de CSS que estão sendo carregados.

E sempre que houver um problema com o carregamento de alguns dos arquivos, você poderá ver o arquivo afetado destacado (1), bem como uma mensagem de erro no console do navegador (2).

Alterações em seu CSS

Quando você faz alterações em seu CSS, as gravações mais antigas poderão começar a exibir o novo estilo, porque quando você reproduz a gravação, o proxy do Smartlook acessa seus arquivos e carrega a versão atual de seus estilos CSS.

A solução para isso é criar um novo arquivo com a nova versão do seu CSS e manter os arquivos de estilo com a versão mais antiga. Dessa forma, quando você reproduzir gravações antigas, o Smartlook recuperará a versão antiga do CSS. Quando você reproduz gravações mais recentes, o Smartlook recuperará os estilos da sua versão mais recente.

CSS Dinâmico

Outro cenário comum é você estar usando um CSS dinâmico, no qual são geradasfolhas de estilo temporárias. Portanto, quando você acessa a página em uma data diferente, a folha de estilo anterior pode ter expirado. Então, o que você está vendo é o estilo de uma nova folha de estilos.

Os proxies Smartlook, no entanto, recuperam os dados da folha de estilos ativa no momento em que a gravação foi feita, portanto, se você tiver arquivos CSS temporários e estes tiverem expirado, isso fará com que as gravações fiquem quebradas após um certo período de tempo, após o qual os proxies não podem mais acessar os arquivos CSS expirados. Isso é acompanhado por um erro na solicitação (request) do CSS.

A solução para isso é manter os arquivos mais antigos para que os proxies Smartlook ainda possam ter acesso a esses dados. Você pode também entrar em contato conosco e solicitar que ativemos o caching automático de dados em sua conta.

Restrições de CORS

O CORS (Cross-origin resource sharing) é um mecanismo que permite que recursos restritos em uma página da web (por exemplo, fontes) sejam solicitados de outro domínio fora do domínio no qual o recurso foi exibido. Uma página da Web pode incorporar livremente imagens, folhas de estilo, scripts, iframes e vídeos de origem cruzada.

Quando os proxies Smartlook fazem uma solicitação de CSS bem-sucedida aos seus servidores, a resposta inclui um cabeçalho especial de resposta chamado Access-Control-Allow-Origin com um valor de * (curinga), o que significa que esse recurso pode ser solicitado por todos os domínios.

Quando um recurso não tem isso, ele não pode ser solicitado por outros domínios, portanto, a solicitação feita pelo proxy Smartlook para o seu servidor não é bem-sucedida e o player não renderizará esses dados na gravação. Você verá uma mensagem de erro em seu console que se parece com isto:

Para resolver isso, você precisa verificar suas configurações de segurança e ativar esse cabeçalho, permitindo o CORS. Como alternativa, você também pode usar uma extensão como essa, que adiciona automaticamente “Access-Control-Allow-Origin: *” ao cabeçalho de resposta do request.