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.