DocumentaciónJourney OptimizerGuía de Journey Optimizer

Administración de modificaciones web manage-web-modifications

Última actualización: 9 de septiembre de 2026

Creado para:

  • Intermedio
  • Principiante
  • Usuario

En esta página: Obtenga información sobre cómo revisar, eliminar y deshacer los cambios aplicados a su página web desde el panel Modificaciones, y cómo agregar el selector CSS y las modificaciones del encabezado de página directamente en Adobe Journey Optimizer.

style
shade-box

Puede administrar fácilmente todos los componentes, ajustes y estilos que agregó a su página web. También puede agregar modificaciones directamente desde el panel dedicado.

Trabajar con el panel Modificaciones use-modifications-pane

  1. Seleccione el icono Modificaciones para mostrar el panel correspondiente a la izquierda.

  2. Puede revisar cada uno de los cambios realizados en la página.

  3. Seleccione una modificación no deseada y haga clic en la opción Eliminar modificación del botón Más acciones para eliminarla.

    note caution
    CAUTION
    Proceda con cuidado al eliminar una acción, ya que puede afectar a las acciones posteriores.

  4. Si está creando una aplicación de una sola página, puede aplicar cualquier modificación a otras vistas. Más información

  5. Para eliminar varias modificaciones al mismo tiempo, haga clic en el botón Seleccionar en la parte superior del panel Modificaciones, compruebe las modificaciones que elija y haga clic en el icono Eliminar.

  6. Use el botón Más acciones de la parte superior del panel Modificaciones para eliminar todas las modificaciones a la vez.

  7. También puede eliminar solo las modificaciones no válidas, es decir, los cambios que fueron anulados por otros cambios. Por ejemplo, si modifica el color de un texto y lo elimina, la modificación del color deja de ser válida porque el texto ya no existe.

  8. Puede cancelar y rehacer las acciones usando el botón Deshacer/Rehacer en la parte superior derecha de la pantalla.

    Mantenga presionado el botón para cambiar entre las opciones Deshacer y Rehacer. A continuación, haga clic en el botón para aplicar la acción deseada.

Agregar modificaciones desde el panel dedicado add-modifications

Al editar una página con el diseñador web, puede agregar nuevos cambios al contenido directamente desde el panel Modificaciones, sin necesidad de seleccionar un componente y editarlo desde la interfaz del diseñador web. Siga los pasos a continuación.

  1. En el panel Modificaciones, haga clic en el botón Más acciones.

  2. Seleccione Agregar una modificación.

  3. Seleccione el tipo de modificación:

  4. Escribe tu contenido y guarda tus cambios.

  5. Haga clic en el botón Más acciones que está junto a la modificación y seleccione Información para mostrar sus detalles.

Selector de CSS css-selector

Para agregar una modificación de tipo Selector de CSS, siga los pasos a continuación.

  1. Seleccione Selector de CSS como tipo de modificación.

  2. El campo Selector de elementos CSS le ayuda a encontrar y seleccionar los elementos HTML (o nodos del árbol DOM) en los que desea aplicar los cambios.

  3. Seleccione un tipo de acción (Establecer contenido o Establecer atributo) y rellene la información o el contenido necesarios.

    • Establecer contenido: especifique el contenido que va al elemento identificado por el campo Selector de elementos CSS.

    • Establecer atributo: especifique un atributo que se asociará con el selector CSS actual para que este selector pueda identificarse también con este atributo. Para ello, escriba un nombre en el campo Nombre del atributo y un valor en el campo Contenido. Si el atributo ya existe, el valor se actualiza; de lo contrario, se agrega un nuevo atributo con el nombre y valor especificados.

Página <head> page-head

Puede agregar código personalizado utilizando el tipo de modificación Página<head>.

El elemento <head> es un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta <html> y la etiqueta <body>. En este caso, el código no espera eventos body o page-load: se ejecuta al principio de la carga de la página.

El elemento <head> se utiliza comúnmente para agregar código JavaScript o CSS al principio de la página. Los selectores para acciones visuales siguientes dependen de los elementos HTML agregados en esta pestaña.

Para agregar una modificación de tipo Página<head>, siga los pasos a continuación.

  1. Seleccione Página<head> como tipo de modificación.

  2. Agregue su código personalizado en el cuadro Contenido.

    note caution
    CAUTION
    Solo puede agregar elementos <script> y <style> a la sección <head>. Si se agregan etiquetas de <div> y otros elementos, es posible que <head> elementos restantes pasen al <body>.

  3. Haga clic en el botón Opciones de edición avanzadas. Se abre el editor de personalización.

    Puede aprovechar el editor de personalización Journey Optimizer con todas sus capacidades de personalización y creación. Más información

Ejemplos de código personalizado custom-code-examples

Puede usar el tipo de modificación Página<head> para:

  • Utilice JavaScript en línea o vincule a un archivo JavaScript externo.

    Por ejemplo, para cambiar el color de un elemento:

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

  • Configure un estilo en línea o un vínculo a una hoja de estilos externa.

    Por ejemplo, para definir una clase para un elemento overlay:

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

Prácticas recomendadas de código personalizado custom-code-best-practices

Siempre ajuste el código personalizado en un elemento.

Por ejemplo:

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

En caso de que se necesiten modificaciones, realice cambios dentro de este contenedor.

Si ya no necesita el código personalizado, simplemente deje vacío este contenedor, pero no lo quite. Esto garantiza que no se vean afectadas otras modificaciones de la experiencia.

No realice acciones document.write en scripts de código personalizado.
Los scripts se ejecutan de forma asincrónica. Esto suele hacer que las acciones de document.write aparezcan en el lugar incorrecto de la página. No se recomienda utilizar document.write en scripts creados con código personalizado.
Si crea un elemento y luego lo modifica, no elimine el elemento original.
Cada cambio crea un nuevo elemento en el panel Modificaciones. Como la segunda acción modifica al Elemento 1, si elimina el Elemento 1, esa acción ya no tiene nada para modificar. Por lo tanto, el cambio ya no funciona.
Tenga cuidado al usar el tipo de modificación​​ Página <head>​para dos campañas que afectan a la misma dirección URL.
Si usa el tipo de modificación Página<head> para dos campañas que afectan a la misma dirección URL, JavaScript se inserta en la página desde ambas campañas. Journey Optimizer determina automáticamente el orden del contenido enviado. Asegúrese de que el código no dependa de la colocación. Depende de usted asegurarse de que no existan conflictos en el 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