Skip to content

Tarjetas de contenido

Obtén información sobre las tarjetas de contenido para el SDK de Braze, incluidos los distintos modelos de datos y las propiedades específicas de las tarjetas disponibles para tu aplicación.

Prerequisites

Before you can use Braze Content Cards, you’ll need to integrate the Braze Android SDK into your app. However, no additional setup is required.

Google fragments

In Android, the Content Cards feed is implemented as a fragment available in the Braze Android UI project. The ContentCardsFragment class will automatically refresh and display the contents of the Content Cards and log usage analytics. The cards that can appear in a user’s ContentCards are created on the Braze dashboard.

To learn how to add a fragment to an activity, see Google’s fragments documentation.

Card types and properties

The Content Cards data model is available in the Android SDK and offers the following unique Content Card types. Each type shares a base model, which allows them to inherit common properties from the base model, in addition to having their own unique properties. For full reference documentation, see com.braze.models.cards.

Base card model

The base card model provides foundational behavior for all cards.

Image only

Image only cards are clickable full-sized images.

Captioned image

Captioned image cards are clickable, full-sized images with accompanying descriptive text.

Classic

A classic card without an image included will result in a text announcement card. If an image is included, you will receive a short news card.

Card methods

All Card data model objects offer the following analytics methods for logging user events to Braze servers.

Prerequisites

Before you can use Content Cards, you’ll need to integrate the Braze Swift SDK into your app. However, no additional setup is required.

View controller contexts

The default Content Cards UI can be integrated from the BrazeUI library of the Braze SDK. Create the Content Cards view controller using the braze instance. If you wish to intercept and react to the Content Card UI lifecycle, implement BrazeContentCardUIViewControllerDelegate as the delegate for your BrazeContentCardUI.ViewController.

The BrazeUI library of the Swift SDK provides two default view controller contexts: navigation or modal. This means you can integrate Content Cards in these contexts by adding a few lines of code to your app or site. Both views offer customization and styling options as described in the customization guide. You can also create a custom Content Card view controller instead of using the standard Braze one for even more customization options—refer to the Content Cards UI tutorial for an example.

Navigation

A navigation controller is a view controller that manages one or more child view controllers in a navigation interface. Here is an example of pushing a BrazeContentCardUI.ViewController instance into a navigation controller:

1
2
3
4
5
6
7
func pushViewController() {
  guard let braze = AppDelegate.braze else { return }
  let contentCardsController = BrazeContentCardUI.ViewController(braze: braze)
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  contentCardsController.delegate = self
  self.navigationController?.pushViewController(contentCardsController, animated: true)
}
1
2
3
4
5
6
- (void)pushViewController {
  BRZContentCardUIViewController *contentCardsController = [[BRZContentCardUIViewController alloc] initWithBraze:self.braze];
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  [contentCardsController setDelegate:self];
  [self.navigationController pushViewController:contentCardsController animated:YES];
}

Modal

Use modal presentations to create temporary interruptions in your app’s workflow, such as prompting the user for important information. This model view has a navigation bar on top and a Done button on the side of the bar. Here is an example of pushing a BrazeContentCard.ViewController instance into a modal controller:

1
2
3
4
5
6
7
func presentModalViewController() {
  guard let braze = AppDelegate.braze else { return }
  let contentCardsModal = BrazeContentCardUI.ModalViewController(braze: braze)
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  contentCardsModal.viewController.delegate = self
  self.navigationController?.present(contentCardsModal, animated: true, completion: nil)
}
1
2
3
4
5
6
- (void)presentModalViewController {
  BRZContentCardUIModalViewController *contentCardsModal = [[BRZContentCardUIModalViewController alloc] initWithBraze:AppDelegate.braze];
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  [contentCardsModal.viewController setDelegate:self];
  [self.navigationController presentViewController:contentCardsModal animated:YES completion:nil];
}

For example usage of BrazeUI view controllers, check out the corresponding Content Cards UI samples in our Examples app.

Base card model

The Content Cards data model is available in the BrazeKit module of the Braze Swift SDK. This module contains the following Content Card types, which are an implementation of the Braze.ContentCard type. For a full list of Content Card properties and their usage, see ContentCard class.

  • Image only
  • Captioned image
  • Classic
  • Classic image
  • Control

To access the Content Cards data model, call contentCards.cards on your braze instance. See Logging analytics for more information on subscribing to card data.

Card methods

