Design orientado a dados: A importância do tagueamento

Como o tagueamento no Google Analytics impulsiona o design orientado a dados, melhorando a coleta e análise para produtos.Google Analitycs — Fonte GoogleVocê já ouviu falar em Data-Driven Design? Talvez esse termo não seja familiar, mas considere se já pensou em como melhorar seus designs buscando dados qualitativos e quantitativos para entender melhor o comportamento dos usuários, melhorar a usabilidade e aumentar o retorno do produto. Em essência, se você buscou tomar decisões com base em dados, em vez de se basear em intuição ou apenas experiência, isso é o que chamamos de Design Orientado a Dados.No cenário atual, onde a Inteligência Artificial está redefinindo fronteiras, a automação acelera processos e a agilidade é o novo normal, a capacidade de captar e utilizar dados de forma eficiente tornou-se um diferencial competitivo inegável. Sendo assim, um produto não deveria, então, já nascer com uma estratégia robusta de coleta e análise de dados?Coletando dados de forma eficiente e organizadaHá diversas maneiras de coletar dados, especialmente para web ou aplicativos, e uma delas é através do Google Analytics (GA). Implantar o Google Analytics desde o início de um projeto permite:Entender como os usuários interagem com o produtoIdentificar rapidamente problemas na experiência do usuárioAcompanhar métricas-chave ligadas aos objetivos de negócioTomar decisões estratégicas baseadas em dados reais e históricosNão vou mentir para você: não sou especialista em UX analytics, mas estou gradualmente construindo meu conhecimento. E nessa jornada, percebi que para a coleta de dados ser efetiva no Google Analytics, é necessário um bom tagueamento.Tagueamento: A chave para uma boa coleta no GA“Taguear” significa adicionar códigos ou marcadores (tags) a elementos específicos, é como colocar um sensor invisível em cada elemento da sua interface. Esses “sensores” nos permitem coletar dados precisos sobre como os usuários interagem com o produto. Por exemplo, você colocou um sensor na página inicial e um lá no botão finalizar compra. Quando os usuários navegarem esses sensores são acionados e no final você tem os números disso, informações como: 100 pessoas entraram no site, só 1 de fato finalizou a compra.De forma um pouco mais técnica, a tag é um pequeno pedaço de JavaScript que precisa ser adicionado a todas as páginas do seu site. Respira, o desenvolvedor que irá implementar essas tags, como designer, você vai ajudar a montar um processo para facilitar a vida dele e a sua quando for analisar os dados. Mas para montar um processo interessante, você precisa entender pelo menos um pouco de como funciona.No GA existem 3 conceitos importantes que são: evento, métricas e dimensões.O evento: É a espinha dorsal de como o GA coleta e processa dados. Os eventos são as ações realizadas pelas pessoas usuárias, as quais mapeamos.Para dar uma visão completa de como os usuários interagem com seu produto, o GA coleta e mede dados com os eventos e compila todos os dados em relatórios. Para representar esses dados nesses relatórios, o GA usa dimensões e métricas.As dimensões respondem às perguntas “quem, o quê, qual ou onde?”, enquanto as métricas respondem à pergunta “quantos?”Dimensões: São expressas por valores não numéricos, como cidade, dispositivo, página, origem/mídia, palavras-chave, nome do evento, entre outros. Por exemplo “Qual dispositivo é mais comumente usado?”Métricas: São avaliações quantitativas dos dados, expressas por números, como número de visitas, total de usuários, tempo da sessão, entre outros. Por exemplo: “Quantos usuários visitaram meu site ontem?Agora, talvez, você consiga entender a importância de um processo de tagueamento, ele tem como objetivo facilitar a coleta e análise de dados. Imagine este cenário: um Google Analytics implementado sem plano, tagueando elementos de forma aleatória. Ao criar dashboards ou analisar dados, encontrar padrões seria um quebra-cabeça infernal.Sem uma estrutura coerente, nos arriscamos a:Nomes de eventos inconsistentes, dificultando a identificação de padrõesDados importantes não rastreados, criando pontos cegos na análiseExcesso de informações irrelevantes, ofuscando insights valiososDificuldade em criar relatórios significativos devido à falta de padronizaçãoPor outro lado, um processo de tagueamento bem planejado garante que cada dado coletado tenha um propósito e esteja alinhado com os objetivos do negócio. Isso não apenas simplifica a análise futura, mas assegura decisões fundamentadas em dados confiáveis e relevantes. Mas lembre-se de que o tagueamento é um esforço multidisciplinar, envolvendo equipes de produto, desenvolvimento e dados.Um exemplo de modelo de tagueamentoProvavelmente, existem vários modelos de processos de tagueamento, mas apresentarei um processo usado no meu time de Design, bastante elogiado pelos desenvolvedores, e consiste em 4 etapas:Etapa 1: Definição de objetivosAs ferramentas não nos dizem o que deve ser feito. Elas só mostram o que est

Jan 28, 2025 - 11:16

