Como consumir dados via API Pública

A Área restrita consome dados diretamente da API Pública.

Você pode fazer isso de duas formas:

• ✅ Usando o public-sdk (recomendado)
• ⚙️ Fazendo chamadas diretas (menos comum)

O public-sdk já resolve:

• Persistência de dados
• Integração com tracking (GA4)
• Padronização
• Suporte de tipagem da API em Typescript

---

🔌Forma simples: usando o public-sdk

A forma mais simples é consumir dados utilizando o módulo Api.

🎯 Exemplo simples (sem tracking)

1import { ref } from 'vue';
2import { type ApiTypes, Api } from '@uappi/public-sdk';
3
4const customer = ref<ApiTypes.CustomerResponse>();
5
6onMounted(async () => {
7  customer.value = await Api.customer
8    .detail({
9      fields: ['documents', 'addresses', 'flags', 'pointSystemAmount'],
10    })
11    .then(data => {
12      customer.value = data;
13    })
14    .catch(() => {
15      customer.value = undefined;
16    });
17});

📊 Com tracking automático (GA4)

Se o dado impacta experiência ou jornada do cliente e precise mensurar essas informações pelo Google Analytics, utilize Tracking.

Isso mantém sua loja enviando eventos automaticamente.

1import { ref } from 'vue';
2import { type ApiTypes, Tracking } from '@uappi/public-sdk';
3
4const customer = ref<ApiTypes.CustomerResponse>();
5
6onMounted(async () => {
7  customer.value = await Tracking.customer
8    .detail({
9      fields: ['documents', 'addresses', 'flags', 'pointSystemAmount'],
10    })
11    .then(data => {
12      customer.value = data;
13    })
14    .catch(() => {
15      customer.value = undefined;
16    });
17});

📌 A diferença aqui é:

Método	Quando usar
Api	Apenas consumo de dados
Tracking	Dados que fazem parte da jornada do cliente

🔎 Quando usar Api vs Tracking

O public-sdk disponibiliza dois modos de consumo de dados:

• Api
• Tracking

Ambos retornam os mesmos dados da API Pública. A diferença está no envio automático de eventos de comportamento do cliente.

📡 Api

Use quando deseja apenas consumir dados da loja.

1Api.customer.detail()

• Retorna os dados
• Não envia eventos de analytics

Ideal para:

• Informações irrelevantes para mensuração da jornada do cliente
• Dados que não representam interação ou visualização relevante do cliente

📊 Tracking

Use quando o conteúdo exibido representa interação relevante na jornada do cliente.

1Tracking.customer.detail()

• Retorna os dados
• Dispara eventos automaticamente no dataLayer
• Alimenta o tracking da loja

🎯 Por que isso existe?

Na plataforma Uappi, o tracking é baseado no modelo de eventos do GA4 (Google Analytics 4).

É uma boa prática enviar informações de visualização para que o time de mídia possa:

• acompanhar performance
• medir impacto visual
• analisar comportamento do cliente

🧩 Exemplo prático: Banner

Ao utilizar:

1Tracking.customer.detail('main-banner')

Além de buscar os dados do banner, o SDK envia automaticamente o evento view_promotion

Esse é um evento padrão do GA4 utilizado para registrar a visualização de promoções.

Referência oficial do evento:

• https://developers.google.com/analytics/devguides/collection/ga4/reference/events?hl=pt-br&client_type=gtag#view_promotion

Referência geral de eventos GA4:

• https://developers.google.com/analytics/devguides/collection/ga4/reference/events

👀 Como esse evento aparece na prática?

Quando o Tracking é utilizado, o evento é enviado ao dataLayer da página.

Exemplo real de visualização:

• event: view_promotion
• promotion_id
• promotion_name
• creative_name
• creative_slot
• index

Essas informações permitem que ferramentas de análise identifiquem:

• Qual banner foi visto
• Em qual contexto

⚠️ Uso sem o Public SDK

É possível consumir os dados da API Pública utilizando diretamente bibliotecas como o axios.

Essa abordagem funciona e pode ser adotada em cenários específicos.

No entanto, ao optar por não utilizar o public-sdk, você deixará de contar com recursos importantes fornecidos pela plataforma:

• Tipagens oficiais da API escritas em TypeScript
• Integração automática com eventos de tracking (GA4)
• Configuração nativa de persistência de dados entre Store Theme, Checkout e Área Restrita

Isso significa que toda essa responsabilidade passará a ser do próprio projeto.

Por esse motivo, recomendamos o uso do public-sdk sempre que possível, garantindo padronização, rastreabilidade e compatibilidade com o ecossistema da plataforma Uappi.

🏁 Próximo passo

Agora que você sabe como consumir dados, entenda como funciona a persistencia de dados na Área restrita.

Persistência de dados na Área restrita: como funciona por baixo dos panos