menu Menu

If we have data, let’s look at data. If all we have are opinions, let’s go with mine. - Jim Barksdale (former Netscape CEO)

Fotografia de capa por David Werbrouck, tirada por uma Leica, Camera AG LEICA SL (Typ 601)

Se você é dev com certeza já veio em sua mente:

Toda hora alguém enche meu saco para trackear tal evento!

E essa má vontade existe porquê é mais difícil pro desenvolvedor ver valor, afinal, a maior parte dos devs só se importa em cuspir código.

A má vontade é alimentada pela preguiça dado que esses eventos precisam ser definidos por quem vai consumir os dados em uma análise, ou seja, o dev precisa conversar com outras pessoas pra saber o nome do eventos e dados que precisam enviar.

Aqui na EXT, desde o primeiro dia estamos trackeando eventos para conseguir ter dados para tomada de decisões, afinal tem o famoso ditado:

If we have data, let’s look at data. If all we have are opinions, let’s go with mine. - Jim Barksdale (former Netscape CEO)

A iniciava era ter tracking de eventos tomando cuidado para não virar aquele inferno de não saber quais eventos então sendo enviados, então a estratégia se mantem no mantra que eu uso para fazer frontend após as vindas dos hooks:

Defino o que é e como se comporta com tipos, e implemento o comportamento separando a lógica em hooks

Vou falar melhor sobre esse mantra em outro artigo :P

Aqui usamos Nuxt, mas apesar de no Vue chamarmos de composables, sabemos que é básicamente tudo hook.

Primeiro eu defino uma interface

export enum EventAction {
  CONVERSION = 'conversion',
  CLICK = 'click',
}

export enum EventCategory {
  BLOG = 'blog',
  LANDING_PAGE = 'landing_page',
  PLATFORM = 'platform',
}

export interface Event {
  event: string
  screen: string
  action: EventAction
  category: EventCategory
  label: string
  value: number
  metadata?: Record<string, any>
}

Depois defino o composable

import { Event } from "./Event";
import { useGtm } from '#imports'
import { isProd } from "~/libs/env/env";

export interface IAnalytics {
  trackEvent: (event: Event) => void
}

export function useAnalytics(): IAnalytics {
  const gtm = useGtm()

  gtm?.enable(isProd())
  gtm?.debug(!isProd())

  function trackEvent(event: Event) {
    gtm?.trackEvent(event)
  }

  return { trackEvent }
}

e então defino o evento customizado que eu preciso

import { Event, EventAction, EventCategory } from "./Event";

export function EventNewCityInterest(metadata?: Record<string, any>): Event {
  return {
    event: 'novo_interesse_em_cidade',
    screen: window.location.pathname,
    category: EventCategory.LANDING_PAGE,
    action: EventAction.CLICK,
    label: 'novo_interesse_em_cidade',
    value: 1,
    metadata
  }
}

e quando vou usar em um componente eu só preciso passar o evento para trackEvent pois ele respeita a interface (não preciso importar o composable por conta de uma cortesia do nuxt)

<script setup lang="ts">
import { City } from '@/entities/City'

const analytics = useAnalytics()

const handleCitySelect = (city: City) => {
  const metadata = { ...city }
  analytics.trackEvent(EventNewCityInterest(metadata))
}
</script>

E assim sempre que precisarmos de um evento novo, eu dependo da interface e faço o tracking.

Read next...