Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 520

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 535

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 542

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 578

Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/gathadam/public_html/wp-settings.php on line 18
Code the perfect Exit Popup (exit console)
Previous     Next

Code the perfect Exit Popup (exit console)

All popups are bad news, right? Nothing gets rid of visitors faster than a crappy ad for casinoviagraporn getting in their face.

But what about visitors that found your site through a search engine, spend 5 seconds on 1 page of your site & then press the back button?

They didn’t find what they want.
They aren’t coming back.
Don’t they deserve some popup love?

Seriously, you have (most likely) lost these visitors for good anyway, so showing them a popup won’t make much difference to your visitor retention.

So how do you do it?
The key is the javascript event onUnload. This fires when a page is exited, whether by navigating out via a link, pressing the back button or closing the browser. The problem is, it fires every time a page unloads - and we only want a popup when the visitor leaves your site (not every time they navigate to a new page on your site).

Over at consolescripts.com they describe a solution which involves adding an onClick event to every internal link. The onClick event effectively blocks the popup from firing within the onUnload event.

Its a good solution, but finding every internal link within a decent sized site is a nightmare. So we need an automatic way of adding the onClick event to internal links, and it must not overwrite any existing onClick events we have already set up (unobtrusive javascript).

Check this out:


var Page_Enter;
var TimeLimit=20;
var Page_ShowPopOnExit=false;
var MySiteDomain='YOURSITE.COM';

function XBrowserAddHandlerPops(target,eventName,handlerName) {
  if ( target.addEventListener ) {
    target.addEventListener(eventName, function(e){target[handlerName](e);}, false);
  } else if ( target.attachEvent ) {
    target.attachEvent("on" + eventName, function(e){target[handlerName](e);});
  } else {
    var originalHandler = target["on" + eventName];
    if ( originalHandler ) {
      target["on" + eventName] = function(e){originalHandler(e);target[handlerName](e);};
    } else {
      target["on" + eventName] = target[handlerName];
    }
  }
}

function InternalLink() {
	Page_ShowPopOnExit = false;
}

function PageEnter() {
   Page_Enter=new Date();
}

function SiteExit() {
   var time_dif;
   var Page_Exit=new Date();
   time_dif=(Page_Exit.getTime()-Page_Enter.getTime())/1000;
   time_dif=Math.round(time_dif);
   if (time_dif<=TimeLimit && Page_ShowPopOnExit==true)
	{
	alert('Here is your popup!');
	}
}

function LinkConvert()
{
var href;
	var anchors = document.getElementsByTagName('a');

	for(var y=0; y<anchors.length; y++)
	{
		href = anchors[y].href.toLowerCase();
		if (!(href.indexOf("http://")!=-1 && href.indexOf(MySiteDomain)==-1))
			{
			anchors[y].clickhandler=InternalLink
			XBrowserAddHandlerPops(anchors[y],"click","clickhandler");
			}
	}
}

XBrowserAddHandlerPops(window,"load","PageEnter");
XBrowserAddHandlerPops(window,"load","LinkConvert");
XBrowserAddHandlerPops(window,"unload","SiteExit");
Page_ShowPopOnExit=true;

Save this as popup.js

The javascript does a few things.

  1. As soon as the page is finished loading a copy of the time is stored, so we can tell how long they have been on the page.
  2. All internal links have an onClick event handler added. An internal link is determined as one is missing ‘http://’ (internal relative links do not have the http:// ) and your domain name in the href. Note: If you are using javascript links for internal navigation then this method will not work. However, it should be easy to add the ‘Page_ShowPopOnExit = false;’ to your javascript link code.
  3. When the page unloads 2 checks are done; Has the person left the page within XX seconds? (if they stay 5 minutes then perhaps they liked your site, so no popup for them). Is the visitor following an internal link? If the answers are Yes & No respectively, then show them a pop.

Great, but if we just add this .js file to every page on our site then even people who directly type in our URL can be shown pops. These are the hardest of our hardcore fans, and should never get a pop. Also, I only want to show pops to people that hit my site from a search engine & immediately leave - if they visit more than 1 page then no pop for them.

So we need to inspect the Referrer, and check that they are coming from a search engine. I’m going to do this server side so I can cut down on my page size if the visitor is not pop-worthy.

In ASP.Net (put it in the page.load event):


Dim sPageReferrer As String = ""
If Not (Request.UrlReferrer Is Nothing) Then
    sPageReferrer = LCase(Request.UrlReferrer.ToString)
End If
If InStr(sPageReferrer, "google.com") > 0 Or InStr(sPageReferrer, "yahoo.com") > 0 Or InStr(sPageReferrer, "live.com") > 0 Then
    RegisterClientScriptBlock("PopUnder", "<script src='includes/popunder.js' type='text/javascript'></script>")
End If

If you wanted to do this in the .js file, then just change the last bit of popup.js to:


var href = document.referrer.toLowerCase();
if (href.indexOf("google.com")!=-1 || href.indexOf("yahoo.com")!=-1 || href.indexOf("live.com")!=-1)
	{
	XBrowserAddHandlerPops(window,"load","PageEnter");
	XBrowserAddHandlerPops(window,"load","LinkConvert");
	XBrowserAddHandlerPops(window,"unload","SiteExit");
	Page_ShowPopOnExit=true;
	}



If you liked this, then subscribe to my RSS feed

12 comments

  1. chrish Aug 25

    you didn’t put in popup code (where you have alert(’Here is your popup!);), have you found anything more effective than window.open?

  2. Gath Aug 25

    Hi Chrish,

    What you do with your popup is really up to you -

    * Redirect them with a traffic exchange.
    * Show the visitor a CPM ad.
    * Show the visitor a questionairre.

    Myself, I have my CASALE Media popup code in place of the alert(’Here is your popup!);

    Hopefully that clears things up.

    Cheers,
    Gath

  3. Fawad Ahmed Sep 7

    how effective is this popup against most blockers?
    thanks

  4. Gath Sep 17

    Hi Fawad,

    Perhaps I haven’t explained myself very well - this code is all about deciding *when* to show the popup, not *how* to show a popup.

    As I explained above, where I have ‘Here is your popup’ you could place the ad code given to you by your ad company (Casale, Tribal Fusion etc). Let them do the hard work in beating the popup blockers - you just get the extra cash without annoying your visitors.

    That said, I might post about how to beat popup blockers in a future post.

    Cheers,
    Gath

  5. Jean Oct 11

    And how can be done using pop under (casale, fastclick) in a js?

  6. Gath Oct 11

    Hi Jean,

    Just replace the ‘alert(’Here is your popup!);’ code with the popup code supplied by casale.

    Cheers,
    Gath

  7. TJ Dec 17

    Hey, cool post! If I wanted to avoid the pop on a specific external link, what would I have to do?

    Thx!

  8. Rachael Apr 21

    Hi,
    I’m trying this out, but it’s not working for me?

    My web address is a sub domain of another.
    http://rachael.mysite.co.uk

    Also - which bit of the ‘last bit of the JS file’ do I need to change with your last bit of code?

    I’m not sure what needs replacing.

    Cheers!
    Rachael

  9. python programmer Jun 7

    The only problem is that is not a real popup. It’s just a dialogue box. We want real popups that can’t be blocked.

  10. allan Jul 4

    sorry i dont get it… lol

    am i suppose to paste that code between my head tags?

    or am i suppose to save it as a popup.js file and upload it into my sever?

    can some 1 help me out please 4jardin@gmail.com

    Thanks

  1. Looking for an Exit Pop Up Script for a Mac
  2. Javascript Exit Popup