Drinking Age Gateway with JavaScript

UPDATE 12/5/2016:
If you’re going to attempt to integrate this into the WordPress platform, please consider using my WP Drinking Age Plugin.

Background

So outside the normal grind I’ve been working on a website for a tequila brand. After a meeting with marketing I’d gathered it was important to add a drinking age gateway to the site. You see some type of these gateways on just about every alcohol brand’s site. I asked if they’d prefer to simply ask “Are you of Legal Drinking Age?”, and then have  “Yes/No” buttons determine a user’s fate (1)(2), or if they’d rather have the user input their birthday (3). Apparently, and I’m not a business guy or a lawyer so don’t comment and argue this with me, the yes/no gateways hold slightly less legitimacy than the ones where a user inputs their birthday to enter the site .

These gateways are really just about putting responsibility into the hands of the user, within reason. Is it easier to  lie with a yes/no gateway?…sure. Is it impossible to lie about your birthday though?…definitely not. So a birthday input is reasonably easy to implement, but not impossible to crack. If a user is going to lie they’re going to lie, not turn off JavaScript to get around the gateway. This is why a client side gateway seemed like the most reasonable approach.

Solution

A JavaScript gateway will allow easy indexing by search engines because they won’t run the JavaScript to restrict the content in the first place . If we were to have PHP check for the presence of an age verification cookie,  search engine crawlers will not have this cookie and will not see/index the content. We could work around that I’m sure, but there’s no need.

All countries don’t have the same drinking age. So solutions where the gateway is based on a static entry age aren’t viable. An age, and location must be gathered by the gateway to determine if a user is credible to enter the site. Tequila in Mexico is legal 3 years earlier than California. Sites that implemented this type of gateway (1) seemed to POST location values with country codes “US” “CA” ,ect. So they were authenticating server side with these codes…ugh

I’d Googled long enough to determine the few hours spent writing this script were likely more fun than just searching for an existing solution to work with, because it didn’t jump out at me.

Github Code

Installation

  1. Download the dependencies of Bootstrap and jQuery
  2. Get the Source drinkingAge
  3. Place bouncer.css in site’s head <link href="css/bouncer.css" rel="stylesheet">
  4. Place bouncer.js before the close of the body <script src="js/bouncer.js"></script>
  5. Initialize the gateway and its settings

 

Putting that all together in the most basic form you should have this.

Example Gateway

Customization

The bouncer.css file allows you to change just about everything that has to do with the gateway. I’m not a wizard with style sheets and this is a demo…so you’ll want to change things here.

 

Reference for Legal Drinking Ages

http://drinkingage.procon.org/view.resource.php?resourceID=004294

 

Published by

Ryan Kozak

I'm a full stack web developer living in Sacramento, CA.

5 thoughts on “Drinking Age Gateway with JavaScript”

  1. Perfect script – just what I’m looking for. Only question how can I delay the redirect when date of birth is denied. There isn’t enough time to read the message before being redirected.

    1. Hey Helen,

      I’ve updated it so that the config settings include the redirect timeout. For instance this would wait 5 seconds before redirecting, "deny_timeout": 5000

  2. Hi Ryan

    This and your WP plugin are looking good for a project.

    Is there a way to code this to show 21 to USA and 18 to UK?

    Also, change the order of the date to UK format day, month, year.

    I can code some CSS but I’m no coder by any means.

    Thanks in advance

      1. Hey Pedro,

        Sorry for the delay in reply but I just noticed your comment now. Indeed the plugin uses ages based by country. I haven’t had time to touch the plugin in a little while now, but I will implement a simple date format selector when I’m able to update the plugin, that seems like a good option to have.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.