Créer des actions personnalisées

 

Vous pouvez créer vos propres actions personnalisées à l'aide de JavaScript. Une fois que vous avez défini une action personnalisée, vous pouvez la réutiliser dans votre document.

Pour créer une action personnalisée, procédez comme suit :

1. Ajoutez un événement en cliquant sur le bouton Ajouter un événement  dans la partie inférieure du panneau Événements.
2. Sélectionnez la cible et l'événement.
3. Ensuite, sélectionnez Personnaliser > Ajouter une action personnalisée. Google Web Designer vous invite à saisir votre code personnalisé.
   
4. Attribuez un nom à l'action dans le champ situé au-dessus du champ de saisie du code (après le préfixe gwd.).
   • Le nom de chaque action personnalisée du document doit être unique.
   • Le nom doit être suffisamment descriptif pour être reconnaissable.
   • Si vous saisissez un nom incorrect (par exemple, qui contient des espaces), le champ est souligné en rouge.
5. Définissez la fonction dans le champ de saisie du code. Reportez-vous aux API des composants pour obtenir une liste des propriétés, des événements et des méthodes disponibles pour chaque composant.
6. Cliquez sur OK.

L'événement est configuré pour utiliser votre action personnalisée. Cette action est désormais également disponible pour d'autres événements, répertoriés dans Personnaliser.

Faites glisser le coin inférieur droit de la boîte de dialogue pour la redimensionner.

Exemples

Les actions personnalisées peuvent être utilisées avec des composants pour étendre les fonctionnalités de Google Web Designer. Les exemples suivants utilisent tous la méthode document.getElementById pour spécifier l'élément du document auquel l'action s'applique.

Réactiver le son d'une vidéo à chaque lecture

Ajoutez l'événement suivant :

Cible	gwd-video_1 (ou l'ID de votre vidéo)
Événement	Vidéo > Lire après une pause
Action	Personnaliser > Ajouter une action personnalisée
Code personnalisé	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

Pour utiliser ce code, procédez comme suit :

• Remplacez le champ gwd-video_1 par l'ID de votre vidéo.

Afficher une légende pour chaque image d'une galerie à faire glisser

Ajoutez l'événement suivant :

Cible	gwd-swipegallery_1 (ou l'ID de votre galerie à faire glisser)
Événement	Galerie à faire glisser > Image affichée
Action	Personnaliser > Ajouter une action personnalisée
Code personnalisé	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];

 

Pour utiliser ce code, procédez comme suit :

• Remplacez le champ gwd-swipegallery_1 par l'ID de votre galerie à faire glisser.
• Remplacez le champ caption-div par l'ID de l'élément textuel qui affiche la légende.
• Remplacez le texte de la légende pour chaque image du code personnalisé.

Aller à la page suivante dans votre annonce après une pause de deux secondes

Ajoutez l'événement suivant :

Cible	page1 (ou l'ID de votre page d'accueil)
Événement	Page > Prêt à afficher la page
Action	Personnaliser > Ajouter une action personnalisée
Code personnalisé	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

Pour utiliser ce code, procédez comme suit :

• Remplacez le champ page1 par l'ID de la page d'accueil.