Custom alerts for naughty visitors

The other day I discovered something unusual: according to our analytics we had 74 visitors to lexoo.co.uk from a link on elance.com (a website for finding freelancers). I followed the link back and found the following posting:

I'm looking for a responsable(sic) web developer with experience in Java, JavaScript, Ruby on Rails, and other relevant programming languages to build a legal online marketplace website similar to the following site: https://www.lexoo.co.uk/how-it-works

That's right. Someone wanted to commission a freelancer to COPY LEXOO - (in Ruby on Rails no less!) They say that imitation is the highest form of flattery!

In response to all these elancers visiting our site to copy it, I pushed up an alert that would only show for visitors who came to our site via this job posting.

Welcome Elancers - thanks for popping by! Need copyright advice? Please contact us ;)

Postscript: I'd like to know how much the winning bid was. I mean, how hard could it be to just build Lexoo? If I did it, surely anyone could!

Double postscript: every day we've been getting fake enquiries through Lexoo from elancers testing out the system to see how it works. It's now starting to get a little annoying!

Triple postscript: looks like they're getting tonnes of proposals! (45 so far) https://www.elance.com/j/development-of-legal-online-marketplace-site/75365673/

Quadruple postscript: Dom Mason pointed out that these components are called Welcome Mats. Thanks Dom!

If you're interested in how to do this yourselves with Ruby on Rails - read on:


Creating custom alerts for visitors

So, first of all you need to find out how they got to the site. The elancers were all getting referred by elance.com, so I checked the requests referer variable:

# application_controller.rb
class ApplicationController < ActionController::Base

  before_filter :set_alert_copy

  def set_alert_copy
    @alert_copy = alert_copy
  end

  private

  def alert_copy
    # the spelling of referrer is one of the disappointments of the internet
    if request.referer && request.referer.match /www\.elance\.com/
      "Welcome Elancers - thanks for popping by! Need copyright advice? Please contact us ;)"
    end
  end
  
end

Next I added a div to the top of every page by adding it to the application.html layout:

#application.html.haml
%html
  %head
    = stylesheet_link_tag "application", media: "all"
    
  %body{class: className}
    - if show_alert?
      = alert_container
    = yield
    
    = javascript_include_tag "application"
#application_helper
module ApplicationHelper
  
  def show_alert?
    @alert_copy
  end

  def alert_container
    raw content_tag(:div, nil, id: "alert-container", data: {
                  "alert-copy" => @alert_copy,
                  "hide-close" => true # because I want it to follow them around the site
                 })
  end
  
end

Then I used the jquery sticky alert plugin to display a nice alert to everyone that visited:

# Download stickyalert.js from https://github.com/tlongren/jquery-sticky-alert

(($) ->
  showAlert = ->
    container = $("#alert-container")
    alertCopy = container.data("alert-copy")
    hideClose = container.data("hide-close")
    $("#alert-container").stickyalert
       barFontColor:'#fff',
       barColor:'#e8562a',
       barText: alertCopy,
       barTextLink: "/request-a-quote"
       cookieRememberDays: '2'

    if hideClose
      $("#alert-container a.close").hide()

  if $("#alert-container")
    showAlert()
)(jQuery)

* { margin:0; padding:0; }

div.alert-box {
  display: block;
  padding: 6px 7px;
  color:#eee;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: fixed;
  width:100%;
  z-index: 100
}

div.alert-box a {
  color: #434343;
  text-decoration:none;
}

.alert-box a.close { color: #eee; position: absolute; right: 30px; top: 0; font-size: 18px; opacity: 0.8; padding: 4px; text-decoration:none; }

.alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; }


Subscribe via RSS

Back to all blog posts