Criação de cartões de conteúdo personalizados

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: imagens de banner, uma caixa de entrada de mensagens e um carrossel de imagens. Ele pressupõe que você já tenha lido os outros artigos do guia de personalização do Content Card para entender o que pode ser feito por padrão e o que requer código personalizado. É especialmente importante entender como registrar a análise de dados dos seus cartões de conteúdo personalizados.

O Braze oferece diferentes tipos de cartões de conteúdo: imageOnly, captionedImage, classic, classicImage, e control. Eles podem ser usados como ponto de partida para suas implementações, ajustando sua aparência e comportamento.

Você também pode exibir os cartões de conteúdo de uma maneira totalmente personalizada, criando sua própria interface de apresentação preenchida com dados dos modelos Braze. Analisar os objetos do cartão de conteúdo e extrair seus dados de carga útil. Em seguida, use os dados do modelo resultante para preencher sua interface de usuário personalizada - a fase de “execução” da abordagem crawl, walk, run.

Visão geral da personalização

Dependendo do seu caso de uso, a implementação exata do seu cartão de conteúdo personalizado poderá variar um pouco, mas você deverá seguir esta fórmula básica:

1. Crie sua própria interface de usuário
2. Ouça as atualizações de dados
3. Análise de dados com registro manual

Etapa 1: Criar uma interface de usuário personalizada

• android
• ios
• web

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

Em seguida, registre uma função de retorno de chamada para se inscrever para atualizações de dados quando os cartões forem atualizados.

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 do Braze.

Posicionamento 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 um centro de mensagens, um anúncio em banner ou um 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 chave-valor que acionam eventos de clique. Esses pares chave-valor são os identificadores de chave que o aplicativo 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.

Veja um exemplo de configuração do dashboard que pode ser usado para criar dois cartões de mensagem: uma mensagem é uma chamada à ação para que um usuário adicione suas preferências para receber recomendações de leitura direcionadas, e outra fornece um código de cupom para um segmento de novos assinantes.

Exemplos de pares de valores-chave para o cartão de recomendação de leitura podem ser:

• body: Adicione seus interesses ao seu perfil do Politer Weekly para obter recomendações pessoais de leitura.
• style: info
• class_type: notification_center
• card_priority: 1

Exemplos de pares de valores-chave para um novo cupom de assinante podem ser:

• title: Assine para obter jogos ilimitados
• body: Especial de Despedida do Verão - 10% de desconto nos jogos Politer
• buttonText: Assine agora
• estilo: promocional
• class_type: notification_center
• card_priority: 2
• terms: new_subscribers_only

Seus profissionais de marketing poderiam disponibilizar esse cartão de conteúdo apenas para um segmento de novos usuários.

Você trataria cada um dos valores. 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 por seu departamento jurídico. Você decidiria como renderizar style e class_type em seu app ou site.

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

Os cartões de conteúdo podem ser definidos em um feed de carrossel em que o usuário pode deslizar horizontalmente para visualizar cartões adicionais em destaque.

Para criar um carrossel de cartões de conteúdo, implemente uma lógica que observe as alterações em seus cartões de conteúdo e lide com a chegada de cartões de conteúdo. Por padrão, os cartões de conteúdo são classificados por data de criação (o mais recente primeiro), e o usuário vê todos os cartões para os quais é elegível. Implemente a lógica do lado do cliente para exibir um número específico de cartões no carrossel em um determinado momento.

Dito isso, você pode solicitar e aplicar a lógica de exibição adicional de várias maneiras. Por exemplo, você pode selecionar os cinco primeiros objetos do cartão de conteúdo do vetor ou introduzir pares de valores-chave para criar uma lógica condicional.

Se estiver implementando um carrossel como um feed secundário de cartões de conteúdo, consulte Personalização do feed padrão de cartões de conteúdo para saber como classificar os cartões no feed correto com base em pares de valores-chave.

Banner

Os cartões de conteúdo não precisam se parecer com “cartões”. Por exemplo, os cartões de conteúdo de banner podem aparecer como um banner dinâmico que é exibido persistentemente em sua página inicial ou na parte superior de páginas designadas.

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