Create custom actions

This feature is unavailable for AMPHTML ads.

You can create custom actions of your own using JavaScript. A custom action is re-usable within your creative once it has been defined.

To create a custom action, add a new event. For the action, select Custom > Add custom action. Google Web Designer prompts you to enter your custom code. Refer to the Component APIs for a list of properties, events, and methods available for each component.

Assign a name to the function (it will have a gwd. prefix) and define the function in the code box. Click OK.

You can resize the dialog box by dragging the bottom right corner.

Examples

Custom 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 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 article helpful?
How can we improve it?