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.
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.
- Download the Age Gate component. (You don't need to unzip the file).
- In Google Web Designer, click the button at the bottom of the Components panel.
- Select the .zip file you downloaded and click "Open".
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.
|Name||Sets the name of the component.|
Changes the layout of the age gate form elements to fit differently sized ad units:
Example square or wide layout
Changes the order of the form fields based on your preferred date format:
|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.|
Sets the behavior of the form submission:
|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".|
The HTTP request type to use for the form action. Set this only if you choose Form action for "Submission type".
|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.|
To show the advanced settings, click "Show advanced settings" in the Component properties pane.
|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 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.
Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.