Criação de 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: 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 útil entender como registrar a análise de dados dos seus cartões de conteúdo personalizados.

Criação de um cartão

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.

Etapa 4: Teste seu cartão (opcional)

Para testar seu cartão de conteúdo:

1. Defina um usuário ativo em seu aplicativo chamando o método changeUser() método.
2. No Braze, acesse Campaigns (Campanhas) e crie uma nova campanha de cartão de conteúdo.
3. Em sua campanha, selecione Test (Teste) e insira o usuário teste user-id. Quando estiver pronto, selecione Send Test (Enviar teste). Em breve, será possível iniciar um cartão de conteúdo em seu dispositivo.

posicionamentos de cartão 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.

Exemplo

Por exemplo, talvez você queira criar dois cartões de mensagens: uma chamada para ação para os usuários ativarem as 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 por seu departamento jurídico. Chaves como style e class_type têm valores de string que podem ser definidos para determinar como o cartão será renderizado no app ou site.

• recomendações de leitura
• cupom para novos assinantes

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 em 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 do cartão de conteúdo do vetor ou introduzir pares de valores-chave para criar uma lógica condicional.

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.