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

<figure><img src="https://2995894881-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBD2WDS4DaY1QhGFZ1hqU%2Fuploads%2FMfLL4AEudelEtPhSlQE9%2Fimage.png?alt=media&#x26;token=5848d654-e106-41c9-a820-f85a170109c7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2995894881-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBD2WDS4DaY1QhGFZ1hqU%2Fuploads%2FAdRkKG7ZwmuEDkgOlQl5%2Fimage.png?alt=media&#x26;token=d25bec55-f9fd-49cd-a40e-f06f6aa3d355" alt="" width="375"><figcaption><p>Representação visual do exemplo abaixo</p></figcaption></figure>

#### 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.&#x20;

Veja o exemplo a seguir onde temos `agnostic-monitor-header`, `agnostic-monitor-main` e `agnostic-monitor-footer` :

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoramento de Visibilidade</title>
</head>
<body>
    <!-- agnostic-monitor-header -->
    <div id="agnostic-monitor-header" class="agnostic-monitor">Cabeçalho da Página</div>
    <p>Algum texto aqui que não é monitorado.</p>
    <!-- agnostic-monitor-main -->
    <div id="agnostic-monitor-main" class="agnostic-monitor">Conteúdo Principal</div>
    <p>Outro texto não monitorado.</p>
    <!-- agnostic-monitor-footer -->
    <footer id="agnostic-monitor-footer" class="agnostic-monitor">Rodapé da Página</footer>
</body>
</html>

```

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.&#x20;

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