Events are how you set actions in response to user gestures, timeline keyframes, or other occurrences in your ad or HTML document. For example, you could use a touch event in an ad to trigger the start of an animation, or you could trigger a CSS change at a point on the timeline where you set an event marker.
The Event dialog
You connect objects and actions to events in the Event dialog. The Event dialog is an interactive dialog that walks you through the following steps to set up an event:
- Target: Choose the object that triggers the event, such as a button.
- Event: Select the event to detect, such as a user clicking the button.
- Action: Specify an action that occurs as a result, such as playing a video.
- Receiver: Choose the element that performs the action, such as the video.
- Configuration: For some actions, additional details may be necessary.
Learn how to define an event using the Event dialog.
The Events panel
The Events panel lists the events in your project. (You can toggle panels using the Window menu.)
- To add an event, click the Add event button.
- To edit an event, double-click the listing on the Events panel to open the Event dialog, where you can make changes.
- To delete an event, select the listing in the panel and click the Delete button.
- To filter the list of events, use the dropdown or the Filter events field.
You can't preview events inside the Google Web Designer interface. To see an event in action, preview your project in your browser and trigger the event.