DocumentaçãoJourney OptimizerGuia do Journey Optimizer

Usar campos de formulário editáveis em experiências baseadas em código

Última atualização: 7 de julho de 2025
  • 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.

OBSERVAÇÃO
Essa etapa geralmente é executada por um perfil de desenvolvedor.

➡️ Saiba como adicionar campos editáveis a modelos de experiência baseados em código neste vídeo

  1. Crie um modelo de conteúdo e selecione o canal de experiência baseada em código. Saiba como criar modelos

  2. 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.
  3. Abra o editor de personalização para editar o conteúdo do código.

  4. 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.

  5. 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.
  6. Adapte a sintaxe de acordo com suas necessidades adicionando parâmetros detalhados na tabela abaixo:

    Ação
    Parâmetro
    Exemplo
    Declarar 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}}
  7. 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.

  8. Use a sintaxe {{{name}}} no código em todos os locais onde deseja exibir o valor do campo editável. Substitua name pela ID exclusiva do campo definido anteriormente.

  9. Continue de forma semelhante para adicionar outros campos editáveis, envolvendo cada um deles com as tags {{#inline}} e {{/inline}}.

  10. Edite o restante do código conforme necessário, incluindo as IDs correspondentes aos campos editáveis definidos. Saiba como

  11. 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.

  1. Crie um modelo de experiência baseado em código conforme descrito acima.

  2. 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.

  3. Clique no botão Inserir política. O código correspondente à política de decisão é adicionado.

  4. 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".

  5. 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.

  6. 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, substitua name por "title".

  7. 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"
}
NOTE
Ao fazer referência aos campos em linha na carga JSON:
  • 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}}
]
}
NOTE
Os campos embutidos para os quais você deseja usar itens de decisão precisam ser colocados dentro do bloco de política de decisão - entre as marcas {{#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.

NOTE
Essa etapa geralmente é executada por um profissional de marketing.
  1. 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.
  2. Os campos predefinidos no modelo de conteúdo selecionado estão disponíveis no painel direito.

  3. 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.
  4. 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.

  5. 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.

https://video.tv.adobe.com/v/3463996/?learn=on&enablevpops&captions=por_br
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76