Monitor de renderização (snippet_read)
Last updated
Last updated
Esta funcionalidade realiza uma verificação para identificar se elementos específicos na página estão visíveis para o usuário e, se estiverem, calcula por quanto tempo permaneceram visíveis até que deixassem de estar.
Monitoramento de Visibilidade: Utiliza o IntersectionObserver para monitorar elementos específicos marcados na página (identificados por certos id, class ou atributos). Este observador verifica a interseção desses elementos com a viewport, ou seja, se estão ou não visíveis na tela do usuário.
Threshold de Visibilidade: Um threshold (limiar) é definido para determinar quando um elemento é considerado visível. Por exemplo, um threshold de 0.7 significa que 70% do elemento precisa estar visível na viewport para ser considerado visível.
Ajustes para Dispositivos Móveis: O threshold pode ser ajustado se o usuário estiver em um dispositivo móvel, para refletir uma maior sensibilidade à visibilidade em telas menores.
Evento de Visibilidade da Aba: monitoração das mudanças na visibilidade da aba do navegador com o evento visibilitychange. Se a aba for reaberta ou voltar a ser focada, ele atualiza a data e hora de quando os elementos foram considerados visíveis.
Registro de Duração: Quando um elemento se torna visível, ele registra o momento em que isso ocorre. Quando o elemento deixa de ser visível, ele calcula a duração da visibilidade subtraindo o tempo de início registrado do tempo atual. Se o elemento permanecer visível por um certo tempo antes de a aba ser fechada ou o usuário sair da página, isso também pode ser calculado e registrado.
Envio de Dados: O código tem capacidade para enviar esses dados (e.g., quanto tempo um elemento ficou visível) usando uma função de envio (no exemplo, a função sender). Isso pode ser usado para análise de engajamento do usuário ou para outras métricas de análise de comportamento do usuário.
Para implementar o gatilho que monitora a visibilidade de elementos na página HTML, você precisa seguir alguns passos básicos. Aqui está um exemplo prático para guiá-lo através do processo de integração do código em uma página HTML.
No caso deste exemplo agnostic-monitor-header, agnostic-monitor funciona como um prefixo e header como um sufixo:
Prefixo (agnostic-monitor): Este prefixo é usado para definir uma família ou um tipo de elemento que compartilha a funcionalidade de monitoração (quando o elemento é exibido na tela). No caso, todos os elementos que começam com agnostic-monitor estão sendo monitorados para verificar sua visibilidade na tela. Isso significa que um script de JavaScript está ativamente verificando se esses elementos estão visíveis para o usuário e por quanto tempo.
Sufixo (header): O sufixo é um detalhamento adicional que especifica qual parte específica da página aquele elemento representa. No exemplo agnostic-monitor-header, o sufixo header indica que este é o cabeçalho da página. Outros exemplos podem incluir footer para o rodapé ou main para o conteúdo principal, o identificador da uma notícia, card, dentre outros. Isso ajuda os desenvolvedores a entenderem rapidamente a função de cada elemento só pelo id.
Encontre os elementos que deseja monitorar ou peça aos desenvolvedores para realizar a aplicação do prefixo mais o sufixo dinamicamente.
Veja o exemplo a seguir onde temos agnostic-monitor-header, agnostic-monitor-main e agnostic-monitor-footer :
Uma vez aplicada essas tags, os eventos serão capturados automaticamente quando os critérios forem atendidos e sem necessidade de envio programático. Na sua console, o evento de nome snippet_read será será lançado para obter insights.
A monitoração da visibilidade de elementos em uma página web, como discutimos com o uso de IntersectionObserver, pode fornecer insights valiosos e criar oportunidades significativas para otimização de conteúdo e anúncios, engajamento do usuário e até mesmo conformidade regulatória. Vamos explorar algumas aplicações práticas dessa tecnologia:
Notícias e Artigos: Monitorar quais partes de um artigo ou notícia foram realmente vistas pelos visitantes pode ajudar a entender quais tópicos ou estilos são mais atraentes. Por exemplo, se descobrir que a maioria dos usuários deixa de ler no meio de um artigo, pode-se considerar tornar o conteúdo mais conciso ou dividir em seções menores e mais digeríveis.
Em conjunto com Scroll Depth (Profundidade de Rolagem): É possível monitorar até onde os usuários rolam em uma página pode dar uma ideia de quão envolvente é o layout ou o conteúdo. Insights sobre a profundidade de rolagem podem ser usados para otimizar a colocação de conteúdo importante ou chamadas para ação (CTAs).
Visibilidade de Anúncios: Saber se um anúncio foi realmente visto (e por quanto tempo) pode ajudar a otimizar a receita de anúncios. Isso também pode influenciar como e onde os anúncios são colocados na página para maximizar a visibilidade sem prejudicar a experiência do usuário.
Teste A/B de Posicionamento de Anúncios: Usando a visibilidade como uma métrica, é possível realizar testes A/B para diferentes posições de anúncios na página e determinar quais posições geram mais engajamento e cliques.
Ajustes de Layout: Se certos elementos importantes raramente são vistos, pode ser necessário reconsiderar o layout da página. Isso é particularmente útil para otimizar páginas em dispositivos móveis, onde o espaço é limitado.
Personalização de Conteúdo: Monitorar o que um usuário vê e interage pode ajudar a personalizar o conteúdo que é mostrado a ele em visitas futuras, melhorando a relevância e o engajamento.
Conformidade com Publicidade: Em alguns mercados e indústrias, existem regras específicas sobre como e quando um anúncio deve ser considerado "visto". A monitoração da visibilidade pode ajudar a garantir que os anúncios estejam em conformidade com essas diretrizes.
Evidência de Exposição: Para contratos de publicidade baseados em desempenho, ter dados sobre a visibilidade dos anúncios pode servir como prova de exposição, útil tanto para faturamento quanto para análise de desempenho de campanhas.
Utilizar o Monitor de renderização (snippet_read) (monitoramento de visibilidade) não apenas ajuda a entender melhor o comportamento do usuário, mas também permite uma série de ações estratégicas para melhorar o desempenho geral do site. É uma ferramenta poderosa para editores, comerciantes digitais, e equipes de UX/UI melhorarem continuamente suas ofertas e estratégias baseadas em dados concretos de interação do usuário com o site.
