HOWTO: Counting clicks on static links (working example)

Discussion in 'JavaScript' started by ajsa52, Nov 29, 2006.

  1. #1
    Do you have a page with links ordered by clicks on them ? Probably is a directory or an exchange links page.
    If you want to sell or exchange links I recommend you to use static links, because you'll sell/trade better.
    Here I provide an example for counting clicks on static links, including many comments.
    The trick is to add dynamically "onclick handlers" to the anchor elements after loading the document.

    
    <html>
    
    <!-- Function to be called after loading the document (option1) -->
    <body onload="addHandlers()">
    
    <script type="text/javascript">
      // Function to be used
      function count_link_real()
      {
        i = new Image();
        h = Math.random();
        // Fill with your own script page.     
        //    'Id' Must identify the URL clicked. 
        //    'h' Parameter to be ignored on your script. Is to force the browser to get that page (avoiding cache problems)
        // With the following instruction your browser will try to get an image from "yoursite.com", invoking your real counting
        // script on your server. There you'll increment the counter related to "id", but there's no need to return anything, 
        // because the image 'i' is not displayed
        i.src= 'http://www.yoursite.com/click-count.php?id='+this.id+'&amp;h='+h;
        return true;
      }
      
      // Function to be removed, only for your testings
      function count_link_test()
      {
        idco = this.id + "_co";
        co = parseInt( document.getElementById(idco).getAttribute('value') );
        document.getElementById(idco).setAttribute('value', co + 1 );
      }
      
      // The event handler will be added dynamically to every "a" tag on document with an "id" attribute
      // You can modify this to set your own requirements, example: only "a" tags with "class" attribute equal to "out"
      function addHandlers()
      {
        var a = document.getElementsByTagName("a");
        for(i=0; i<a.length; i++)
        {
          if(a[i].id != '')
          {
            // The funcion 'count_link_test' is for testing, you should use 'count_link_real'
            a[i].onclick = count_link_test;
            // a[i].onclick = count_link_real; 
          }
        }
      }
      
    </script> 
    
     <a id="go" href="http://www.google.com" target="_blank">To Google</a>
     <!-- This input is only for testing -->
     =<input id="go_co" value="1" readonly="readonly" size="3"></input>
     <br />
     <a id="ya" href="http://www.yahoo.com" target="_blank">To Yahoo</a>
     <!-- This input is only for testing -->
     =<input id="ya_co" value="1" readonly="readonly" size="3"></input>
     
    
    <!-- Function to be called after loading the document (option2) -->
    <script type="text/javascript">
      addHandlers();
    </script> 
    
    </body>
    </html>
    
    Code (markup):

     
    ajsa52, Nov 29, 2006 IP