Integração do cartão de conteúdo

Este artigo aborda a integração do cartão de conteúdo para a Web, incluindo modelos de dados do cartão de conteúdo, opções de interface do usuário de feed padrão e métodos de cartão adicionais.

O SDK da Braze para web inclui uma interface de usuário de feed de cartões de conteúdo para acelerar seus esforços de integração. Se preferir criar sua própria interface do usuário, consulte o Guia de personalização do cartão de conteúdo.

Interface do usuário do feed padrão

Para usar a interface de usuário dos cartões de conteúdo incluídos, você precisará especificar onde mostrar o feed em seu site.

Neste exemplo, temos um <div id="feed"></div> no qual queremos colocar o feed dos cartões de conteúdo. Usaremos três botões para ocultar, mostrar ou alternar (ocultar ou mostrar com base em seu estado atual) o 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>

Ao usar os métodos toggleContentCards(parentNode, filterFunction) e showContentCards(parentNode, filterFunction), se nenhum argumento for fornecido, todos os cartões de conteúdo serão mostrados em uma barra lateral de posição fixa no lado direito da página. Caso contrário, o feed será colocado na opção parentNode especificada.

Consulte os documentos de referência do SDK para saber mais sobre a alternância do cartão de conteúdo.

Modelo de dados do cartão de conteúdo

O modelo de dados dos cartões de conteúdo está disponível no SDK para web.

O SDK da Braze para Web oferece três tipos de cartões de conteúdo: ImageOnly, CaptionedImage e ClassicCard. Cada tipo herda propriedades comuns de um cartão de modelo básico e tem as seguintes propriedades adicionais.

Consulte Análise de registros para obter informações sobre a assinatura de dados do cartão.

Propriedades do modelo do cartão de conteúdo básico - Cartão

Todos os cartões de conteúdo têm essas propriedades compartilhadas:

Propriedades do cartão de conteúdo somente para imagens - ImageOnly

Os cartões ImageOnly são imagens clicáveis em tamanho real.

Propriedades do cartão de conteúdo da imagem legendada - CaptionedImage

Os cartões CaptionedImage são imagens clicáveis, em tamanho real, com texto descritivo.

Propriedades do cartão de conteúdo clássico - ClassicCard

O modelo ClassicCard pode conter uma imagem sem texto ou um texto com imagem.

Grupo de controle

Se você usar o feed padrão dos cartões de conteúdo, as impressões e os cliques serão automaticamente rastreados.

Se você usar uma integração personalizada para Cartões de conteúdo, precisará registrar impressões quando um Cartão de controle tiver sido visto. Nessa iniciativa, lide com os cartões de controle ao registrar impressões em um Teste A/B. Esses cartões estão em branco e, embora não sejam vistos pelos usuários, você ainda deve registrar as impressões para comparar a performance deles com os cartões que não são de controle.

Para determinar se um cartão de conteúdo está no grupo de controle para um teste A/B, verifique a propriedade card.isControl (Web SDK v4.5.0+) ou verifique se o cartão é uma instância ControlCard (card instanceof braze.ControlCard).

Métodos do cartão

Para saber mais, consulte a documentação de referência do SDK