DocumentaçãoJourney OptimizerGuia do Journey Optimizer

Gerenciar modificações na Web manage-web-modifications

Última atualização: 9 de setembro de 2026

Criado para:

  • Intermediário
  • Iniciante
  • Usuário

Nesta página: Aprenda a revisar, excluir e desfazer as alterações aplicadas à sua página da Web a partir do painel Modificações e como adicionar o seletor de CSS e as modificações do cabeçalho da página diretamente no Adobe Journey Optimizer.

style
shade-box

É possível gerenciar facilmente todos os componentes, ajustes e estilos adicionados à página da Web. Você também pode adicionar modificações diretamente no painel dedicado.

Trabalhar com o painel Modificações use-modifications-pane

  1. Selecione o ícone Modificações para exibir o painel correspondente à esquerda.

  2. Você pode revisar cada uma das alterações feitas na página.

  3. Selecione uma modificação indesejada e clique na opção Excluir modificação do botão Mais ações para removê-la.

    note caution
    CAUTION
    Continue com cuidado ao excluir uma ação, pois ela pode afetar as ações subsequentes.

  4. Se você estiver criando um aplicativo de página única, poderá aplicar qualquer modificação a outras exibições. Saiba mais

  5. Para excluir várias modificações ao mesmo tempo, clique no botão Selecionar na parte superior do painel Modificações, verifique as modificações de sua escolha e clique no ícone Excluir.

  6. Use o botão Mais ações na parte superior do painel Modificações para excluir todas as modificações de uma só vez.

  7. Você também pode excluir somente as modificações inválidas, o que significa que as alterações foram substituídas por outras alterações. Por exemplo, se você modificar a cor de um texto e, em seguida, excluir esse texto, a modificação de cor se tornará inválida, pois o texto não existe mais.

  8. Você pode cancelar e refazer ações usando o botão Desfazer/Refazer na parte superior direita da tela.

    Clique e mantenha pressionado o botão para alternar entre as opções Desfazer e Refazer. Em seguida, clique no próprio botão para aplicar a ação desejada.

Adicionar modificações do painel dedicado add-modifications

Ao editar uma página usando o web designer, você pode adicionar novas alterações ao seu conteúdo diretamente do painel Modificações - sem a necessidade de selecionar um componente e editá-lo na interface do web designer. Siga as etapas abaixo.

  1. No painel Modificações, clique no botão Mais ações.

  2. Selecione Adicionar uma modificação.

  3. Selecione o tipo de modificação:

  4. Insira seu conteúdo e Salve suas alterações.

  5. Clique no botão Mais ações ao lado da sua modificação e selecione Informações para exibir seus detalhes.

Seletor de CSS css-selector

Para adicionar uma modificação de tipo do Seletor de CSS, siga as etapas abaixo.

  1. Selecione Seletor de CSS como o tipo de modificação.

  2. O campo Seletor de Elemento CSS ajuda a localizar e selecionar os elementos do HTML (ou nós na árvore DOM) aos quais você deseja aplicar as alterações.

  3. Selecione um tipo de ação (Definir Conteúdo ou Definir Atributo) e preencha as informações/o conteúdo necessários.

    • Definir conteúdo: especifique o conteúdo que entra no elemento identificado pelo campo Seletor de Elemento CSS.

    • Definir Atributo: especifique um atributo a ser associado ao seletor de CSS atual para que esse seletor possa ser identificado também por esse atributo. Para fazer isso, insira um nome no campo Nome do atributo e um valor no campo Conteúdo. Se o atributo já existir, o valor será atualizado; caso contrário, um novo atributo será adicionado com o nome e o valor especificados.

Página <head> page-head

Você pode adicionar um código personalizado usando o tipo de modificação Página<head>.

O elemento <head> é um contêiner de metadados (dados sobre dados) e é colocado entre a marca <html> e a marca <body>. Nesse caso, o código não aguarda os eventos body ou page-load; ele é executado no início do carregamento da página.

O elemento <head> é usado com frequência para adicionar código JavaScript ou CSS à parte superior da página. Os seletores para ações visuais subsequentes dependem dos elementos HTML adicionados nessa guia.

Para adicionar uma modificação de tipo de Página<head>, siga as etapas abaixo.

  1. Selecione Página<head> como o tipo de modificação.

  2. Adicione seu código personalizado na caixa Conteúdo.

    note caution
    CAUTION
    Você só pode adicionar elementos <script> e <style> à seção <head>. Adicionar <div> marcas e outros elementos pode fazer com que os <head> elementos restantes apareçam em <body>.

  3. Clique no botão Opções de edição avançadas. O editor de personalização é aberto.

    Você pode aproveitar o editor de personalização do Journey Optimizer com todos os seus recursos de personalização e criação. Saiba mais

Exemplos de código personalizado custom-code-examples

