Skip to main content

Guia de consumo de dados do ledger

Este guia descreve como consumir os dados do Ledger em sua aplicação React. O Ledger gerencia informações relacionadas a campanhas de marketing, conversões e dados do usuário, armazenando tudo em cookies para persistência.

Visão Geral​

O Ledger é composto por diversos módulos que trabalham juntos para capturar e armazenar dados importantes. Para consumir esses dados, você pode utilizar as funções expostas pelo módulo ledger.lib.ts e acessar o objeto Ledger através do componente LedgerClient.

Componentes Principais​

1. LedgerClient​

O LedgerClient é um componente React que inicializa o Ledger quando a aplicação é carregada no cliente.

Uso:

Primeiro, certifique-se de que o LedgerClient esteja montado no seu aplicativo, geralmente no componente de nível mais alto, por exemplo o App.tsx:

import { LedgerClient } from  '@/ledger/ledger.client'

export default function App() {
  return (
    <>
      <LedgerClient />
      {/* Outros componentes */}
    </>
  )
}

2. Funções do Ledger​

O módulo ledger.lib.ts expõe várias funções para interagir com o Ledger. As principais são:

  • getLedger(): Recupera o objeto Ledger atual.

  • init(): Inicializa o Ledger, capturando campanhas UTM e atualizando o Ledger conforme necessário.

  • conversions.register: Registra uma conversão associada a um email.

Exemplo de Uso:​

import ledger from './lib/ledger.lib'

// Inicializa o Ledger (já é chamado pelo LedgerClient)
ledger().init()

// Recupera o Ledger atual
const currentLedger = ledger().get()

console.log(currentLedger)

// Adiciona uma conversão
ledger().conversions.register('usuario@example.com', 'conversion123')

Acessando Dados do Ledger​

Após a inicialização, você pode acessar os dados do Ledger em qualquer parte da sua aplicação React:

import { useEffect, useState } from 'react'
import ledger from './lib/ledger.lib'

export default Dashboard(){
  const [ledgerData, setLedgerData] = useState<Ledger | null>(null)

  useEffect(() => {
    const currentLedger = ledger().get()
    setLedgerData(currentLedger)
  }, [])

  if (!ledgerData) return <div>Carregando...</div>

  return (
    <div>
      <h1>Dados do Ledger</h1>
      <pre>{JSON.stringify(ledgerData, null, 2)}</pre>
    </div>
  )
}

Atualizando o Ledger​

Para registrar uma nova conversão, utilize as funções fornecidas pelo módulo conversions.lib.ts.

Registrar uma Conversão:​

import conversions from './lib/conversions.lib'

// Inicializa o módulo de conversões
const { register } = conversions()

// Registra uma conversão
register('usuario@example.com', 'conversion456')

Sincronização com a API​

O Ledger automaticamente tenta sincronizar os dados com a API externa a cada 5 dias. Essa funcionalidade é gerenciada internamente pelo módulo ledger.lib.ts e não requer intervenção manual.

Considerações Finais​

  • Persistência: Os dados do Ledger são armazenados em cookies, garantindo que as informações persistam entre sessões.
  • Modularidade: A estrutura modular permite que você expanda ou modifique funcionalidades específicas sem impactar o restante do sistema.
  • Integração Simples: Com o LedgerClient e as funções expostas, integrar o Ledger em sua aplicação é direto e eficiente.

Leituras relacionadas​