Usar campos de formulário editáveis em experiências baseadas em código
- Tópicos:
- Experiências baseadas em código
Criado para:
- Experiente
- Usuário
Para obter mais flexibilidade e controle sobre as experiências baseadas em código, o Journey Optimizer permite que a equipe de desenvolvimento crie modelos de conteúdo JSON ou HTML que contêm campos editáveis predefinidos específicos.
Ao criar uma experiência baseada em código, os profissionais de marketing não técnicos podem editar diretamente esses campos na interface, sem precisar abrir o editor de personalização ou tocar em outros elementos de código em sua jornada ou campanha.
Esse recurso fornece uma experiência simplificada para usuários de marketing, permitindo que os desenvolvedores tenham mais controle sobre o conteúdo do código, resultando em menos espaço para erros.
Entender a sintaxe do campo de formulário
Para tornar editáveis partes de uma HTML ou de uma carga de código JSON, você deve usar uma sintaxe específica no editor de expressão. Isso envolve declarar uma variável com um valor padrão que os usuários podem substituir após aplicar o modelo de conteúdo à sua experiência baseada em código.
Por exemplo, suponha que você queira criar um modelo de conteúdo para aplicá-lo às suas experiências baseadas em código e permitir que os usuários personalizem uma cor específica usada em locais diferentes, como cores de fundo de quadros ou botões.
Ao criar seu modelo de conteúdo, você precisa declarar uma variável com uma ID exclusiva, por exemplo, "cor", e chamá-la nos locais desejados no conteúdo em que deseja aplicar essa cor.
Ao aplicar o modelo de conteúdo ao seu conteúdo, os usuários poderão personalizar a cor usada sempre que a variável for referenciada.
Adicionar campos editáveis a modelos de conteúdo HTML ou JSON
Para tornar alguns dos códigos JSON ou HTML editáveis, comece criando uma experiência baseada em código modelo de conteúdo, em que é possível definir campos de formulário específicos.
-
Crie um modelo de conteúdo e selecione o canal de experiência baseada em código. Saiba como criar modelos
-
Selecione o modo de criação: HTML ou JSON.
CUIDADO
Alterar o modo de criação resultará na perda de todo o código atual. As experiências baseadas em código baseadas nesse modelo precisam usar o mesmo modo de criação. -
Abra o editor de personalização para editar o conteúdo do código.
-
Para definir um campo de formulário editável, navegue até o menu Funções auxiliares no painel de navegação esquerdo e adicione o atributo embutido. A sintaxe a ser declarada e chamada para a variável é adicionada automaticamente no conteúdo.
-
Substitua
"name"
por uma ID exclusiva para identificar o campo editável. Por exemplo, digite "imgURL".OBSERVAÇÃO
A ID do campo deve ser exclusiva e não pode conter espaços. Essa ID deve ser usada em qualquer lugar no conteúdo onde você deseja exibir o valor da variável. -
Adapte a sintaxe de acordo com suas necessidades adicionando parâmetros detalhados na tabela abaixo:
AçãoParâmetroExemploDeclarar um campo editável com um valor padrão. Ao adicionar o modelo ao seu conteúdo, esse valor padrão será usado se você não personalizá-lo.Adicione o valor padrão entre as tags em linha.{{#inline "editableFieldID"}}default_value{{/inline}}
Defina um rótulo para o campo editável. Esse rótulo será exibido no editor de código ao editar os campos do modelo.name="title"
{{#inline "editableFieldID" name="title"}}default_value{{/inline}}
-
Clique em Visualizar campos de formulário para verificar como os campos de formulário editáveis serão exibidos nas experiências baseadas em código que aplicam este modelo.
-
Use a sintaxe
{{{name}}}
no código em todos os locais onde deseja exibir o valor do campo editável. Substituaname
pela ID exclusiva do campo definido anteriormente. -
Continue de forma semelhante para adicionar outros campos editáveis, envolvendo cada um deles com as tags
{{#inline}}
e{{/inline}}
. -
Edite o restante do código conforme necessário, incluindo as IDs correspondentes aos campos editáveis definidos. Saiba como
-
Salve seu template.
Usar políticas de decisão em formulários de campo editáveis
Ao criar um modelo de conteúdo de experiência baseado em código, você pode usar uma política de decisão para aproveitar as ofertas nos campos de formulário editáveis.
-
Crie um modelo de experiência baseado em código conforme descrito acima.
-
Clique em Adicionar política de decisão usando o ícone Mostrar Decisão no painel direito da tela de edição ou no editor de expressão da seção Política de decisão no menu esquerdo.
Saiba como criar uma política de decisão em esta seção.
-
Clique no botão Inserir política. O código correspondente à política de decisão é adicionado.
-
Após a marca
{{#each}}
, insira o código correspondente aos campos de formulário editáveis que você deseja adicionar, usando a sintaxe inline descrita acima. Substitua"name"
por uma ID exclusiva para identificar o campo editável. Neste exemplo, use "title". -
Clique em Visualizar campos de formulário para verificar como os campos de formulário editáveis serão exibidos nas experiências baseadas em código que aplicam este modelo.
-
Insira o restante do código acima da tag
{{/each}}
. Use a sintaxe{{{name}}}
no código em todos os locais onde deseja exibir o valor do campo editável. Neste exemplo, substituaname
por "title". -
Salve seu template.
Exemplos de código
Abaixo estão alguns exemplos de modelos JSON e HTML, alguns deles incluindo políticas de decisão.
Modelo JSON:
{{#inline "title" name="Title"}}Best gear for winter is here for you!{{/inline}}
{{#inline "description" name="Description"}}Add description{{/inline}}
{{#inline "imgURL" name="Image Link"}}Add link{{/inline}}
{{#inline "number_of_items" name="Number of items"}}23{{/inline}}
{
"title": "{{{title}}}",
"description": "{{{description}}}",
"imageUrl": "{{{imgURL}}}",
"number_of_items": {{{number_of_items}}},
"code": "DEFAULT"
}
- Os campos do tipo sequência de caracteres devem ser colocados entre aspas duplas.
- Inteiros ou boolianos NÃO devem ser colocados entre aspas duplas. (Veja o campo
number_of_items
no exemplo acima.)
Modelo JSON com decisão:
{
"offer": [
{{#each decisionPolicy.fff709b7-7fef-4e4e-83d7-594fbcf196c1.items as |item|}}
{{#inline "title" name="Title"}}{{item._mobiledx.Title1}}{{/inline}} {{#inline "description" name="Description"}}{{item._mobiledx.Title2}}{{/inline}} {{#inline "imgURL" name="Image Link"}}https://luma.enablementadobe.com/content/luma/us/en/experience/warming-up/_jcr_content/root/hero_image.coreimg.jpeg{{/inline}}
{
"title": "{{{title}}}",
"description": "{{{description}}}",
"imageUrl": "{{{imgURL}}}",
"link": "https://lumaenablement.adobe.com/web/luma/home", "code": "DEFAULT"
},
{{/each}}
]
}
{{#each}}
e {{/each}}
.Modelo do HTML:
{{#inline "title" name="Title"}}Please enter title here{{/inline}}
{{#inline "imgSrc" name="Image link"}}{{/inline}}
<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{{imgSrc}}}" />{{{title}}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>
Modelo do HTML com decisão:
{{#each decisionPolicy.f112884a-5654-43ad-9d6d-dbd32ae23ee6.items as |item|}}
{{#inline "title" name="Title"}}Title is: {{item._mobiledx.Title1}}{{/inline}}
<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{item._mobiledx.HeroBannerImage.sourceURL}}" />{{{title}}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>
{{/each}}
Editar campos de formulário em uma experiência baseada em código
Agora que o modelo de conteúdo contendo campos de formulário editáveis predefinidos foi criado, você pode criar uma experiência baseada em código usando esse modelo de conteúdo.
Você poderá editar facilmente os campos de formulário a partir de uma jornada de experiência ou campanha baseada em código, sem abrir o editor de personalização.
-
Na tela jornada activity ou campaign edition, selecione o template de conteúdo que contém campos de formulário editáveis. Saiba como usar modelos de conteúdo
CAUTION
Os modelos disponíveis para escolher têm como escopo o HTML ou o JSON com base na configuração de canal selecionada anteriormente. Somente os modelos compatíveis são exibidos. -
Os campos predefinidos no modelo de conteúdo selecionado estão disponíveis no painel direito.
-
Na seção Campos de formulário editáveis, você pode:
- Edite cada valor diretamente nos campos editáveis, sem abrir o editor de código.
- Clique no ícone de personalização para editar cada campo usando o editor de código.
NOTE
Em ambos os casos, só é possível editar um campo por vez e o restante do conteúdo de experiência baseado em código não pode ser editado. -
Se uma política de decisão foi adicionada ao modelo de conteúdo, ela vem com todos os atributos disponíveis no esquema do catálogo de ofertas. É possível editar o item de decisão em linha ou usando o editor de expressão.
-
Para editar o restante do código, clique no botão Editar código e atualize seu conteúdo de experiência baseado em código completo, incluindo os campos de formulário editáveis. Saiba mais
Vídeo explicativo
Saiba como adicionar campos editáveis a modelos de conteúdo de canal de experiência baseados em código.