Creating customised actions

This feature is unavailable for AMPHTML ads.

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

To create a customised action, first select a target and an event that you want to trigger the action. Then click "Add customised action" under the "Customised" section of the "Action" tag. 

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

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.

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 that 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 customisedAction > Add customised action

In the Customised Code dialogue, 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 customisedAction > Add customised action

In the Customised Code dialogue, 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 customisedAction> Add customised action

In the Customised Code dialogue, 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 customised action.

Was this article helpful?
How can we improve it?