Create custom actions

You can create custom actions of your own using JavaScript. Once you define a custom action, you can reuse it within your document.

To create a custom action:

Add a new event by clicking the Add event button at the bottom of the Events panel.
Select the target and the event.
For the action, select Custom > Add custom action. Google Web Designer prompts you to enter your custom code.
Name the action in the field above the code box (after the gwd. prefix).
- Each custom action must have a unique name within the document.
- The name should be descriptive enough to be recognisable.
- If you enter an invalid name (such as a name that includes spaces), the field is underlined in red.
Define the function in the code box. Refer to the Component APIs for a list of properties, events and methods available for each component.
Click OK.

The event is configured to use your custom action. This action is also now available to use for other events, listed under Custom.

You can resize the dialogue box by dragging the bottom-right corner.

Examples

Customised actions can be used along with components to extend the functionality of Google Web Designer. The following examples all use the document.getElementById method to specify the element in the document that the action applies to.

Unmute a video each time that it's played

Add the following event:

Target	`gwd-video_1` (or the ID of your video)
Event	Video > Play after pause
Action	Custom > Add custom action
Custom code	`if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }`

To use this code:

Replace gwd-video_1 with the ID of your video.

Show a caption for each frame in a Swipeable Gallery

Add the following event:

Target	`gwd-swipegallery_1` (or the ID of your Swipeable Gallery)
Event	Swipeable Gallery > Frame shown
Action	Custom > Add custom action
Custom 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];`

To use this code:

Replace gwd-swipegallery_1 with the ID of your Swipeable Gallery.
Replace caption-div with the ID of the text element that displays the caption.
Replace the caption text for each frame in the custom code.

Go to the next page in your ad after a two-second pause

Add the following event:

Target	`page1` (or the ID of your starting page)
Event	Page > Ready to present the page
Action	Custom > Add custom action
Custom code	`setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }`

To use this code:

Replace page1 with the ID of the starting page.

Was this helpful?

How can we improve it?

Create custom actions

Examples

Was this helpful?

Need more help?

Try these next steps: