Crear tarjetas de contenido

Este artículo analiza el enfoque básico que utilizarás al implementar tarjetas de contenido personalizadas, así como tres casos de uso comunes: imágenes de banners, un buzón de entrada de mensajes y un carrusel de imágenes. Asume que ya has leído los demás artículos de la guía de personalización de la tarjeta de contenido para comprender qué se puede hacer de forma predeterminada y qué requiere código personalizado. Es especialmente útil saber cómo registrar los análisis de tus tarjetas de contenido personalizadas.

Crear una tarjeta

Paso 1: Crea una interfaz de usuario personalizada

• android
• ios
• web

Paso 2: Suscribirse a las actualizaciones de tarjetas

A continuación, registra una función de devolución de llamada para suscribirte a las actualizaciones de datos cuando se actualicen las tarjetas.

Paso 3: Implementar análisis

Las impresiones, clics y descartes de la tarjeta de contenido no se registran automáticamente en tu vista personalizada. Debes implementar cada método respectivo para registrar correctamente todas las métricas de vuelta al análisis del panel de Braze.

Paso 4: Prueba tu tarjeta (opcional)

Para probar tu tarjeta de contenido:

1. Establece un usuario activo en tu aplicación llamando al método changeUser() método
2. En Braze, ve a Campañas y crea una nueva campaña de tarjeta de contenido.
3. En tu campaña, selecciona Prueba y, a continuación, introduce la dirección user-id del usuario de prueba. Cuando estés listo, selecciona Enviar prueba. En breve podrás iniciar una tarjeta de contenido en tu dispositivo.

Colocación de tarjetas de contenido

Las tarjetas de contenido pueden utilizarse de muchas formas distintas. Tres implementaciones comunes son utilizarlos como centro de mensajes, banner publicitario o carrusel de imágenes. Para cada una de estas colocaciones, asignarás pares clave-valor (la propiedad extras del modelo de datos) a tus tarjetas de contenido y, en función de los valores, ajustarás dinámicamente el comportamiento, el aspecto o la funcionalidad de la tarjeta durante el tiempo de ejecución.

Buzón de entrada de mensajes

Las tarjetas de contenido pueden utilizarse para simular un centro de mensajes. En este formato, cada mensaje es su propia tarjeta que contiene pares clave-valor que alimentan los eventos al hacer clic. Estos pares clave-valor son los identificadores clave en los que se fija la aplicación para decidir adónde ir cuando el usuario hace clic en un mensaje del buzón de entrada. Los valores de los pares clave-valor son arbitrarios.

Ejemplo

Por ejemplo, puedes querer crear dos tarjetas de mensajes: una llamada a la acción para que los usuarios habiliten las recomendaciones de lectura y un código de cupón que se entrega a tu nuevo segmento de suscriptores.

Claves como body, title, y buttonText pueden tener simples valores de cadena que tus especialistas en marketing pueden establecer. Claves como terms pueden tener valores que proporcionen una pequeña colección de frases aprobadas por tu departamento Jurídico. Claves como style y class_type tienen valores de cadena que puedes configurar para determinar cómo se muestra tu tarjeta en tu aplicación o sitio web.

• recomendaciones de lectura
• cupón de nuevo suscriptor

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)
                }
            }

        });
    }

Carrusel

Puedes configurar tarjetas de contenido en tu fuente de carrusel totalmente personalizada, permitiendo a los usuarios deslizar y ver tarjetas destacadas adicionales. Por defecto, las tarjetas de contenido se ordenan por fecha de creación (la más reciente primero), y tus usuarios verán todas las tarjetas para las que son elegibles.

Para implementar un carrusel de tarjetas de contenido:

1. Crea una lógica personalizada que observe los cambios en tus tarjetas de contenido y gestione la llegada de tarjetas de contenido.
2. Crea una lógica personalizada del lado del cliente para mostrar un número específico de tarjetas en el carrusel en cualquier momento. Por ejemplo, podrías seleccionar los cinco primeros objetos de la tarjeta de contenido de la matriz o introducir pares clave-valor para construir una lógica condicional en torno a ellos.

Banner

Las tarjetas de contenido no tienen por qué parecer “tarjetas”. Por ejemplo, las tarjetas de contenido pueden aparecer como un banner dinámico que se muestra de forma persistente en tu página de inicio o en la parte superior de las páginas designadas.

Para conseguirlo, tus especialistas en marketing crearán una campaña o paso en Canvas con una tarjeta de contenido de tipo Sólo imagen. A continuación, establece los pares clave-valor adecuados para utilizar las tarjetas de contenido como contenido complementario.