Search
Clear search
Close search
Google apps
Main menu

Creating custom actions

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, first select a target and an event that you want to trigger the action. Then click "Add custom action" under the "Custom" section of the "Action" tag.

In the custom code dialog, assign a name to the function, define the function in the code box, and click save.

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.

Unmuting a video each time it's played

To unmute a video each time it's played, create an event like this:

  • Target - Choose the video you want to control. If you have one video, the default ID will be gwd-video_1
  • Event - Choose Video > play after pause
  • Action - Choose customAction > Add custom action

In the Custom Code dialog, name your function, In this case, you might use a name such as "mutebtn". Then use the following code:

      if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}
Showing a caption for each frame in a swipeable gallery

This code example lets you create captions for each image in a swipeable gallery. This presumes that you've placed a swipeable gallery component with the ID "gwd-swipegallery_1" (which is the default) on stage, and have added images to the component.

For the captions, you'll also need to create a Div element, and give it the ID "caption-div". Then create an event like this:

  • Target - Choose the Swipeable gallery which should have the ID gwd-swipegallery_1
  • Event - Choose Swipeable Gallery > Frame shown
  • Action - Choose customAction > Add custom action

In the Custom Code dialog, name your function, In this case, you might use a name such as "showcaption". Then use the following 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];
Going to the next page in your ad after a two second pause

This code example presumes you have at least two pages in your ad. Then you can create an event to change pages every 2 seconds like this:

  • Target - Choose the page. The first page will be page1.
  • Event - Choose Page > Ready to present the page
  • Action - Choose customAction > Add custom action

In the Custom Code dialog, name your function, In this case, you might use a name such as "turnpage". Then use the following code:

    

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

Then add the same event to each page using the same custom action.

Was this article helpful?
How can we improve it?