Name: Flowsery
Author: Flowsery

O rastreamento de eventos personalizados abre possibilidades poderosas além das visualizações básicas de página. Este guia cobre dois casos de uso práticos: medir quanto tempo os visitantes realmente gastam lendo seus posts de blog e rastrear cadastros de usuários de forma confiável a partir do servidor.

Medindo o Tempo de Leitura de Artigos do Blog

Analytics padrão de visualização de página diz que alguém visitou um post, mas não se realmente o leu. Ao combinar rastreamento de rolagem com cálculos de tempo na página, você pode determinar a leitura genuína.

Definindo "Totalmente Lido"

Um artigo conta como totalmente lido quando duas condições são atendidas: o visitante passou tempo suficiente na página para plausivelmente ter lido o conteúdo, e rolou até o final. O tempo mínimo de leitura é derivado da contagem de palavras do artigo, usando uma velocidade média de leitura de aproximadamente 200-220 palavras por minuto.

Passos de Implementação

1. Adicione o script de rastreamento de eventos

Inclua o snippet de rastreamento de eventos da sua plataforma de analytics no <head> das suas páginas. Se você usa um gerador de sites estáticos como Hugo, isso vai no seu template base.

2. Anexe metadados do artigo

Em cada página de artigo, inclua um pequeno elemento script que carregue o título do artigo e a contagem de palavras como atributos de dados:

<script type="text/javascript" src="/js/article.js"
    id="article"
    data-title="Título do Seu Artigo"
    data-words="1200"></script>

3. Escreva a lógica de rastreamento

O script precisa fazer três coisas:

Primeiro, calcular a posição de rolagem para detectar quando o leitor chega ao final do artigo:

function getScrollPercent() {
    const h = document.documentElement,
          b = document.body,
          st = 'scrollTop',
          sh = 'scrollHeight';
    return Math.floor((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
}

Em seguida, no carregamento da página, leia a contagem de palavras e o título dos atributos de dados e calcule o tempo mínimo de leitura:

window.addEventListener("DOMContentLoaded", () => {
    const script = document.getElementById("article");

    if(script &&
        script.hasAttribute("data-words") &&
        script.hasAttribute("data-title")) {
        const title = script.getAttribute("data-title");
        const minReadingTimeSeconds = Math.floor(
            parseInt(script.getAttribute("data-words")) / 220
        ) * 60;
        const start = new Date().getTime();
        let done = false;

Finalmente, escute eventos de rolagem. Quando o visitante rolar além de 85% da página e tiver gasto pelo menos o tempo mínimo de leitura, dispare um evento personalizado:

        window.addEventListener("scroll", () => {
            if(!done && getScrollPercent() > 85) {
                let readSeconds = Math.floor(
                    (new Date().getTime() - start) / 1000
                );
                if(readSeconds >= minReadingTimeSeconds) {
                    done = true;
                    // Envie evento personalizado com duração e título do artigo
                    trackEvent("Read article", {
                        duration: readSeconds,
                        meta: { title }
                    });
                }
            }
        });
    }
});

4. Revise os dados

Uma vez que os eventos começam a fluir, eles aparecem no seu painel de analytics. Abra a visualização detalhada de eventos para ver quais artigos estão sendo lidos e o tempo médio que os visitantes gastam em cada um.

Rastreando Registros de Usuários a Partir do Backend

Metas de conversão no front-end que disparam quando alguém visita uma página de confirmação são pouco confiáveis, já que qualquer pessoa pode navegar diretamente para essa URL. Uma abordagem mais precisa é enviar um evento personalizado do seu servidor somente após o registro ser realmente confirmado.

Flowsery

—

Analytics orientado para receitas para o seu site

Painel em tempo real

Rastreamento de metas

Rastreamento sem cookies

Aqui está um exemplo em Go:

func SignUp(w http.ResponseWriter, r *http.Request) {
    // Valide captcha, crie conta de usuário, etc.
    if err != nil {
        // Trate o erro
    } else {
        go func() {
            if err := analyticsClient.Event("Registration", 0, nil, r); err != nil {
                // Registre o erro
            }
        }()
    }
    // Renderize a página de resposta
}

Ao disparar o evento somente em uma confirmação de conta bem-sucedida, você obtém uma contagem confiável de cadastros reais em vez de números inflados por visitas incidentais à página.

Conclusão

Eventos personalizados permitem medir virtualmente qualquer coisa que importa para o seu negócio. Apenas tenha cuidado para não anexar informações de identificação pessoal aos eventos, pois isso comprometeria os benefícios de privacidade do analytics sem cookies.