Skip to content

Personalização do feed padrão do cartão de conteúdo

Um feed de cartão de conteúdo é a sequência de cartões de conteúdo em seus aplicativos móveis ou da Web. Este artigo aborda a configuração de quando o feed é atualizado, a ordem dos cartões, o gerenciamento de vários feeds e as mensagens de erro de “feed vazio”. Para obter uma visão geral básica dos tipos de opções de personalização que você tem com os cartões de conteúdo, consulte Visão geral da personalização.

Atualizar o feed

Por padrão, o feed do cartão de conteúdo será atualizado automaticamente nas seguintes instâncias:

  1. Uma nova sessão é iniciada
  2. Quando o feed é aberto e mais de 60 segundos se passaram desde a última atualização

Você também pode configurar o SDK para atualizar manualmente em horários específicos.

Solicite uma atualização manual dos cartões de conteúdo Braze a partir do SDK do Android a qualquer momento, chamando requestContentCardsRefresh .

Solicite uma atualização manual dos cartões de conteúdo da Braze a partir do SDK Swift a qualquer momento, chamando o método requestRefresh na Braze.ContentCards classe:

No Swift, os cartões de conteúdo podem ser atualizados com um manipulador de conclusão opcional ou com um retorno assíncrono usando as APIs de simultaneidade nativas do Swift.

Manipulador de conclusão

Async/Await

Solicite uma atualização manual dos cartões de conteúdo da Braze a partir do SDK para Web a qualquer momento, chamando requestContentCardsRefresh() .

Você também pode chamar getCachedContentCards para obter todos os cartões disponíveis no momento a partir da última atualização dos cartões de conteúdo.

Personalização da ordem dos cartões exibidos

Você pode alterar a ordem em que seus cartões de conteúdo são exibidos. Isso permite ajustar a experiência do usuário, priorizando determinados tipos de conteúdo, como promoções sensíveis ao tempo.

O ContentCardsFragment se baseia em um IContentCardsUpdateHandler para lidar com qualquer classificação ou modificação dos cartões de conteúdo antes que eles sejam exibidos no feed. Um manipulador de atualização personalizado pode ser definido por meio de setContentCardUpdateHandler em seu site ContentCardsFragment.

O seguinte é o padrão IContentCardsUpdateHandler e pode ser usado como ponto de partida para a personalização:

O código-fonte do ContentCardsFragment pode ser encontrado no GitHub .

Para filtrar e classificar os cartões de conteúdo no Jetpack Compose, defina o parâmetro cardUpdateHandler. Por exemplo:

Personalize a ordem de alimentação do cartão modificando diretamente a variável estática Attributes.defaults .

A personalização via BrazeContentCardUI.ViewController.Attributes não está disponível em Objective C.

Personalize a ordem de exibição dos cartões de conteúdo em seu feed usando o param de filterFunction showContentCards():. Por exemplo:

Personalização da mensagem “feed vazio

Quando um usuário não se qualifica para nenhum cartão de conteúdo, o SDK exibe uma mensagem de erro de “feed vazio” informando: “Não temos atualizações. Por favor, verifique novamente mais tarde”. Você pode personalizar essa mensagem de erro de “feed vazio” de forma semelhante à seguinte:

Uma mensagem de erro de feed vazio que diz "Esta é uma mensagem personalizada de estado vazio".

Se o ContentCardsFragment determinar que o usuário não se qualifica para nenhum cartão de conteúdo, ele exibirá a mensagem de erro de feed vazio.

Um adaptador especial, o EmptyContentCardsAdapter substitui o adaptador padrão ContentCardAdapter para exibir essa mensagem de erro. Para definir a própria mensagem personalizada, substitua o recurso de string com_braze_feed_empty.

O estilo usado para exibir essa mensagem pode ser encontrado em Braze.ContentCardsDisplay.Empty e é reproduzido no trecho de código a seguir:

Para saber mais sobre como personalizar os elementos de estilo do cartão de conteúdo, consulte Personalização de estilo.

Para personalizar a mensagem de erro “feed vazio” com o Jetpack Compose, você pode passar um emptyString para ContentCardsList. Você também pode enviar emptyTextStyle para ContentCardListStyling para personalizar ainda mais essa mensagem.