Each card is initialized with a Context object, which contains various methods for managing your card’s state. Call these methods when you want to modify the corresponding state property on a particular card object.

For more details, refer to the Context class documentation

Prerequisites

Before you can use Content Cards, you’ll need to integrate the Braze Web SDK into your app. However, no additional setup is required. To build your own UI instead, see Content Card Customization Guide.

Standard feed UI

To use the included Content Cards UI, you’ll need to specify where to show the feed on your website.

In this example, we have a <div id="feed"></div> in which we want to place the Content Cards feed. We’ll use three buttons to hide, show, or toggle (hide or show based on its current state) the feed.

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
<button id="toggle" type="button">Toggle Cards Feed</button>
<button id="hide" type="button">Hide Cards Feed</button>
<button id="show" type="button">Show Cards Feed</button>

<nav>
    <h1>Your Personalized Feed</h1>
    <div id="feed"></div>
</nav>

<script> 
   const toggle = document.getElementById("toggle");
   const hide = document.getElementById("hide");
   const show = document.getElementById("show");
   const feed = document.getElementById("feed");
    
   toggle.onclick = function(){
      braze.toggleContentCards(feed);    
   }
    
   hide.onclick = function(){
      braze.hideContentCards();
   }
    
   show.onclick = function(){
      braze.showContentCards(feed);    
   }
</script>

When using the toggleContentCards(parentNode, filterFunction) and showContentCards(parentNode, filterFunction) methods, if no arguments are provided, all Content Cards will be shown in a fixed-position sidebar on the right-hand side of the page. Otherwise, the feed will be placed in the specified parentNode option.

See the SDK reference docs for more information on Content Card toggling.

Card types and properties

The Content Cards data model is available in the Web SDK and offers the following Content Card types: ImageOnly, CaptionedImage, and ClassicCard. Each type inherits common properties from a base model Card and has the following additional properties.

Base card model

All Content Cards have these shared properties:

Image only

ImageOnly cards are clickable full-sized images.

Captioned image

CaptionedImage cards are clickable, full-sized images with accompanying descriptive text.

Classic

The ClassicCard model can contain an image with no text or a text with image.

Control group

If you use the default Content Cards feed, impressions and clicks will be automatically tracked.

If you use a custom integration for Content Cards, you need need log impressions when a Control Card would have been seen. As part of this effort, make sure to handle Control cards when logging impressions in an A/B test. These cards are blank, and while they aren’t seen by users, you should still log impressions in order to compare how they perform against non-Control cards.

To determine if a Content Card is in the Control group for an A/B test, check the card.isControl property (Web SDK v4.5.0+) or check if the card is a ControlCard instance (card instanceof braze.ControlCard).

Card methods

For more details, refer to the SDK reference documentation

Using Google Tag Manager

Google Tag Manager works by injecting the Braze CDN (a version of our Web SDK) directly into your website code, which means that all SDK methods are available just as if you had integrated the SDK without Google Tag Manager, except when implementing Content Cards.

Setting up Content Cards

For a standard integration of the Content Card feed, you can use a Custom HTML tag in Google Tag Manager. Add the following to your Custom HTML tag, which will activate the standard Content Card feed:

1
2
3
<script>
   window.braze.showContentCards();
</script>

Tag Configuration in Google Tag Manager of a Custom HTML tag that shows the Content Card feed.

For more freedom over customizing the appearance of Content Cards and their feed, you can directly integrate Content Cards into your native website. There are two approaches you can take with this: using the standard feed UI or creating a custom feed UI.

When implementing the standard feed UI, Braze methods must have window. added to the start of the method. For example, braze.showContentCards should instead be window.braze.showContentCards.

For custom feed styling, the steps are the same as if you had integrated the SDK without GTM. For example, if you want to customize the width of the Content Card feed, you can paste the following into your CSS file:

1
2
3
body .ab-feed { 
    width: 800px;
}

Upgrading templates

To upgrade to the latest version of the Braze Web SDK, take the following three steps in your Google Tag Manager dashboard:

  1. Update tag template
    Go to the Templates page within your workspace. Here you should see an icon indicating an update is available.

    Templates page showing an update is available

    Click that icon and after reviewing the change, click to Accept Update.

    A screen comparing the old and new tag templates with a button to "Accept Update"

  2. Update version number
    Once your tag template has been updated, edit the Braze Initialization Tag, and update the SDK version to the most recent major.minor version. For example, if the latest version is 4.1.2, enter 4.1. You can view a list of SDK versions in our changelog.

    Braze Initialization Template with an input field to change the SDK Version

  3. QA and publish
    Verify the new SDK version is working using Google Tag Manager’s debugging tool prior to publishing an update to your tag container.

