Criar cartões de conteúdo

Este artigo discute a abordagem básica que você usará ao implementar Cartões de conteúdo personalizados, bem como três casos de uso comuns. Ele pressupõe que você já tenha lido os outros artigos do guia de personalização de Cartões de conteúdo para entender o que pode ser feito por padrão e o que requer código personalizado. É especialmente útil entender como registrar análises de dados para seus Cartões de conteúdo personalizados.

Criando um cartão

Etapa 1: Criar uma interface de usuário personalizada

• web
• android
• swift

Etapa 2: Assine as atualizações do cartão

Registre uma função de retorno de chamada para se inscrever em atualizações de dados quando os cartões forem atualizados. Você pode analisar os objetos de cartão de conteúdo e extrair os dados da carga útil, como title, cardDescription e imageUrl, e então usar os dados do modelo resultante para preencher sua interface personalizada.

Para obter os modelos de dados do cartão de conteúdo, inscreva-se nas atualizações de Cartões de conteúdo. Preste atenção especial às seguintes propriedades:

• id: Representa a string de ID do cartão de conteúdo. Este é o identificador único usado para registrar análises de dados de Cartões de conteúdo personalizados.
• extras: Engloba todos os pares de valores-chave do dashboard da Braze.

Todas as propriedades fora de id e extras são opcionais para análise em Cartões de conteúdo personalizados. Para saber mais sobre o modelo de dados, consulte o artigo de integração de cada plataforma: Android, iOS, Web.

• web
• android
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import * as braze from "@braze/web-sdk";

braze.subscribeToContentCardsUpdates((updates) => {
  const cards = updates.cards;
// For example:
  cards.forEach(card => {
    if (card.isControl) {
      // Do not display the control card, but remember to call `logContentCardImpressions([card])`
    }
    else if (card instanceof braze.ClassicCard || card instanceof braze.CaptionedImage) {
      // Use `card.title`, `card.imageUrl`, etc.
    }
    else if (card instanceof braze.ImageOnly) {
      // Use `card.imageUrl`, etc.
    }
  })
});

braze.openSession();

1
2
// subscriber variable
private IEventSubscriber<ContentCardsUpdatedEvent> mContentCardsUpdatedSubscriber;

1
2
3
4
5
6
7
8
9
10
11
12
13
// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);
mContentCardsUpdatedSubscriber = new IEventSubscriber<ContentCardsUpdatedEvent>() {
    @Override
    public void trigger(ContentCardsUpdatedEvent event) {
        // List of all Content Cards
        List<Card> allCards = event.getAllCards();

        // Your logic below
    }
};
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber);
Braze.getInstance(context).requestContentCardsRefresh();

1
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);

1
private var contentCardsUpdatedSubscriber: IEventSubscriber<ContentCardsUpdatedEvent>? = null

1
2
3
4
5
6
7
8
9
10
// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).subscribeToContentCardsUpdates(contentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh()
  // List of all Content Cards
  val allCards = event.allCards

  // Your logic below
}
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh(true)

1
Braze.getInstance(context).removeSingleSubscription(contentCardsUpdatedSubscriber, ContentCardsUpdatedEvent::class.java)

1
let cards: [Braze.ContentCard] = AppDelegate.braze?.contentCards.cards

1
2
3
4
5
6
// This subscription is maintained through a Braze cancellable, which will observe for changes until the subscription is cancelled.
// You must keep a strong reference to the cancellable to keep the subscription active.
// The subscription is canceled either when the cancellable is deinitialized or when you call its `.cancel()` method.
let cancellable = AppDelegate.braze?.contentCards.subscribeToUpdates { [weak self] contentCards in
  // Implement your completion handler to respond to updates in `contentCards`.
}

1
let stream: AsyncStream<[Braze.ContentCard]> = AppDelegate.braze?.contentCards.cardsStream

1
NSArray<BRZContentCardRaw *> *contentCards = AppDelegate.braze.contentCards.cards;

1
2
3
4
// This subscription is maintained through Braze cancellable, which will continue to observe for changes until the subscription is cancelled.
BRZCancellable *cancellable = [self.braze.contentCards subscribeToUpdates:^(NSArray<BRZContentCardRaw *> *contentCards) {
  // Implement your completion handler to respond to updates in `contentCards`.
}];

Etapa 3: Implementar análise de dados

As impressões, os cliques e os descartes de cartão de conteúdo não são registrados automaticamente na sua visualização personalizada. É necessário implementar cada método respectivo para registrar adequadamente todas as métricas na análise de dados do dashboard da Braze.

Etapa 4: Teste seu cartão (opcional)

Para testar seu cartão de conteúdo:

1. Defina um usuário ativo no seu app chamando o método changeUser().
2. Na Braze, acesse Campanhas e crie uma nova campanha de cartão de conteúdo.
3. Na sua campanha, selecione Teste e insira o user-id do usuário teste. Quando estiver pronto, selecione Enviar Teste. Você poderá lançar um cartão de conteúdo no seu dispositivo em breve.

Posicionamentos de Cartões de conteúdo

