Date Swap component

Date Swap is a custom component for Google Web Designer that helps you show different content based on the viewer's time and date. Use Date Swap to show custom content based around an event. For example, Date Swap is helpful for showing customized content before, same day, and after a movie release.

Install the component

This component only works with Google Web Designer. Don't have Google Web Designer? Download it here. If you have a previous version installed, it will automatically be updated to the latest version.

  1. Download the Date Swap component. (You don't need to unzip the file).
  2. In Google Web Designer, click the Image of add new component button in Google Web Designer button at the bottom of the Components panel.
  3. Select the .zip file you downloaded and click "Open".

Learn more about installing and removing custom components in Google Web Designer

Use the component

Drag the component to the stage to start using it in your creative. To customize, first select the component on the stage, then open the Properties panel and scroll down to Component properties

Component properties

Property Description
Name Sets the name of the component.

The date and time to begin showing the content. Dates can be formatted in RFC2822 or ISO 8601 formats. This value is inclusive; the content will be shown from when the current time exactly matches this date and time.

For example:

  • Fri, 13 Aug 2021 03:45:13 +0000
  • 2021-08-13T03:45:13+00:00
Consider the time zones your creative will run in when setting a date and time. If you don't include a time zone, the local time zone will be used.

The date and time to stop showing the content. Dates can be formatted in RFC2822 or ISO 8601 formats. This value is inclusive; the content will be shown until 1 second after the date and time set here.

For example:

  • Sat, 15 Aug 2021 03:45:13 +0000
  • 2021-08-15T03:45:13+00:00

Add child elements to show

The Date Swap component shows or hides all child elements (such as images, text, and so on) based on the target time period.

To add a child element:

  1. Choose the Selection tool  from the tools panel.
  2. Double-click the Date Swap component instance on the stage. The component now has a red outline, and is no longer selectable.
  3. Create a new element, such as text or an image. This new element is now a child of the Date Swap component.

To return to the page level, double-click on the stage.

Learn more about nesting elements (or tags)in Google Web Designer.


Events are how you connect a physical gesture from your user to a recorded action in your ad. The component sends the following events, which can be used to trigger other actions:

  • Before - Any time before the date and time set in the Between property.
  • During - Any time during the target time period.
  • After - Any time after the end date set in the And property.


To test how your creative will look on different days, change your system clock date.


Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?