Troubleshooting

Enable tag debugging

Each Braze tag template has an optional GTM Tag Debugging checkbox which can be used to log debug messages to your web page’s JavaScript console.

Google Tag Manager's Debug tool

Enter debug mode

Another way to help debug your Google Tag Manager integration is using Google’s Preview mode feature.

This will help identify what values are being sent from your web page’s data layer to each triggered Braze tag and will also explain which tags were or were not triggered.

The Braze Initialization Tag summary page provides an overview of the tag, including information on which tags were triggered.

Enable verbose logging

To allow Braze technical support to access logs while testing, you can enable verbose logging on your Google Tag Manager integration. These logs will appear in the Console tab of your browser’s developer tools.

In your Google Tag Manager integration, navigate to your Braze Initialization Tag and select Enable Web SDK Logging.

The Braze Initialization Tag summary page with the option to Enable Web SDK Logging turned on.

Prerequisites

Before you can use this feature, you’ll need to integrate the Cordova Braze SDK.

Fuentes de tarjetas

El SDK de Braze incluye una fuente de tarjetas predeterminada. Para mostrar la fuente de tarjetas predeterminada, puedes utilizar el método launchContentCards(). Este método gestiona todo el seguimiento de análisis, los descartes y la representación de las tarjetas de contenido de un usuario.

Tarjetas de contenido

Puedes utilizar estos métodos adicionales para crear una fuente personalizada de tarjetas de contenido dentro de tu aplicación:

Acerca de las tarjetas de contenido de Flutter

El SDK de Braze incluye una fuente de tarjetas predeterminada para que empieces a utilizar las tarjetas de contenido. Para mostrar la fuente de la tarjeta, puedes utilizar el método braze.launchContentCards(). La fuente predeterminada de tarjetas incluida en el SDK de Braze gestionará todos los análisis de seguimiento, descarte de tarjetas y representación de las tarjetas de contenido de un usuario.

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Flutter Braze.

Métodos de tarjeta

Puedes utilizar estos métodos adicionales para crear una fuente de tarjetas de contenido personalizada dentro de tu aplicación utilizando los siguientes métodos disponibles en la interfaz pública del complemento:

Recepción de datos de la tarjeta de contenido

Para recibir datos de la tarjeta de contenido en tu aplicación Flutter, BrazePlugin admite el envío de datos de la tarjeta de contenido mediante Dart Streams.

El objeto BrazeContentCard admite un subconjunto de campos disponibles en los objetos del modelo nativo, como description, title, image, url, extras, etc.

Paso 1: Escucha los datos de la tarjeta de contenido en la capa Dart

Para recibir los datos de la tarjeta de contenido en la capa Dart, utiliza el código siguiente para crear un StreamSubscription y llamar a braze.subscribeToContentCards(). Recuerda cancel() la suscripción de streaming cuando ya no la necesites.

1
2
3
4
5
6
7
8
9
// Create stream subscription
StreamSubscription contentCardsStreamSubscription;

contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
  // Handle Content Cards
}

// Cancel stream subscription
contentCardsStreamSubscription.cancel();

Para ver un ejemplo, consulta main.dart en nuestra aplicación de ejemplo.

Paso 2: Transmite los datos de la tarjeta de contenido de la capa nativa

Para recibir los datos de la capa Dart del paso 1, añade el siguiente código para reenviar los datos de la tarjeta de contenido desde las capas nativas.

Los datos de la tarjeta de contenido se envían automáticamente desde la capa de Android.

  1. Implementa contentCards.subscribeToUpdates para suscribirte a las actualizaciones de las tarjetas de contenido como se describe en la documentación subscribeToUpdates.

  2. Tu implementación de devolución de llamada a contentCards.subscribeToUpdates debe llamar a BrazePlugin.processContentCards(contentCards).

Para ver un ejemplo, consulta AppDelegate.swift en nuestra aplicación de ejemplo.

Repetición de la devolución de llamada para tarjetas de contenido

Para almacenar las tarjetas de contenido desencadenadas antes de que esté disponible la devolución de llamada y reproducirlas una vez establecida, añade la siguiente entrada al mapa customConfigs al inicializar BrazePlugin:

