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 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. (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 trash can icon button.
  • To filter the list of events, use the dropdown or the Filter events field.

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.

Was this helpful?
How can we improve it?