Os Cartões de conteúdo podem ser usados de muitas maneiras diferentes. Três implementações comuns são usá-los como centro de mensagens, anúncio de imagem dinâmico ou carrossel de imagens. Para cada um desses posicionamentos, você atribuirá pares de valores-chave (a propriedade extras no modelo de dados) aos seus Cartões de conteúdo e, com base nos valores, ajustará dinamicamente o comportamento, a aparência ou a funcionalidade do cartão durante o tempo de execução.

Caixa de entrada de mensagens

Os Cartões de conteúdo podem ser usados para simular um centro de mensagens. Nesse formato, cada mensagem é seu próprio cartão que contém pares de valores-chave que acionam eventos de clique. Esses pares de valores-chave são os identificadores-chave que o app analisa ao decidir para onde ir quando o usuário clica em uma mensagem da caixa de entrada. Os valores dos pares de valores-chave são arbitrários.

Exemplo

Por exemplo, você pode querer criar dois cartões de mensagem: um chamado à ação para os usuários ativarem recomendações de leitura e um código de cupom dado ao seu novo segmento de assinantes.

Chaves como body, title e buttonText podem ter valores simples de string que seus profissionais de marketing podem definir. Chaves como terms podem ter valores que fornecem uma pequena coleção de frases aprovadas pelo seu departamento jurídico. Chaves como style e class_type têm valores de string que você pode definir para determinar como seu cartão é exibido no seu app ou site.

• reading recommendations
• new subscriber coupon

1
2
3
4
5
6
7
8
9
10
11
 private fun createContentCardable(metadata: Map<String, Any>, type: ContentCardClass?): ContentCardable?{
        return when(type){
            ContentCardClass.AD -> Ad(metadata)
            ContentCardClass.MESSAGE_WEB_VIEW -> WebViewMessage(metadata)
            ContentCardClass.NOTIFICATION_CENTER -> FullPageMessage(metadata)
            ContentCardClass.ITEM_GROUP -> Group(metadata)
            ContentCardClass.ITEM_TILE -> Tile(metadata)
            ContentCardClass.COUPON -> Coupon(metadata)
            else -> null
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //...
        listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
           when (val card = dataProvider[position]){
                is WebViewMessage -> {
                    val intent = Intent(this, WebViewActivity::class.java)
                    val bundle = Bundle()
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.contentString)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
                is FullPageMessage -> {
                    val intent = Intent(this, FullPageContentCard::class.java)
                    val bundle = Bundle()
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.icon)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.messageTitle)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.cardDescription)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
private ContentCardable createContentCardable(Map<String, ?> metadata,  ContentCardClass type){
    switch(type){
        case ContentCardClass.AD:{
            return new Ad(metadata);
        }
        case ContentCardClass.MESSAGE_WEB_VIEW:{
            return new WebViewMessage(metadata);
        }
        case ContentCardClass.NOTIFICATION_CENTER:{
            return new FullPageMessage(metadata);
        }
        case ContentCardClass.ITEM_GROUP:{
            return new Group(metadata);
        }
        case ContentCardClass.ITEM_TILE:{
            return new Tile(metadata);
        }
        case ContentCardClass.COUPON:{
            return new Coupon(metadata);
        }
        default:{
            return null;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState)
        //...
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id){
               ContentCardable card = dataProvider.get(position);
               if (card instanceof WebViewMessage){
                    Bundle intent = new Intent(this, WebViewActivity.class);
                    Bundle bundle = new Bundle();
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.getContentString());
                    intent.putExtras(bundle);
                    startActivity(intent);
                }
                else if (card instanceof FullPageMessage){
                    Intent intent = new Intent(this, FullPageContentCard.class);
                    Bundle bundle = Bundle();
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.getIcon());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.getMessageTitle());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.getCardDescription());
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        });
    }

Carrossel

É possível definir Cartões de conteúdo em seu feed de carrossel totalmente personalizado, permitindo que os usuários deslizem e visualizem cartões adicionais em destaque. Por padrão, os Cartões de conteúdo são classificados por data de criação (o mais recente primeiro), e seus usuários verão todos os cartões para os quais são elegíveis.

Para implementar um carrossel de Cartões de conteúdo:

1. Crie uma lógica personalizada que observe as alterações nos seus Cartões de conteúdo e lide com a chegada de Cartões de conteúdo.
2. Crie uma lógica personalizada no lado do cliente para exibir um número específico de cartões no carrossel em um determinado momento. Por exemplo, você pode selecionar os cinco primeiros objetos de cartão de conteúdo do array ou introduzir pares de valores-chave para criar uma lógica condicional.

Apenas imagem

Os Cartões de conteúdo não precisam se parecer com “cartões”. Por exemplo, os Cartões de conteúdo podem aparecer como uma imagem dinâmica que é exibida persistentemente na sua página inicial ou no topo de páginas designadas.

Para isso, seus profissionais de marketing criarão uma campanha ou etapa do canva com um tipo de cartão de conteúdo Apenas Imagem. Em seguida, defina os pares de valores-chave apropriados para usar os Cartões de conteúdo como conteúdo suplementar.