1
BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});

About React Native Content Cards

The Braze SDKs include a default card feed to get you started with Content Cards. To show the card feed, you can use the Braze.launchContentCards() method. The default card feed included with the Braze SDK will handle all analytics tracking, dismissals, and rendering for a user’s Content Cards.

Prerequisites

Before you can use this feature, you’ll need to integrate the React Native Braze SDK.

Cards methods

To build your own UI, you can get a list of available cards, and listen for updates to cards:

1
2
3
4
5
6
7
8
9
10
11
// Set initial cards
const [cards, setCards] = useState([]);

// Listen for updates as a result of card refreshes, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
    setCards(update.cards);
});

// Manually trigger a refresh of cards
Braze.requestContentCardsRefresh();

You can use these additional methods to build a custom Content Cards Feed within your app:

Card types and properties

The Content Cards data model is available in the React Native SDK and offers the following Content Cards card types: Image Only, Captioned Image, and Classic. There’s also a special Control card type, which is returned to users that are in the control group for a given card. Each type inherits common properties from a base model in addition to its own unique properties.

Base card model

The base card model provides foundational behavior for all cards.

For a full reference of the base card, see the Android and iOS documentation.

Image only

Image only cards are clickable, full-sized images.

For a full reference of the image only card, see the Android and iOS documentation.

Captioned image

Captioned image cards are clickable, full-sized images with accompanying descriptive text.

For a full reference of the captioned image card, see the Android and iOS documentation.

Classic

Classic cards have a title, description, and an optional image on the left of the text.

For a full reference of the classic (text announcement) Content Card, see the Android and iOS documentation. For the classic image (short news) card, see the Android and iOS documentation.

Control

Control cards include all of the base properties, with a few important differences. Most importantly:

  • The isControl property is guaranteed to be true.
  • The extras property is guaranteed to be empty.

For a full reference of the control card, see the Android and iOS documentation.

Requisitos previos

Antes de poder utilizar las tarjetas de contenido, tendrás que integrar el SDK de Braze Swift en tu aplicación. A continuación, tendrás que completar los pasos para configurar tu aplicación tvOS.

Configuración de tu aplicación tvOS

Paso 1: Crear una nueva aplicación iOS

En Braze, selecciona Configuración > Configuración de la aplicación y, a continuación, Añadir aplicación. Introduce un nombre para tu aplicación de tvOS, selecciona iOS (no_tvOS) y_luego selecciona Añadir aplicación.

ALT_TEXT.

Paso 2: Obtén la clave de API de tu aplicación

En la configuración de tu aplicación, selecciona tu nueva aplicación para tvOS y toma nota de la clave de API de tu aplicación. Utilizarás esta clave para configurar tu aplicación en Xcode.

ALT_TEXT

Paso 3: Integrar BrazeKit

Utiliza la clave de API de tu aplicación para integrar el SDK de Braze Swift en tu proyecto de tvOS en Xcode. Solo tienes que integrar BrazeKit desde el SDK Swift de Braze.

Paso 4: Crea tu interfaz de usuario personalizada

Como Braze no proporciona una interfaz predeterminada para las tarjetas de contenido en tvOS, tendrás que personalizarla tú mismo. Para un recorrido completo, consulta nuestro tutorial paso a paso: Personaliza las tarjetas de contenido para tvOS. Para ver un proyecto de ejemplo, consulta los ejemplos del SDK Swift de Braze.

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK Braze de Unity.

Mostrar tarjetas de contenido de forma nativa

Puedes mostrar la IU predeterminada para las tarjetas de contenido utilizando la siguiente llamada:

1
Appboy.AppboyBinding.DisplayContentCards();

Recepción de datos de la tarjeta de contenido en Unity

Puedes registrar objetos del juego Unity para que se te notifique la llegada de tarjetas de contenido. Recomendamos configurar los oyentes del objeto del juego desde el editor de configuración de Braze.

Si necesitas configurar la escucha de tu objeto del juego en tiempo de ejecución, utiliza AppboyBinding.ConfigureListener() y especifica BrazeUnityMessageType.CONTENT_CARDS_UPDATED.

Nota, además tendrás que hacer una llamada a AppboyBinding.RequestContentCardsRefresh() para empezar a recibir datos en tu receptor de objetos del juego en iOS.

Análisis sintáctico de tarjetas de contenido

