Tagueamento automático baseado no Design System do Grupo Boticário
Design Systems criam ecossistemas que abrem portas para inúmeras vantagens. Hoje, falarei de como utilizamos esse ecossistema em prol da coleta de dados comportamentais dos nossos usuários.
Introdução
Caso você não esteja familiarizado com o conceito Design System, este artigo, escrito por Alfredo Schaitza, gerente de UX do Grupo Boticário, é uma leitura extremamente recomendada.
No artigo, Alfredo descreve a motivação, bem como as principais características e desafios do Flora, Design System do Grupo Boticário. Os benefícios advindos de seu uso se traduzem principalmente em:
- Padronização visual dos ambientes digitais do Grupo Boticário
- Redução no tempo de desenvolvimento das soluções
- Maior sinergia entre designers e pessoas desenvolvedoras
- Colaboração inter-squads na criação de novos componentes (inner source!) com os Team Components
Além disso e muito mais que o Design System proporciona, conseguimos otimizar o processo de tagueamento em ambientes digitais que utilizam o Flora.
Mas primeiramente, o que é "tagueamento"? 🤔
Tagueamento
No contexto de Digital Analytics, tagueamento é a prática de coletar dados de navegação dos usuários. O objetivo é responder perguntas como:
- Quantas visitas o meu site recebeu no último mês?
- Quais links e botões do meu ambiente são mais eficientes?
- Quais campanhas e canais geraram melhores resultados?
- A minha experiência mobile é tão boa quanto a experiência desktop?
- Qual a porcentagem de usuários que convertem?
- Qual o nível de retenção dos usuários no meu site?
- E mais centenas de outras perguntas…
Os dados coletados, portanto, viabilizam a extração de diversas informações sobre os ambientes digitais, proporcionando insumos que colaboram na melhoria contínua data-driven dos ambientes.
O processo de tagueamento usual envolve as seguintes etapas:
- Levantamento de métricas e KPI's de negócio do ambiente digital.
- Criação de material técnico para que o time de desenvolvimento implemente os eventos necessários.
- O tagueamento é implementado pelo time de desenvolvimento.
- Ocorre a validação da implementação pelo time de Analytics.
- Desenvolvimento realiza os ajustes, se necessário.
- Revalidação.
- ….
Já deu pra entender o quanto esse processo pode ser extenso e trabalhoso, não é?
Tagueamento Automático
Com a padronização de componentes proporcionada pelo Design System Flora, pudemos implementar a solução de tagueamento automático.
O tagueamento automático traz como principal vantagem tornar o processo descrito acima muito mais eficiente, de forma a reduzir substancialmente o tempo despendido tanto pela equipe de desenvolvimento quanto pela equipe de Analytics.
Com o tagueamento automático, as etapas do processo são:
- Inserção de um script estático no ambiente
- Adição de um data atributo nos elementos a serem tagueados
- Pronto!
Bem mais prático, não?
Funcionamento
A partir da URL da aplicação e de um data atributo dinâmico (opcional), o script do tagueamento automático define o nome do ambiente e a seção atual em que o usuário se encontra. Essa informação irá compor os dados de todos os eventos ocorridos dentro daquele contexto.
O script utiliza a técnica de event delegation para identificar as interações, e então realiza validações no DOM para decidir se aquela interação deve ser registrada como um dado ou não. Em caso positivo, o trecho de código específico para o tratamento daquele componente é executado:
// src/types.d.ts
type components = 'button' | 'input' | 'accordion'
// src/functions/getLabel/index.ts
export const getEventLabel = (floraElement: HTMLElement, componentName: components): string => {
type componentsFuncs = {
[key in components]: () => string;
};
const componentsFunctions: componentsFuncs = {
button: () => {
// código que lida com as interações em botões
},
input: () => {
// código que lida com as interações em inputs
},
accordion: () => {
// código que lida com as interações em accordions
},
// outros componentes...
}
const output = componentsFunctions[componentName]();
return output
}
O tagueamento automático do Grupo Boticário fica hospedado em um endpoint comum para todos os ambientes digitais que utilizarem essa solução. Isso garante a padronização dos dados e a escalabilidade de manutenção do sistema para todos os produtos digitais do grupo.
Visando diferentes cenários e contextos dentre as squads, desenvolvemos duas versões para o tagueamento automático. A diferença é que uma delas coleta dados de todos os componentes Flora interagidos, enquanto a outra versão o faz apenas para componentes sinalizados pelo data atributo citado anteriormente, que é responsável por gerenciar o toggle de on/off da solução para aquele componente.
A segunda alternativa é a recomendada em termos de boas práticas, pois facilita a posterior análise dos dados uma vez que sabemos exatamente o que estamos coletando e o por quê estamos. Além disso, fornece mais organização à base de dados analítica, facilitando a geração de insights.
Conclusão
Com o Flora sendo um ecossistema vivo que está cada vez mais se disseminando dentro do Grupo Boticário, se torna importante aproveitá-lo para criar soluções correlacionadas e integradas.
Os principais ganhos advindos do tagueamento automático são: redução do tempo despendido pelos times, padronização de dados e escalabilidade de manutenção e testes.
É importante ressaltar que o tagueamento automático não substitui inteiramente o tagueamento de eventos personalizados, vide eventos que dependem de callback de servidores e eventos em que o formato da informação não é atendida pela solução.
Não posso deixar de citar aqui o Emerson Viana e o Henrique Lopes, que colaboraram com a viabilização e priorização do projeto frente a diversos outros desafios da squad de Digital Analytics.
Obrigado 👋