Você pode usar o tipo de modificação Página<head> para:

  • Use o JavaScript em linha ou vincule a um arquivo externo do JavaScript.

    Por exemplo, para alterar a cor de um elemento:

    code language-none 
    <script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>

  • Configure um estilo em linha ou um link para uma folha de estilos externa.

    Por exemplo, para definir uma classe para um elemento de sobreposição:

    code language-none 
    <style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>

Práticas recomendadas do código personalizado custom-code-best-practices

Sempre envolva o código personalizado em um elemento.

Por exemplo:

code language-none 
<script>
// Code goes here
</script>

No caso de serem necessárias modificações, faça as alterações dentro deste contêiner.

Se não precisar mais do código personalizado, deixe esse contêiner vazio, mas não o remova. Isso garante que outras modificações da experiência não sejam afetadas.

Não execute ações de document.write em scripts de código personalizado.
Os scripts são executados de modo assíncrono. Isso frequentemente faz com que as ações document.write apareçam no lugar errado na página. Não é recomendado usar document.write em scripts criados no código personalizado.
Se você criar um elemento e depois modificá-lo, não exclua o elemento original.
Cada alteração cria um novo elemento no painel Modificações. Como a segunda ação modifica o Elemento 1, se você o excluir, a ação não terá mais nada para modificar e a alteração não funcionará mais.
Tenha cuidado ao usar o tipo de modificação​​ Página <head>​para duas campanhas que afetam a mesma URL.
Se você usar o tipo de modificação Página<head> para duas campanhas que afetam a mesma URL, a JavaScript será inserida na página pelas duas campanhas. Journey Optimizer determina automaticamente a ordem do conteúdo entregue. Verifique se o código não depende de posicionamento. Cabe a você verificar se não há conflitos no código.
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to review, delete, and undo changes applied to a web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Journey Optimizer.

Intents:

  • Review the changes made to a page from the Modifications pane
  • Delete a single modification, multiple modifications, all modifications, or only invalid modifications
  • Undo and redo actions using the Undo/Redo button
  • Add a modification directly from the pane as a CSS Selector or Page <head> type
  • Configure a CSS Selector modification with a Set Content or Set Attribute action
  • Add custom JavaScript or CSS code through a Page <head> modification

Glossary:

  • Modifications pane: The pane used to navigate through and manage all components, adjustments, and styles added to a web page, and to add new modifications (product-specific)
  • Invalid modifications: Changes that were overridden by other changes, for example a color modification whose target text was later deleted (product-specific)
  • CSS Selector modification: A modification type that uses the CSS Element Selector field to identify HTML elements (DOM nodes) and apply a Set Content or Set Attribute action (product-specific)
  • Page <head> modification: A modification type for adding custom code to the <head> container, executed at the beginning of page load (product-specific)
  • Set Content: A CSS Selector action that specifies the content placed into the element identified by the CSS Element Selector (product-specific)
  • Set Attribute: A CSS Selector action that associates an attribute (name and value) with the current CSS selector; an existing attribute’s value is updated, otherwise a new attribute is added (product-specific)

Guardrails:

  • Proceed with care when deleting an action, as it may impact subsequent actions.
  • You can only add <script> and <style> elements to the <head> section; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Do not perform document.write actions in custom code scripts, as scripts are executed asynchronously and this often causes document.write to appear in the wrong place.
  • If you create an element and then modify it, do not delete the original element, because the modifying action would no longer have anything to modify and would stop working.
  • If you use the Page <head> modification type for two campaigns impacting the same URL, JavaScript is injected from both campaigns and Journey Optimizer automatically determines the order; make sure the code does not depend on placement and has no conflicts.
  • Always wrap custom code in one element; if the code is no longer needed, leave the container empty but do not remove it.

Terminology:

  • Canonical name: Modifications pane — Acronym: n/a — variants: Modifications panel
  • Synonyms: “CSS Element Selector” = “CSS selector field used to find and select HTML elements”
  • Do not confuse: “Set Content” (specifies content placed into the selected element) ≠ “Set Attribute” (associates an attribute name and value with the CSS selector)
  • Do not confuse: “Delete modification” (removes one modification) ≠ “Undo” (cancels an action, reversible with Redo)
  • Do not confuse: “invalid modifications” (changes overridden by other changes) ≠ modifications you intentionally delete

FAQ:

  • Q: How do I delete all modifications at once? — Use the More actions button on top of the Modifications pane to delete all modifications at once.
  • Q: What are invalid modifications? — Changes that were overridden by other changes, such as a color modification whose target text was later deleted; you can delete only the invalid modifications.
  • Q: What can I add in a Page <head> modification? — Only <script> and <style> elements; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Q: What is the difference between Set Content and Set Attribute? — Set Content specifies the content placed into the element identified by the CSS Element Selector; Set Attribute associates an attribute name and value with the CSS selector, updating it if it already exists.
  • Q: Can I undo changes? — Yes, use the Undo/Redo button on the top right; click and hold to switch between Undo and Redo, then click to apply.
recommendation-more-help
journey-optimizer-help