Pular para o conteúdo principal

SEO e analytics

Ao final desta página

Produtos que geram resultados ricos na busca, links que exibem prévia correta ao serem compartilhados, e funis de compra visíveis no GA4 e no Meta.

Dados estruturados e meta tags​

CatalogSEO emite tudo que uma página de produto precisa. As páginas prontas já o renderizam; use direto quando construir as suas.

import { CatalogSEO } from '@neverleans-labs/plug-store-core';

function MinhaPaginaDeProduto({ product }) {
  return (
    <>
      <CatalogSEO product={product} />
      {/* … */}
    </>
  );
}
PropPara quê
productGera o JSON-LD Schema.org/Product com preço, disponibilidade e nota
titleAnexado ao nome da loja; cai para nome + slogan
descriptionCai para a descrição do produto, depois para o texto do rodapé
imageCai para a primeira imagem do produto, depois para o logo
urlCai para a localização atual

Ele escreve a meta description, as tags de OpenGraph, as de Twitter card e o script JSON-LD de uma vez só. Os valores vêm da sua configuração, então preencher companyName e tagline melhora todas as páginas ao mesmo tempo.

Para uma página que não é de produto, SEOHead é o componente de mais baixo nível — title, description, canonical, image, url e um objeto jsonLd cru.

Isto é uma SPA renderizada no cliente

O Google executa JavaScript e indexa isto corretamente, mas crawlers que não executam veem uma casca vazia. Se busca orgânica é seu principal canal de aquisição com catálogos grandes, faça prerender ou use um framework com renderização no servidor — veja quando não usar o PlugStore.

Analytics​

Preencha qualquer um dos ids na configuração e o script é injetado, com os eventos começando a fluir:

<CatalogApp
  config={{
    gaId: 'G-XXXXXXXXXX',
    metaPixelId: '1234567890',
  }}
/>

Quatro eventos de e-commerce são emitidos automaticamente:

Evento do PlugStoreGA4Meta Pixel
Página de produto vistaview_itemViewContent
Adicionado ao carrinhoadd_to_cartAddToCart
Checkout iniciadobegin_checkoutInitiateCheckout
Pedido concluídopurchasePurchase

begin_checkout e purchase carregam o valor, a moeda e a lista completa de itens, então os relatórios de monetização do GA4 funcionam sem configuração extra.

Disparar seus próprios eventos​

import { trackEvent } from '@neverleans-labs/plug-store-core';

trackEvent('add_to_cart', {
  value: product.price,
  currency: 'BRL',
  items: [{ item_id: product.id, item_name: product.name, price: product.price, quantity: 1 }],
});

trackEvent aceita os quatro nomes acima e encaminha para as duas plataformas, traduzindo o nome para o Meta. Não faz nada quando nenhum script foi carregado, então é seguro chamar sem condicional — inclusive em desenvolvimento e em testes.

Para instalar os scripts a partir da sua própria árvore de componentes, chame useCatalogAnalytics() uma vez perto da raiz. AnalyticsInjector faz exatamente isso e já é montado pelo CatalogApp.

Favicon​

FaviconInjector grava o config.faviconDataUrl no head do documento em tempo de execução, que é como o painel admin consegue trocar o favicon sem rebuild. Um favicon estático no index.html continua funcionando e é preferível quando você controla o build.

Próximos passos​