Monitoramento de Visibilidade

# Monitor de renderização (snippet\_read) ## Monitor de renderização (snippet\_read) 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.

### Como implementar 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.

#### Sobre o Prefixo e Sufixo 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`. #### Implementação 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` : ```html Monitoramento de Visibilidade

Cabeçalho da Página

Algum texto aqui que não é monitorado.

Conteúdo Principal

Outro texto não monitorado.

``` 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. ## 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: #### 1. **Medição de Engajamento com Conteúdo** * **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). #### 2. **Otimização de Anúncios** * **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. #### 3. **Experiência do Usuário e Design** * **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. #### 4. **Conformidade e Legalidade** * **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. #### Conclusão 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.agnosticdata.ai/agnosticdata.ai-or-documentation/fundamentals/features/monitor-de-renderizacao-snippet_read.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.