Como identificar que usuário saiu da página com JavaScript

Neste artigo você vai aprender a como identificar que usuário saiu da página, ou seja, quando o usuário muda a aba do site e vai para outro

Conteúdo também disponível em vídeo:

Fala ai programador(a), beleza? Bora aprender como identificar quando o usuário muda de aba e deixa o nosso site

O processo é bem simples, precisamos apenas adicionar um evento na tela, ou seja, no objeto window de blur

Este evento vai disparar quando a janela/aba não ficar visível, que é justamente o que precisamos

Veja um exemplo prático:

window.addEventListener("blur", function(){
	console.log("Mudou de página!");
});

Teste no seu navegador, a cada mudança de aba ele registra no console a mensagem

Porém com esta abordagem temos um pequeno problema, clicar na barra de endereço também ativa o evento

Então caso você não queira esta ação, pode utilizar outra abordagem que é Page Visibility API

Utilizando o evento visibilityChange, veja um exemplo prático:

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

document.addEventListener(visibilityChange, acao, false);

function acao() {
    console.log("Mudando de aba");
}

Com o snippet acima você consegue detectar a mudança de aba em todos os navegadores, e só a mudança mesmo

Então em alguns casos pode ser mais interessante esta abordagem, pois geralmente queremos disparar um evento apenas quando o usuário muda de página

Conclusão

Neste artigo aprendemos a como identificar que usuário saiu da página com JavaScript

Podemos verificar que o usuário mudou de aba de duas formas, adicionando o evento blur na window

Ou utilizando a Page Visibility API, que na maioria dos casos parece ser a abordagem mais interessante, pois apenas realiza o evento quando o usuário sai de fato da página

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube