Crear acciones personalizadas

 

Puede crear sus propias acciones personalizadas con JavaScript. Una vez que defina una acción personalizada, podrá volver a utilizarla dentro de su documento.

Para crear una acción personalizada:

  1. En la parte inferior del panel Eventos, añada un evento haciendo clic en el botón Añadir evento .
  2. Seleccione el objetivo y el evento.
  3. En el caso de las acciones, seleccione Personalizar > Añadir acción personalizada. Al hacerlo, Google Web Designer le solicitará que introduzca su código personalizado.
  4. Asigne un nombre a la acción en el campo que se encuentra sobre el cuadro de código (después del prefijo gwd.).
    • Cada acción personalizada debe tener un nombre único dentro del documento.
    • El nombre debe ser lo suficientemente descriptivo para ser reconocible.
    • Si introduce un nombre no válido (como un nombre que incluya espacios), el campo aparecerá subrayado en rojo.
  5. Defina la función en el cuadro de código. Consulte las API de componentes para obtener una lista de propiedades, eventos y métodos disponibles en cada componente.
  6. Haga clic en Aceptar.

El evento ya está configurado para utilizar la acción personalizada. La acción también se muestra en Personalizado y se puede utilizar en otros eventos.

Puede cambiar el tamaño del cuadro de diálogo arrastrando la esquina inferior derecha.

Ejemplos

Las acciones personalizadas se pueden usar junto con componentes para ampliar las funciones de Google Web Designer. Todos los ejemplos siguientes usan el método document.getElementById para especificar el elemento en el documento sobre el que recae la acción.

Activar el sonido de un vídeo cada vez que se reproduzca

Añada el siguiente evento:

Objetivo gwd-video_1 (o el ID del vídeo)
Evento Vídeo > Reproducción después de la pausa
Acción Personalizar > Añadir acción personalizada
Código personalizado

if (document.getElementById('gwd-video_1').muted) {
document.getElementById('gwd-video_1').mute();
}

 

Para utilizar este código:

  • Sustituya gwd-video_1 por el ID del vídeo.
Mostrar el título de cada fotograma de una galería deslizable

Añada el siguiente evento:

Objetivo gwd-swipegallery_1 (o el ID de la galería deslizable)
Evento Galería deslizable > Fotograma mostrado
Acción Personalizar > Añadir acción personalizada
Código personalizado

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
1: "The text for frame 1",
2: "The text for frame 2",
3: "The text for frame 3" };
div.textContent = text[gallery.currentIndex];

 

Para utilizar este código:

  • Sustituya gwd-swipegallery_1 por el ID de la galería deslizable.
  • Sustituya caption-div por el ID del elemento de texto que muestra el título.
  • Sustituya el texto del título de cada marco en el código personalizado.
Ir a la siguiente página de su anuncio tras detenerse durante dos segundos

Añada el siguiente evento:

Objetivo page1 (o el ID de la página de inicio)
Evento Página > Preparado para presentar la página
Acción Personalizar > Añadir acción personalizada
Código personalizado

setTimeout(nextPage, 2000);
function nextPage() {
document.getElementById('pagedeck').goToNextPage();
}

 

Para utilizar este código:

  • Sustituya page1 por el ID de la página de inicio.
¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.

Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
Buscar en el Centro de ayuda
true
5050422
false