Create 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, 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.
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.
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 |
|
To use this code:
- Replace
gwd-video_1
with the ID of your video.
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 |
|
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.
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); |
To use this code:
- Replace
page1
with the ID of the starting page.