About events

This feature is unavailable for video ads, image ads, and animated GIFs.

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 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:

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 dialog.

If the action you want isn't listed in the Event dialog, you can create your own JavaScript functions and use them as custom actions. However, this feature is unavailable for AMPHTML ads.

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 dialog, 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 dropdown 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.

Selecting elements from the Events panel

• If you select a target or receiver on a different page, the stage will switch to that page.
• You can't select multiple targets or receivers at the same time.

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.