Design orientado a dados: A importância do tagueamento

Como o tagueamento no Google Analytics impulsiona o design orientado a dados, melhorando a coleta e análise para produtos.

Interface do Google Analitycs para uma loja fictícia. A tela exibe gráficos de linha, de barras e de pizza, que apresentam métricas principais, como visualizações, tempo médio de engajamento, usuários e eventos registrados. — Google Analitycs — Fonte Google

Você já ouviu falar em Data-Driven Design? Talvez esse termo não seja familiar, mas considere se já pensou em como melhorar seus designs buscando dados qualitativos e quantitativos para entender melhor o comportamento dos usuários, melhorar a usabilidade e aumentar o retorno do produto. Em essência, se você buscou tomar decisões com base em dados, em vez de se basear em intuição ou apenas experiência, isso é o que chamamos de Design Orientado a Dados.

No cenário atual, onde a Inteligência Artificial está redefinindo fronteiras, a automação acelera processos e a agilidade é o novo normal, a capacidade de captar e utilizar dados de forma eficiente tornou-se um diferencial competitivo inegável. Sendo assim, um produto não deveria, então, já nascer com uma estratégia robusta de coleta e análise de dados?

Coletando dados de forma eficiente e organizada

Há diversas maneiras de coletar dados, especialmente para web ou aplicativos, e uma delas é através do Google Analytics (GA). Implantar o Google Analytics desde o início de um projeto permite:

Entender como os usuários interagem com o produto
Identificar rapidamente problemas na experiência do usuário
Acompanhar métricas-chave ligadas aos objetivos de negócio
Tomar decisões estratégicas baseadas em dados reais e históricos

Não vou mentir para você: não sou especialista em UX analytics, mas estou gradualmente construindo meu conhecimento. E nessa jornada, percebi que para a coleta de dados ser efetiva no Google Analytics, é necessário um bom tagueamento.

Tagueamento: A chave para uma boa coleta no GA

“Taguear” significa adicionar códigos ou marcadores (tags) a elementos específicos, é como colocar um sensor invisível em cada elemento da sua interface. Esses “sensores” nos permitem coletar dados precisos sobre como os usuários interagem com o produto. Por exemplo, você colocou um sensor na página inicial e um lá no botão finalizar compra. Quando os usuários navegarem esses sensores são acionados e no final você tem os números disso, informações como: 100 pessoas entraram no site, só 1 de fato finalizou a compra.

De forma um pouco mais técnica, a tag é um pequeno pedaço de JavaScript que precisa ser adicionado a todas as páginas do seu site. Respira, o desenvolvedor que irá implementar essas tags, como designer, você vai ajudar a montar um processo para facilitar a vida dele e a sua quando for analisar os dados. Mas para montar um processo interessante, você precisa entender pelo menos um pouco de como funciona.

No GA existem 3 conceitos importantes que são: evento, métricas e dimensões.

O evento: É a espinha dorsal de como o GA coleta e processa dados. Os eventos são as ações realizadas pelas pessoas usuárias, as quais mapeamos.

Para dar uma visão completa de como os usuários interagem com seu produto, o GA coleta e mede dados com os eventos e compila todos os dados em relatórios. Para representar esses dados nesses relatórios, o GA usa dimensões e métricas.

As dimensões respondem às perguntas “quem, o quê, qual ou onde?”, enquanto as métricas respondem à pergunta “quantos?”

Dimensões: São expressas por valores não numéricos, como cidade, dispositivo, página, origem/mídia, palavras-chave, nome do evento, entre outros. Por exemplo “Qual dispositivo é mais comumente usado?”

Métricas: São avaliações quantitativas dos dados, expressas por números, como número de visitas, total de usuários, tempo da sessão, entre outros. Por exemplo: “Quantos usuários visitaram meu site ontem?

Agora, talvez, você consiga entender a importância de um processo de tagueamento, ele tem como objetivo facilitar a coleta e análise de dados. Imagine este cenário: um Google Analytics implementado sem plano, tagueando elementos de forma aleatória. Ao criar dashboards ou analisar dados, encontrar padrões seria um quebra-cabeça infernal.

Sem uma estrutura coerente, nos arriscamos a:

Nomes de eventos inconsistentes, dificultando a identificação de padrões
Dados importantes não rastreados, criando pontos cegos na análise
Excesso de informações irrelevantes, ofuscando insights valiosos
Dificuldade em criar relatórios significativos devido à falta de padronização

Por outro lado, um processo de tagueamento bem planejado garante que cada dado coletado tenha um propósito e esteja alinhado com os objetivos do negócio. Isso não apenas simplifica a análise futura, mas assegura decisões fundamentadas em dados confiáveis e relevantes. Mas lembre-se de que o tagueamento é um esforço multidisciplinar, envolvendo equipes de produto, desenvolvimento e dados.

Um exemplo de modelo de tagueamento

