Aangepaste acties maken

 

U kunt aangepaste acties maken met JavaScript. Nadat u een aangepaste actie heeft gedefinieerd, kunt u deze opnieuw gebruiken in uw document.

Een aangepaste actie maken:

1. Voeg een nieuwe gebeurtenis toe door onderaan het deelvenster Gebeurtenissen op de knop Gebeurtenis toevoegen te klikken.
2. Selecteer het doel en de gebeurtenis.
3. Selecteer Aangepast > Aangepaste actie toevoegen voor de actie. Google Web Designer vraagt u uw aangepaste code op te geven.
   
4. Geef de actie een naam in het veld boven het codevak (na het voorvoegsel gwd.).
   • Elke aangepaste actie moet een unieke naam in het document hebben.
   • De naam moet beschrijvend genoeg zijn om herkenbaar te zijn.
   • Als u een ongeldige naam opgeeft (zoals een naam die spaties bevat), wordt het veld rood onderstreept.
5. Definieer de functie in het codevak. Bekijk het artikel over component-API's voor een lijst met eigenschappen, gebeurtenissen en methoden die beschikbaar zijn voor elke component.
6. Klik op OK.

De gebeurtenis wordt geconfigureerd om uw aangepaste actie te gebruiken. Deze actie is nu ook beschikbaar voor gebruik voor andere gebeurtenissen en wordt vermeld onder Aangepast.

U kunt het formaat van het dialoogvenster aanpassen door de rechterbenedenhoek te slepen.

Voorbeelden

U kunt naast componenten aangepaste acties gebruiken om de functionaliteit van Google Web Designer uit te breiden. In de volgende voorbeelden wordt de methode document.getElementById gebruikt om het element op te geven in het document waarop de actie van toepassing is.

Demping van een video opheffen wanneer deze wordt afgespeeld

Voeg de volgende gebeurtenis toe:

Doel	gwd-video_1 (of de ID van uw video)
Gebeurtenis	Video > Afspelen na onderbreken
Actie	Aangepast > Aangepaste actie toevoegen
Aangepaste code	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

U gebruikt deze code als volgt:

• Vervang gwd-video_1 door de ID van uw video.

Een bijschrift voor elk frame in een veegbare galerij weergeven

Voeg de volgende gebeurtenis toe:

Doel	gwd-swipegallery_1 (of de ID van uw veegbare galerij)
Gebeurtenis	Veegbare galerij > Frame weergegeven
Actie	Aangepast > Aangepaste actie toevoegen
Aangepaste code	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];

 

U gebruikt deze code als volgt:

• Vervang gwd-swipegallery_1 door de ID van uw veegbare galerij.
• Vervang caption-div door de ID van het tekstelement waarmee het bijschrift wordt weergegeven.
• Vervang de bijschrifttekst voor elk frame in de aangepaste code.

Na twee seconden naar de volgende pagina in uw advertentie gaan

Voeg de volgende gebeurtenis toe:

Doel	page1 (of de ID van uw startpagina)
Gebeurtenis	Pagina > Klaar om de pagina te presenteren
Actie	Aangepast > Aangepaste actie toevoegen
Aangepaste code	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

U gebruikt deze code als volgt:

• Vervang page1 door de ID van de startpagina.