Criar Content Cards

Este artigo discute a abordagem básica que você usará ao implementar Content Cards 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 Content Cards para entender o que pode ser feito por padrão e o que requer código personalizado. É especialmente útil entender como registrar análise de dados para seus Content Cards 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 Content Cards 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 de Content Cards, inscreva-se nas atualizações de Content Cards. Preste atenção especial às seguintes propriedades:

• id: Representa a string de ID do Content Card. Este é o identificador único usado para registrar análise de dados de Content Cards 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 Content Cards 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 Content Cards 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 Content Card:

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

Posicionamentos de Content Cards

Os Content Cards 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 Content Cards 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 Content Cards 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 Content Cards em seu feed de carrossel totalmente personalizado, permitindo que os usuários deslizem e visualizem cartões adicionais em destaque. Por padrão, os Content Cards 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 Content Cards:

1. Crie uma lógica personalizada que observe as alterações nos seus Content Cards e lide com a chegada de Content Cards.
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 Content Cards do array ou introduzir pares de valores-chave para criar uma lógica condicional.

Apenas imagem

Os Content Cards não precisam se parecer com “cartões”. Por exemplo, os Content Cards 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 Campaign ou etapa do Canvas com um tipo de Content Card Apenas Imagem. Em seguida, defina os pares de valores-chave apropriados para usar os Content Cards como conteúdo suplementar.