Integração do cartão de conteúdo

Este artigo aborda como configurar cartões de conteúdo para o React Native.

Os SDKs da Braze incluem um feed de cartão padrão para que você comece a usar os cartões de conteúdo. Para mostrar o feed do cartão, você pode usar o método Braze.launchContentCards(). O feed de cartão padrão incluído com o SDK da Braze lidará com toda a análise de dados, rastreamento, dispensas e renderização para os cartões de conteúdo de um usuário.

Personalização

Para criar sua própria interface do usuário, você pode obter uma lista de cartões disponíveis e ouvir as atualizações dos cartões:

1
2
3
4
5
6
7
8
9
10
11
// Set initial cards
const [cards, setCards] = useState([]);

// Listen for updates as a result of card refreshes, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
    setCards(update.cards);
});

// Manually trigger a refresh of cards
Braze.requestContentCardsRefresh();

Você pode usar esses métodos adicionais para criar um feed de cartões de conteúdo personalizado em seu aplicativo:

Teste de exibição do cartão de conteúdo de amostra

Siga estas etapas para testar um cartão de conteúdo de amostra.

1. Defina um usuário ativo no aplicativo React chamando o método Braze.changeUser('your-user-id').
2. Vá para Campaigns (Campanhas ) e siga este guia para criar uma nova campanha de Content Card (Cartão de conteúdo).
3. Crie sua campanha de teste do cartão de conteúdo e vá para a guia Teste. Adicione o mesmo user-id que o usuário teste e clique em Send Test (Enviar teste). Em breve, será possível iniciar um cartão de conteúdo em seu dispositivo.

Para obter mais integrações, siga as instruções de integração do Android ou as instruções de integração do iOS, dependendo de sua plataforma.

Uma implementação de exemplo disso pode ser encontrada no BrazeProject dentro do React Native SDK.

Modelo de dados do cartão de conteúdo

O modelo de dados dos cartões de conteúdo está disponível no React Native SDK. Para uma referência completa do modelo de dados do cartão de conteúdo, consulte a Android e a iOS documentação.

O SDK React Native do Braze tem três tipos exclusivos de cartões de conteúdo que compartilham um modelo básico: somente imagem, imagem com legenda e clássico.

Há também um tipo de cartão de controle especial, que é retornado aos usuários que estão no grupo de controle de um determinado cartão.

Cada tipo herda propriedades comuns de um modelo básico e tem as seguintes propriedades adicionais.

Propriedades do modelo do cartão de conteúdo básico

O modelo de cartão básico fornece o comportamento fundamental para todos os cartões.

Para uma referência completa do cartão base, consulte a documentação do Android e iOS.

Propriedades do modelo de cartão de conteúdo somente de imagem

Os cartões somente de imagem são imagens clicáveis e em tamanho real.

Para uma referência completa do cartão de imagem apenas, consulte a documentação Android e iOS.

Propriedades do modelo de cartão de conteúdo de imagem legendada

Cartões de imagem legendados são imagens em tamanho real clicáveis com texto descritivo acompanhante.

Para uma referência completa do cartão de imagem legendada, consulte a documentação do Android e iOS.

propriedades do modelo de cartão de conteúdo clássico

Os cartões clássicos têm um título, descrição e uma imagem opcional à esquerda do texto.

Para uma referência completa do clássico (anúncio de texto) cartão de conteúdo, consulte a documentação do Android e iOS. Para uma referência completa do cartão de imagem clássico (notícia curta), consulte a documentação do Android e iOS.

Propriedades do modelo do cartão de conteúdo de controle

Os cartões de controle incluem todas as propriedades básicas, com algumas diferenças importantes. E o mais importante:

• A propriedade isControl tem a garantia de ser true.
• A propriedade extras tem a garantia de estar vazia.

Para uma referência completa do cartão de controle, consulte a Android e a iOS documentação.

Suporte a GIFs

• android
• ios