Se você tiver um criador que gostaria de exibir, pode passar emptyComposable para ContentCardsList. Se emptyComposable for especificado, o emptyString não será usado.

Personalize o estado vazio do view controller configurando as opções relacionadas Attributes .

Altere o idioma que aparece automaticamente nos feeds vazios do cartão de conteúdo redefinindo as strings localizáveis do cartão de conteúdo no arquivo ContentCardsLocalizable.strings do aplicativo.

O Web SDK não oferece suporte à substituição programática da linguagem “feed vazio”. Você pode aceitar substituí-lo sempre que o feed for exibido, mas isso não é recomendado porque o feed pode levar algum tempo para ser atualizado e o texto vazio do feed não será exibido imediatamente.

Vários feeds

Os cartões de conteúdo podem ser filtrados em seu app para que apenas cartões específicos sejam exibidos, o que o capacita a ter vários feeds de cartões de conteúdo para diferentes casos de uso. Por exemplo, você pode manter um feed transacional e um feed de marketing. Para isso, crie diferentes categorias de cartões de conteúdo definindo pares de valores-chave no dashboard do Braze. Em seguida, crie feeds em seu app ou site que tratem esses tipos de cartões de conteúdo de forma diferente, filtrando alguns tipos e exibindo outros.

Etapa 1: Definir pares de valores-chave nos cartões

Ao criar uma campanha de cartão de conteúdo, defina os dados do par chave-valor em cada cartão. Você usará esse par chave-valor para categorizar os cartões. Os pares de valores-chave são armazenados na propriedade extras no modelo de dados do cartão.

Para este exemplo, definiremos um par de valores chave com a chave feed_type que designará em qual feed do cartão de conteúdo o cartão deve ser exibido. O valor será o valor de seus feeds personalizados, como home_screen ou marketing.

Etapa 2: Filtrar cartões de conteúdo

Depois que os pares de valores-chave tiverem sido atribuídos, crie um feed com lógica que exibirá os cartões que você deseja exibir e filtrará cartões de outros tipos. Neste exemplo, exibiremos apenas os cartões com um par de valores-chave correspondente a feed_type: "Transactional".

A filtragem dos cartões de conteúdo pode ser feita lendo os pares de valores-chave definidos no dashboard por meio de Card.getExtras() e filtrando (ou executando qualquer outra lógica que desejar) usando um manipulador de atualização personalizado.

Para elaborar, o feed do seu cartão de conteúdo é exibido em um arquivo ContentCardsFragment . O padrão IContentCardsUpdateHandler recebe um ContentCardsUpdatedEvent do SDK da Braze e retorna uma lista de cartões para exibição, mas apenas classifica os cartões e não realiza nenhuma remoção ou filtragem por conta própria.

Para permitir que um ContentCardsFragment filtre, crie um arquivo IContentCardsUpdateHandler . Modifique este IContentCardsUpdateHandler para remover todos os cartões da lista que não correspondam ao valor desejado para o feed_type que definimos anteriormente. Por exemplo:

Depois de criar um IContentCardsUpdateHandler, crie um ContentCardsFragment que o utilize. Esse feed personalizado pode ser usado como qualquer outro ContentCardsFragment. Nas diferentes partes de seu app, exiba diferentes feeds de cartão de conteúdo com base na chave fornecida no dashboard. Cada feed do ContentCardsFragment terá um conjunto exclusivo de cartões exibidos graças ao IContentCardsUpdateHandler personalizado em cada fragmento.

Por exemplo:

Para filtrar quais cartões de conteúdo são mostrados nesse feed, use cardUpdateHandler. Por exemplo:

O exemplo a seguir mostrará o feed dos cartões de conteúdo para cartões do tipo Transactional:

Para ir além, os cartões apresentados no view controller podem ser filtrados definindo a propriedade transform em sua estrutura Attributes para exibir apenas os cartões filtrados por seus critérios.

O exemplo a seguir mostrará o feed dos cartões de conteúdo para cartões do tipo Transactional:

Em seguida, você pode configurar um botão de alternância para seu feed personalizado:

Para saber mais, consulte a documentação do método SDK .

QUÃO ÚTIL FOI ESTA PÁGINA?
New Stuff!