404 Error Page: Report, Monetize and Analyse

After your websites getting more pages and links, the chance that a visitor will follow a broken link to your site exists. If a visitor is trying to access a page on your site, your 404 error page should provide the visitor a “Not found” error. The response is by default some unfriendly page with spare information about the error which let most visitors stop visiting your website. By using these 404 errors the right way, it’s possible to collect important information like:

  • Of course the broken link or URL
  • The HTTP_REFERER information where the dead link is available
  • How often people try to access the bad URL

Using the right tools you’re able to turn 404 error page into a powerful resource:

  • Provide a site search feature and let people search what they are looking
  • Add advertisements to your error page and start earning money
  • Learn about what people like to see on your site

In this tutorial we will show you how-to:

  • Create a dynamic error page using the Google Site search and Google Adsense content ads
  • Setup Google Analytics to track 404 errors using a filter
  • Set the site search feature with Google Analytics to collect the search queries from your visitor

Error reporting page

With the Apache webserver it’s possible to use custom directives for your error script, place this code into your .htaccess file (place the file into the site root):

ErrorDocument 400 /error.php?err=400
ErrorDocument 401 /error.php?err=401
ErrorDocument 403 /error.php?err=403
ErrorDocument 404 /error.php?err=404
ErrorDocument 500 /error.php?err=500

We use for the custom error script the most common HTTP errors.
Next we need to create a PHP script called error.php which can handle the different errors:

<?php
$errorNum = (int)$_GET['err'];
$err_str = array(404=>'Not Found', 400=>'Bad Request', 401=>'Unauthorized', 403=>'Forbidden', 500=>'Internal Server Error');
echo '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>'.$err_str[$errorNum].'</title>
</head>
<body>
<h1>An error occured: '.$err_str[$errorNum].'</h1>
 
<!-- place here your advertisement -->
 
<!-- place here your Google analytics code -->
</body>
</html>';
?>

This script will show the different errors and also some advertisement if you add the ad code. Don’t forget to add the GA code snippet.

Track broken links in Google Analytics

In case of a 404 error the page title on this custom 404 error page will be “Not Found”. We use the page title as a filter in Google Analytics to track the page views. Create a new profile for the site you’re working on and add this filter:

404 Error Page

Adding Google Site Search to your 404 error page

If you haven’t done yet, create a Google site search for your website. Add only your own website to the list of searched sites and don’t search the entire web. Add your Google Adsense ID (section “Make Money”) and head to the section “Look and feel” and select the option Iframe. Choose a style for the search form / result and maybe you like to customize the style. Push now the button “Get code” (or enter the section “Get code” from the sidebar) and enter there the URL from your error page.
Copy / paste the code for the search form and the results into the body section from your error page. Your completed 404 error page will look like:

<?php
$errorNum = (int)$_GET['err'];
$err_str = array(404=>'Not Found', 400=>'Bad Request', 401=>'Unauthorized', 403=>'Forbidden', 500=>'Internal Server Error');
echo '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>'.$err_str[$errorNum].'</title>
</head>
<body>
<h1>An error occured: '.$err_str[$errorNum].'</h1>
 
<form action="http://www.yourdomain.com/error.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="thisCodeIsProvidedByGoogleCSE" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Zoeken" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
 
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>';
 
if (empty($_GET['q'])) { // show the ad only if there is no search
	echo '
<!-- place here your advertisement -->';
} 
echo '
<!-- place here your Google Analytics code -->
</body>
</html>';
?>

We placed the add code also into some IF clause, because there should not be another Google Adsense advertisement beside the Google ads from the result page.

Enable site search tracking in Google Analytics

The code for the 404 error page is complete and we move to the last step: Tracking the site search queries from the error page. To do this we need to go in Google Analytics to the profile we created for the error page and click Edit (twice), check the setting Do Track Site Search, enter a “q” as the “Query Parameter” and click Safe Changes.

This 404 error page is very basic and you need to integrate your sites web template to make it complete. If you like this tutorial and you have used the code on your own site please share the URL to your new or updated error page. Even if you don’t like to use the code from this page, we advice to track the errors and also the site search queries from your visitors. If you have questions or comments please post them below.

Comments

  1. very helpful. Thanks.
    Do you recommend a good tool to track all the dead links of the website ?

  2. The strategy to detect links is not about finding dead links on your own site (I hope you don’t have some).
    This is about dead links from external sites. Check also the information about your site provided by the google webmaster tools

  3. Years ago in the early days of the web there have been buisness models in making money of 404 traffic,
    or free hosting services taking only your 404 traffic. Maybe something of that still exists.

  4. Hi John,
    right th idea from this article is based on this concept. Accept one thing, the strategy is to serve your visitors better content ;)

  5. You forgot something important:

    Setting the header() via PHP to the appropriate error code! Without that, the 404 error pages would return an 200/ok header and counted as duplicated content…

    With the correct headers, track and analysis is easier through tools like Google Webmaster tools.

  6. Hi,
    You don’t need to set a header because Apache will send the header to the browser.
    Of course you have to instruct the search engines to NOT index the error reporting script.

    I using a similar script for finalwebsites.com and never found a file that doesn’t exists in the index.

  7. Great that you like (and translated) the tutorial.

  8. I found this modified Google Analytics code snippet, which is able to track information about the HTTP_REFERER:

    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? " https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    try{
    var pageTracker = _gat._getTracker("UA-xxxxx-x");
    pageTracker._trackPageview("/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);
    } catch(err) {}
    </script>

    More information about the snippet:
    http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=86927

  9. Help here!
    I’ve done everything, the only thing that not working are 404.
    when ever I type for example http://www.mysite.com/fgfgf and get standard error by browser not a 404 page.

    Thanks…

  10. Do you created the .htaccess file with the directives to the error document?

  11. Hy
    Is a good Ideea to redirect the non existed url (404 error) to the home page, via php?

  12. Hi,
    it’s an option, but it depends on:

    The non existing URL is removed (it’s better to redirect using a 301)
    The URL never exists

    For the last option a redirect to the homepage will not hurt, but don’t forget to use the canonical link element on your homepage

  13. Sure if you redirect your all expired URLs to your homepage, than is this not the best idea :)
    The message in this tutorial is to use a 404 page

Because of all the spam attemps I've decided to close the comment form at this time. If you have have any questions or comments please post them by using Google+ or Twitter (the links to my profiles are located at the top of this page).