About events

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.

Events Overview - Google Web Designer

The Event dialogue

You connect objects and actions to events in the Event dialogue. The Event dialogue is an interactive dialogue that walks you through the following steps to set up an event:

1. Target: Choose the object that triggers the event, such as a button.
2. Event: Select the event to detect, such as a user clicking the button.
3. Action: Specify an action that occurs as a result, such as playing a video.
4. Receiver: Choose the element that performs the action, such as the video.
5. Configuration: For some actions, additional details may be necessary.

Learn how to define an event using the Event dialogue.

The Events panel

The Events panel lists the events in your project. (If you don't see the Events panel, you can open it from the Window menu.)

To add an event:

• Click the Add event button at the bottom of the panel.

To edit an event:

• Double-click the event in the Events panel to open the Event dialogue, where you can make changes.
• You can also right-click the event, then click Edit from the pop-up menu.

To delete an event:

• Click the event in the panel, then click the Delete button at the bottom of the panel.
• You can also right-click the event, then click Delete from the pop-up menu.
• To delete multiple events, select them in the panel, then use either method above.

To filter the list of events:

• Use the drop-down at the top of the panel to list events only for the current page or selection.
• You can also enter an element ID, event type or action in the Filter events field.

To select the target for an event:

• Right-click the event, then click Select target from the pop-up menu.
• If the target is hidden or locked (or has a hidden or locked parent element), the pop-up menu will have the option to Show and select target or Unlock and select target.

To select the receiver for an event:

• Right-click the event, then click Select receiver from the pop-up menu.
• If the receiver is hidden or locked (or has a hidden or locked parent element), the pop-up menu will have the option to Show and select receiver or Unlock and select receiver.

Previewing events

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.