Cartões de conteúdo

Pré-requisitos

Antes de poder usar os cartões de conteúdo, você precisará integrar o Braze Web SDK em seu app. No entanto, não é necessária nenhuma configuração adicional. Para 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.

Tipos e propriedades do cartão

O modelo de dados dos cartões de conteúdo está disponível no Web SDK e oferece os seguintes 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.

Modelo de cartão básico

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

Somente imagem

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

Imagem legendada

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

Clássico

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

Usando o Google Tag Manager

O Google Tag Manager funciona injetando o Braze CDN (uma versão do nosso Web SDK) diretamente no código do seu site, o que significa que todos os métodos do SDK estão disponíveis como se você tivesse integrado o SDK sem o Google Tag Manager, exceto ao implementar cartões de conteúdo.

Configuração de cartões de conteúdo

• google tag manager
• manual

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

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

Fazendo upgrade de modelos

Para fazer upgrade para a versão mais recente do SDK da Braze para Web, siga as três etapas a seguir em seu dashboard do Google Tag Manager:

1. Atualizar modelo de tag
   Acesse a página Modelos em seu espaço de trabalho. Aqui você verá um ícone indicando que há uma atualização disponível.
   
   
   
   Clique nesse ícone e, após revisar a alteração, clique em Accept Update (Aceitar atualização).
   
   
   
   
2. Atualizar o número da versão
   Depois que seu modelo de tag tiver sido atualizado, edite a tag de inicialização da Braze e atualize a versão do SDK para a versão mais recente major.minor. Por exemplo, se a versão mais recente for 4.1.2, digite 4.1. Você pode ver uma lista das versões do SDK em nosso changelog.
   
   
   
   
3. Controle de qualidade e publicação
   Verifique se a nova versão do SDK está funcionando usando a ferramenta de debug do Google Tag Manager antes de publicar uma atualização no seu contêiner de tags.

Solução de problemas

Ativar a depuração de tag

Cada modelo de tag do Braze tem uma caixa de seleção opcional de depuração de tag GTM que pode ser usada para registrar mensagens de depuração no console JavaScript da sua página da Web.

Entrar no modo de depuração

Outra maneira de ajudar a depurar sua integração com o Google Tag Manager é usar o recurso de modo de prévia do Google.

Isso ajudará a identificar quais valores estão sendo enviados da camada de dados da sua página da Web para cada tag do Braze disparada e também explicará quais tags foram ou não disparadas.

Ativar o registro detalhado

Para permitir que o suporte técnico da Braze acesse os registros durante os testes, é possível ativar o registro detalhado na integração com o Google Tag Manager. Esses registros serão exibidos na guia Console das ferramentas de desenvolvedor do seu navegador .

Em sua integração do Google Tag Manager, navegue até a tag de inicialização da Braze e selecione Ativar registro do SDK para Web.