Los mensajes entrantes de string recibidos en tu devolución de llamada al objeto del juego Tarjetas de contenido pueden analizarse en nuestro ContentCard para mayor comodidad.

El análisis de las tarjetas de contenido requiere el análisis JSON, consulta el siguiente ejemplo para obtener más detalles:

Ejemplo de devolución de llamada de tarjetas de contenido
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
void ExampleCallback(string message) {
  try {
    JSONClass json = (JSONClass)JSON.Parse(message);

    // Content Card data is contained in the `mContentCards` field of the top level object.
    if (json["mContentCards"] != null) {
      JSONArray jsonArray = (JSONArray)JSON.Parse(json["mContentCards"].ToString());
      Debug.Log(String.Format("Parsed content cards array with {0} cards", jsonArray.Count));

      // Iterate over the card array to parse individual cards.
      for (int i = 0; i < jsonArray.Count; i++) {
        JSONClass cardJson = jsonArray[i].AsObject;
        try {
          ContentCard card = new ContentCard(cardJson);
          Debug.Log(String.Format("Created card object for card: {0}", card));

          // Example of logging Content Card analytics on the ContentCard object 
          card.LogImpression();
          card.LogClick();
        } catch {
          Debug.Log(String.Format("Unable to create and log analytics for card {0}", cardJson));
        }
      }
    }
  } catch {
    throw new ArgumentException("Could not parse content card JSON message.");
  }
}

Actualizar tarjetas de contenido

Para actualizar las tarjetas de contenido desde Braze, llama a cualquiera de los siguientes métodos:

1
2
3
4
// results in a network request to Braze
AppboyBinding.RequestContentCardsRefresh()

AppboyBinding.RequestContentCardsRefreshFromCache()

Análisis

Los clics y las impresiones deben registrarse manualmente para las tarjetas de contenido no mostradas directamente por Braze.

Utiliza LogClick() y LogImpression() en ContentCard para registrar los clics y las impresiones de tarjetas concretas.

Acerca de las tarjetas de contenido de Xamarin

El SDK de Xamarin de Braze incluye una fuente de tarjetas predeterminada para que empieces a utilizar las tarjetas de contenido. La fuente predeterminada de tarjetas incluida en el SDK de Braze gestionará todos los análisis de seguimiento, descarte de tarjetas y representación de las tarjetas de contenido de un usuario.

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Xamarin Braze.

Tipos de tarjeta y propiedades

El SDK de Xamarin de Braze tiene tres tipos únicos de tarjetas de contenido que comparten un modelo base: Banner, Imagen subtitulada y Clásico. Cada tipo hereda propiedades comunes de un modelo base y tiene las siguientes propiedades adicionales.

Modelo de tarjeta base

Para una referencia completa de la tarjeta base, consulta la documentación de Android e iOS.

Banner

Las tarjetas banner son imágenes de tamaño completo en las que se puede hacer clic.

Para una referencia completa de la tarjeta banner, consulta la documentación de Android e iOS (ahora renombrada a sólo imagen).

Imagen subtitulada

Las tarjetas de imágenes con subtítulos son imágenes de tamaño completo en las que se puede hacer clic y que van acompañadas de un texto descriptivo.

Para una referencia completa de la tarjeta de imagen subtitulada, consulta la documentación de Android e iOS.

Clásica

Las tarjetas clásicas tienen un título, una descripción y una imagen opcional a la izquierda del texto.

Para una referencia completa de la tarjeta de contenido clásica (anuncio de texto), consulta la documentación de Android e iOS. Para una referencia completa de la tarjeta de imagen clásica (noticias breves), consulta la documentación de Android e iOS.

Métodos de tarjeta

Puedes utilizar estos métodos adicionales para crear una fuente personalizada de tarjetas de contenido dentro de tu aplicación:

Método Descripción
requestContentCardsRefresh() Solicita las últimas tarjetas de contenido al servidor SDK de Braze.
getContentCards() Recupera tarjetas de contenido del SDK Braze. Esto devolverá la última lista de tarjetas del servidor.
logContentCardClicked(cardId) Registra un clic para el ID de tarjeta de contenido dado. Este método sólo se utiliza para análisis.
logContentCardImpression(cardId) Registra una impresión para el ID de tarjeta de contenido dado.
logContentCardDismissed(cardId) Registra un descarte para el ID de tarjeta de contenido dado.
¿QUÉ TAN ÚTIL FUE ESTA PÁGINA?
New Stuff!