O módulo Dynamic Content permite substituir componentes web estáticos e transformá-los em experiências dinâmicas, controlando-os diretamente do console do Experience OS. Casos de uso do Dynamic Content incluem banners dinâmicos baseados em regras, encaminhamentos inteligentes para conteúdo adicional (em vez de listas estáticas sujeitas a atualizações manuais), controles deslizantes dinâmicos com conteúdo baseado em feed de dados e muito mais.
Criar uma campanha do Dynamic Content
- Acesse Site Personalization › New Campaign (personalização de seção › nova campanha) e clique em Dynamic Content.
- Insira um nome e, opcionalmente, adicione notas e rótulos
- Especifique as configurações da campanha, como layout, localização e configurações avançadas. Para mais detalhes, consulte configurações de campanha do Dynamic Content.
- Defina as configurações de segmentação da experiência para determinar quando, onde e para quem a experiência é exibida.
- Crie variações usando modelos, com base em outras experiências, ou usando um feed de dados. Quando você tiver concluído cada variação, clique em Save Variation (salvar variação).
- Defina a alocação, métrica primária, e configurações avançadas da experiência.
- Configure quanto tráfego alocar para cada variação e para o grupo de controle.
- Clique em Save Experience (salvar experiência).
- Você pode criar experiências adicionais nessa campanha clicando no ícone com sinal de mais.
- Para campanhas que usam um código de incorporação como local, copie e cole o código no código-fonte do seu website. Para pegar o código, depois que a campanha for salva, passe o mouse sobre o nome da campanha e clique no ícone de código para ver a caixa de diálogo do código de incorporação.
Configurações de campanha do Dynamic Content
Layout
Depois de dar um nome exclusivo à campanha, selecione seu tipo de layout.
- Single (única): uma variação entre todas as variações disponíveis é exibida ao visitante.
- Item List (lista de itens): um grupo de banners que são servidos juntos. A Dynamic Yield escolherá o melhor conjunto de variações, classificando-as automaticamente por desempenho (melhor variação primeiro, e assim por diante), de acordo com a métrica primária.
- Slider (controle deslizante): semelhante à lista de itens, mas já incorporadas a uma exibição de carrossel.
Local
O conteúdo dinâmico pode ser inserido e colocado em qualquer página do seu website usando os seguintes métodos:
- Replace Element (substituir elemento): a Dynamic Yield renderiza o Dynamic Content, substituindo um elemento existente em seu website sem usar recursos técnicos ou de TI. Você especifica o elemento a ser substituído como um seletor CSS.
- Add After Element (adicionar após o elemento): o mesmo que Replace Element, mas o elemento é colocado logo após um seletor CSS específico.
- Add Before Element (adicionar antes do elemento): o mesmo que Replace Element, mas o elemento é colocado logo antes de um seletor CSS específico.
- Embed with Code (incorporar com código): implemente conteúdo dinâmico diretamente no código-fonte do seu website (a Dynamic Yield não o renderizará). Depois que você publicar a campanha, passe o cursor sobre o nome da campanha e clique no ícone de código para localizar o código.
Para as três primeiras opções, você deve especificar as páginas em que a Dynamic Yield deve renderizar a campanha.
Definir o layout da lista de itens
Você pode configurar uma lista de itens para exibir variações horizontalmente ou verticalmente usando as opções predefinidas de layout da lista de itens .
No entanto, se você quiser configurar um layout diferente, como uma grade, ou adicionar algum HTML ao layout, você pode criar seu próprio layout personalizado da seguinte forma:
(Veja exemplos de código de layout personalizado)
- Ao criar ou editar uma lista de itens de conteúdo dinâmico, selecione Custom (personalizado) na área Item List Layout (layout da lista de itens).
- Faça um dos seguintes procedimentos:
- Defina uma tag envolvendo todas as variações para substituir a tag <div> padrão envolvendo todas as variações com uma tag HTML diferente. Por exemplo: <ul>
- Defina uma tag envolvendo cada variação para substituir a tag <div> padrão envolvendo cada variação com uma tag HTML diferente. Por exemplo: <li>
- Adicione CSS ou JS ao contêiner da lista de itens. Isso se aplica a todas as variações no editor de código.
- Adicione HTML Before Items (HTML antes dos itens) ou HTML After Items (HTML depois dos itens). Isso é útil para textos do cabeçalho e do rodapé.
- Defina uma tag envolvendo todas as variações para substituir a tag <div> padrão envolvendo todas as variações com uma tag HTML diferente. Por exemplo: <ul>
Configurações avançadas
Configuração | Descrição |
---|---|
Fire Google Analytics Event |
Visível apenas se a Integração com o Google Analytics estiver ativada. Essa opção é ativada por padrão, mas você pode desativá-la para evitar relatar dados ao Google Analytics sobre um Dynamic Content específico. |
Execute custom integrations | Aciona um código JavaScript personalizado quando uma variação é exibida. Integrações personalizadas são gerenciadas na tela de integração nas configurações da seção. Essa opção só fica visível se uma integração personalizada estiver ativada. |
Serve on Every SPA Event |
Relevante para aplicativos de página única que não geram uma atualização do navegador a cada mudança de tela. Se você precisar que o Dynamic Content reinicialize ou reavalie suas condições de segmentação a cada mudança de tela no seu aplicativo de página única, acione um evento track_pageview e ative essa opção. Para obter mais informações sobre como trabalhar com aplicativos de página única, consulte este artigo. |
Optimize Site Loading Time | Armazena a experiência externamente para maximizar a velocidade geral de carregamento do local. Recomendado principalmente para experiências abaixo da dobra para reduzir o risco de cintilação. |
Wait for |
Evita a renderização do Dynamic Content até que um elemento tenha sido carregado ou uma condição tenha sido atendida. Usada principalmente para solução de problemas ou para garantir que o Google Analytics esteja rastreando o Dynamic Content corretamente. Selecione uma das seguintes opções: |
|
Não espere por nada antes de renderizar o Dynamic Content. |
|
Aguarde até que um elemento seja carregado na página definida como um seletor CSS. |
|
Aguarde o carregamento da biblioteca JQuery. |
|
Aguarde o carregamento do Google Analytics (clássico). |
|
Aguarde o carregamento do Google Analytics (Universal). |
|
Aguarde o carregamento dos dados da Dynamic Yield (como métricas de prova social). |
|
Aguarde até que qualquer função JavaScript personalizada seja carregada na página. |
Pinning a variation
Ao usar listas de itens e layouts Slider, você pode selecionar uma variação para que sempre seja a primeira a aparecer. Sob as ações para variações, selecione Pin Variation (fixar variação). Apenas uma variação pode ser fixada em cada experiência.
Observação: não é possível fixar variações no caso daquelas criadas usando feeds de variações.
Exemplos de código de layout personalizado da lista de itens
Você pode usar os seguintes exemplos de código CSS para criar seu próprio layout personalizado da lista de itens personalizados.
Layout horizontal
Exiba os itens um ao lado do outro em uma única linha:
CSS:
.dy-container-${dyTagId} {
display: flex;
}
.dy-item-${dyTagId} {
flex:1;
margin-right:20px;
}
.dy-item-${dyTagId}:last-of-type {
margin-right:0px;
}
Layout vertical
Exiba os itens um em cima do outro em uma única coluna:
CSS:
.dy-item-${dyTagId} {
margin-bottom:20px;
Layout de grade: banners grandes
Exiba os itens em uma grade com um máximo de três itens por linha. O número de itens por linha pode ser menor dependendo do tamanho da tela.
- 768 px ou superior: 3 itens por linha
- 321 - 767 px: 2 itens por linha
- 320 px ou inferior: 1 item por linha ;
Este exemplo foi projetado para experiências com pelo menos 6 variações.
CSS:
.dy-container-${dyTagId} {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
}
@media only screen and (max-width: 767px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto;
}
}
@media only screen and (max-width: 320px) {
.dy-container-${dyTagId} {
grid-template-columns: auto;
}
}
Layout de grade: banners pequenos
Exiba os itens em uma grade com um máximo de 6 itens por linha. O número de itens por linha pode ser menor dependendo do tamanho da tela:
- 1681 px ou superior: 6 itens por linha
- 1023 px - 1366 px: 5 itens por linha
- 768 px - 1024 px: 4 itens por linha
- 321 px - 767 px: 3 itens por linha
- 320 px ou inferior: 2 itens por linha
Este exemplo foi projetado para experiências com pelo menos 12 variações.
CSS:
.dy-container-${dyTagId} {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-gap: 20px;
}
@media only screen and (max-width: 1366px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto auto auto auto;
}
}
@media only screen and (max-width: 1024px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto auto auto;
}
}
@media only screen and (max-width: 767px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto auto;
}
}
@media only screen and (max-width: 320px) {
.dy-container-${dyTagId} {
grid-template-columns: auto;
}
}