Administración de modificaciones web manage-web-modifications

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 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 Eliminar modificación de la opción Más acciones para eliminarlo.

    note caution
    CAUTION
    Proceda con cuidado al eliminar una acción, ya que puede afectar a las acciones posteriores.
  4. Para eliminar varias modificaciones al mismo tiempo, haga clic en Seleccionar en la parte superior del Modificaciones , compruebe las modificaciones que desee y haga clic en el Eliminar icono.

  5. Utilice el Más acciones en la parte superior del Modificaciones para eliminar todas las modificaciones a la vez.

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

  7. Puede cancelar y rehacer las acciones mediante el Deshacer/Rehacer en la parte superior derecha de la pantalla.

    Haga clic y mantenga presionado el botón para cambiar entre las Deshacer y Rehacer opciones. 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 Modificaciones panel: sin necesidad de seleccionar un componente y editarlo desde la interfaz del diseñador web. Siga los pasos a continuación.

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

  2. Seleccionar Añadir una modificación.

  3. Seleccione el tipo de modificación:

  4. Introduzca su contenido y Guardar sus cambios.

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

Selector de CSS css-selector

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

  1. Seleccionar Selector de CSS como el tipo de modificación.

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

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

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

    • Establecer atributo: especifique un atributo que se asociará al selector CSS actual para que este selector se pueda identificar también por este atributo. Para ello, introduzca un nombre en la variable Nombre de atributo y un valor en el campo Contenido field. 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 mediante la variable Página<head> tipo de modificación.

El <head> es un contenedor de metadatos (datos sobre datos) y se coloca entre las etiquetas <html> y la etiqueta <body> etiqueta. 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 <head> se utiliza comúnmente para añadir código JavaScript o CSS a la parte superior de la página. Los selectores para las acciones visuales subsiguientes dependen de los elementos del HTML agregados en esta pestaña.

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

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

  2. Añada su código personalizado en Contenido cuadro.

    note caution
    CAUTION
    Solo puede añadir <script> y <style> elementos a la <head> sección. Agregando <div> las etiquetas y otros elementos pueden causar lo siguiente <head> elementos para abrir el <body>.
  3. Haga clic en Opciones de edición avanzadas botón. Se abre el Editor de expresiones.

    Puede aprovechar las Journey Optimizer Editor de expresiones 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 complemento Página<head> tipo de modificación a:

  • 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 de superposición:

    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 sea necesario realizar alguna modificación, realice cambios dentro de este contenedor.

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

No realice acciones document.write en scripts de código personalizados.
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 después lo modifica, no elimine el elemento original.
Cada cambio crea un nuevo elemento en la variable Modificaciones panel. Debido a que la segunda acción modifica al Elemento 1, si elimina el Elemento 1, esa acción ya no tiene nada para modificar, por lo que el cambio ya no funciona.
Tenga cuidado al utilizar el<><> Página <head><>tipo de modificación para dos campañas que afectan a la misma dirección URL.
Si usa el Página<head> Tipo de modificación 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 ubicación. Depende de usted asegurarse de que no haya conflictos en el código.
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76