Search
Clear search
Close search
Google apps
Main menu

Age Gate component

Age Gate is a custom component for Google Web Designer that requires the viewer to enter their birth date to view age restricted content.

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 Age Gate 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.
Layout

Changes the layout of the age gate form elements to fit differently sized ad units:

  • Square - The message is on top, and the three form fields and submit button are shown in one horizontal row beneath.
  • Tall - The message, each form field, and the submit button occupy individual lines in a vertical row for display in tall, narrow ad units.
  • Wide - The message is on top, and the three form fields and submit button are shown in one horizontal row beneath.

Example square or wide layout

Age gate - wide or square layout


Example tall layout

Date format

Changes the order of the form fields based on your preferred date format:

  • MM/DD/YYYY
  • DD/MM/YYYY
  • YYYY/MM/DD
Message text Sets the message shown to the viewer instructing them to enter their date of birth.
Button text Sets the text to display on the form's submit button.
Submission type

Sets the behavior of the form submission:

  • Fire event - Sends agegate_pass or agegate_fail events based on the calculation of the user’s age compared with the age.
  • Form action - Passes the user’s date of birth to the developer-supplied form action URL. See related fields below.
Year field Sets the name of the year field to pass to an external form handling URL. Set this only if you choose Form action for "Submission type".
Month field Sets the name of the month field to pass to an external form handling URL. Set this only if you choose Form action for "Submission type".
Day field Sets the name of the day field to pass to an external form handling URL. Set this only if you choose Form action for "Submission type".
Method

The HTTP request type to use for the form action. Set this only if you choose Form action for "Submission type".

  • GET
  • POST
Action The URL to submit the form to. Set this only if you choose Form action for "Submission type".
Age restriction The age the viewer must be in order to pass through the age gate successfully.

 

Advanced settings

To show the advanced settings, click "Show advanced settings" in the Component properties pane.

Property Description
Background Color The HTML, RGB or Hex Color for the background of the component.
Text Color The HTML, RGB or Hex color for all text on the component.
Submit Button Background Color HTML, RGB or Hex color for the background of the submit button.
Button Text Color HTML, RGB or Hex color for the background color of the submit button.
Error Text Color HTML, RGB or Hex color for any error messages that are shown when the user enters an invalid value in the date fields.
Font Family The font family to use for all text on the component.
Button Radius The CSS Radius to use for the submit button.
Input Radius The CSS Radius to use for the input fields.
Custom Button A plain text field to enable you to enter custom CSS for the submit button.

Events

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:

  • Submit - Sent when the submit button has been clicked.
  • Age Gate Pass - Sent when the user input is equal to or above the age requirement.
  • Age Gate Fail - Sent when the user input is less than the age requirement.

Preview

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?