Easy interstital pages with RoR & meta tags

Last week I was asked to create a simple interstitial page. Basically, a page that a user would be redirected to between page navigation. Normally they are used for ads, but you can be more creative.

I came across a simple way to implement the interstitial page into our link shortener app using HTML meta tags. First, a redirect page was created, ’redirect.html.erb’. Inside this page, I used the meta attribute ’http-equiv’ to force a refresh after 5 seconds, which along with the ‘content’ attribute would redirect to a given URL. For example:

<meta http-equiv="refresh" content="5;URL=http://mikamai.com" />

In order to direct this page to the user’s original URL, it was stored in a variable in the controller file, @url, in this case we will define it manually for readability:

@url = "http://mikamai.com"

Now, the URL can be dynamically changed, and we can swap out the static URL in the ’redirect.html.erb’ page for the @url variable:

<meta http-equiv="refresh" content="5;URL=<%= @url %>" />

The process of redirecting to the ’redirect.html.erb’ page is handled in the controller.

def follow
      respond_to do |format|
        format.html { render '/redirect' }  ## Renders the redirect.html.erb page
      end
 end

And thus, once a user goes to a shortened link, for example http://svel.to/1, an interstitial page will be rendered which after 5 seconds will redirect to http://mikamai.com.

I also added a simple countdown using pure JavaScript and the setTimeout function.:

var timer = 5,
countdownSpan = document.getElementById('countdown');

(function timeDown() {
    countdownSpan.innerHTML = timer--;
    if (timer >= 0) {
        setTimeout(function () {
            timeDown();
        }, 1000);
    }
}());