Provavelmente, existem vários modelos de processos de tagueamento, mas apresentarei um processo usado no meu time de Design, bastante elogiado pelos desenvolvedores, e consiste em 4 etapas:

Etapa 1: Definição de objetivos

As ferramentas não nos dizem o que deve ser feito. Elas só mostram o que está acontecendo a partir de uma configuração.

Saber o que esperamos coletar no futuro, nos ajuda a preparar essas ferramentas de forma que elas nos deem o que queremos. Portanto nessa etapa, o designer e a pessoa de produto devem alinhar os objetivos, as métricas e KPI para o produto e assim usarem o Google Analytics (GA) para medir e analisar se alcançaram o que foi proposto.

Quadro com quatro colunas: “Objetivo”, “Motivo”, “KPI (Indicador)” e “Métrica”, com perguntas guia no cabeçalho e notas adesivas para preencher abaixo. — Modelo de planejamento de objetivos — Fonte Time Design Valid

Etapa 2: Mapear o fluxo

Nesta etapa, o designer mapeia todas as telas do fluxo, identificando e numerando cada interação do usuário que requer monitoramento. Esses pontos numerados serão os locais específicos onde as tags serão aplicadas para coleta de dados.

Exemplos de elementos a serem tagueados incluem: links, botões, caixa de seleção, menu suspenso e campos de inputs de texto.

Fluxo dividido em três telas com áreas identificadas para tagueamento. Cada área está numerada e destacada em retângulos com bordas tracejadas. — Modelo de fluxo de navegação com marcações da interação— Fonte Time Design Valid

Etapa 3: Criação do mapa de tagueamento

No Google Analytics) um evento é usado para rastrear interações específicas dos usuários que não são capturadas automaticamente, como cliques em botões, downloads, visualizações de vídeos ou preenchimentos de formulários. Esses eventos são configurados para enviar informações detalhadas para o GA, permitindo análises de como os usuários interagem com o produto.

Quando o desenvolvedor, pelo menos onde trabalho a responsabilidade do time de desenvolvimento, vai criar o evento no GA, ele precisa levar em consideração a estrutura de um evento.

O evento possui tipo: Pode ser um GA4 Default (eventos da Google que sempre estarão ativos) ou um evento personalizado (eventos que podemos criar)
O evento possui informação: Categoria (organiza eventos em grupos), parâmetros (dados adicionais anexados aos eventos) e rótulos (parâmetro opcional que oferece uma descrição adicional)

Exemplo de código JavaScript para envio de eventos ao Google Analytics usando a função sendGTMEvent, com parâmetros como event, name, value, category e nonInteraction. — Exemplo de código para o GA — print de tela

O designer participa ativamente ao nomear os eventos e determinar qual ação acionará o início de cada evento. Já a equipe de dados define os parâmetros associados (personalizados ou padrão), enquanto o desenvolvedor é responsável pela implementação do código.

Para alinhar o trabalho em equipe, garantir padronização e facilitar a conferência, utilizamos uma tabela que se relaciona com o fluxo mapeado (etapa 2). A tabela inclui a numeração do evento (conforme etapa 2), o gatilho que aciona a ação, o nome do evento, os parâmetros usados, a categoria, rótulo e outras informações.

Dicas: Você não precisa ter o mesmo processo que estou apresentando, então tenha em mente que os principais elementos para passar para o desenvolvedor são nome do evento, parâmetro e categoria. E que você precisa de um local onde qualquer um possa consultar posteriormente. Além disso, não se esqueça de criar um padrão para nomear eventos, como por exemplo nome=[fluxo] [etapa] [ação].

Tabela de planejamento de eventos para tagueamento no Google Analytics com colunas para número do evento, fluxo, gatilho, nome do evento, parâmetros, categoria, rótulo, interação, implementação e observações. — Modelo de mapa de evento — Fonte Time Design Valid

Etapa 4: Implementação e validação

Nessa etapa ocorre a implementação e a validação dos eventos. A equipe de desenvolvimento implementa os eventos conforme os critérios estabelecidos previamente, enquanto a equipe de dados valida a integridade e precisão das informações coletadas.

Etapa 5: Acompanhamento e melhoria contínua

Após a implementação e as interações do usuário, o Google processará automaticamente os dados em até 72 horas. Com essas informações disponíveis, é possível identificar padrões, medir o desempenho e implementar melhorias contínuas para otimizar a experiência do usuário e alcançar os objetivos do produto. Para obter insights mais ricos, é aconselhável esperar até que haja uma quantidade significativa de dados.

Um tagueamento bem estruturado não apenas garante a precisão dos dados coletados, mas também fornece insights valiosos que orientam decisões estratégicas. Ao colaborar estreitamente com as equipes de desenvolvimento, produto e análise de dados, o designer pode avançar de simples suposições para ações fundamentadas, melhorando a experiência do usuário e atingindo os objetivos de negócios.

Créditos especiais para Tatiane Francisco e Jeferson Ramos⚡️ do time de design da Valid, que montaram o processo de tagueamento na empresa.