The Last CodeBender Web Traffic API

Tract and view the number of visitors that visit your website and the pages they visit for the pass seven days, for FREE in three simple steps

View Life Demo


1 Enter You Email and the URL of your website to generate an API key

2 Install on your website

Copy and paste the Javascript code in the header of your web page. You can actually put the javascript code anywhere you want on your webpage.
But if you want to track the web pages that your visitors visit, then i will recommend you to put or include the code in all your web pages.
NOTE: Make sure you use the correct URL you use in generating the API KEY, and also use the correct API KEY as well.

        
        <script type="text/javascript">
            function setTraffic(){
               var urlLink ="https://example.com"; //Replace this with your URL
               var key = "abcdefghijkl1234567890"; //Replace this with your API KEY
               var page = window.location.pathname;
               var vars  = "_token="+CSRF_TOKEN+"&apiKey="+key+"&URL="+urlLink+"&Page="+page;
               var hr = new XMLHttpRequest();
               var url = "https://thelastcodebender.com/ApiTrafficAuthentication?"+vars;
               hr.open("GET", url, true);
               hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               hr.onreadystatechange = function() {
                 if (hr.readyState == 4 && hr.status == 200) {
                   var return_data = JSON.parse(hr.responseText);
                   console.log(return_data.Action);  
                 }
               }
               hr.send(vars);
            }
            setTraffic();
        </script>
     
      
  

Example on how to use it

    
        
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
         <?php echo htmlspecialchars( <script type="text/javascript">
            function setTraffic(){
               var urlLink ="https://example.com"; //Replace this with your URL
               var key = "abcdefghijkl1234567890"; //Replace this with your API KEY
               var page = window.location.pathname;
               var vars  = "_token="+CSRF_TOKEN+"&apiKey="+key+"&URL="+urlLink+"&Page="+page;
               var hr = new XMLHttpRequest();
               var url = "https://thelastcodebender.com/ApiTrafficAuthentication?"+vars;
               hr.open("GET", url, true);
               hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               hr.onreadystatechange = function() {
                 if (hr.readyState == 4 && hr.status == 200) {
                   var return_data = JSON.parse(hr.responseText);
                   console.log(return_data.Action);  
                 }
               }
               hr.send(vars);
            }
            setTraffic();
        </script>
     
 ); ?>
    </head>

    <body>

        

    </body>
</html>
    

3 View Visitors Traffic

You can view the traffic of your website BY the Date the visitors visit or BY the pages they visit or BY both date and pages they visit.

See the bellow examples on how you can use API GET Requet to get the traffic of your website using your correct API KEY and URL.

Example 1: (GET BY DATE). This will return the traffic Date and the sum of the Visitors that visit par day day for the pass seven days, in a JSON format.

Run the following request on your browser URL. NOTE: Make sure you use the correct URL you use in generating the API KEY, and also use the correct API KEY as well.

    
        

https://thelastcodebender.com/benderVisitorsDate?apiKey=your_API_KEY&URL=your_URL Example: https://thelastcodebender.com/benderVisitorsDate?apiKey=1234567890abcedfghjkl&URL=https://thelastcodebender.com

Example 2: (GET BY PAGE). This will return the sum of the all pages that Visitors visit par day for the pass seven days, in a JSON format.

Run the following request on your browser URL. NOTE: Make sure you use the correct URL you use in generating the API KEY, and also use the correct API KEY as well.

    
        

https://thelastcodebender.com/benderVisitorsPage?apiKey=your_API_KEY&URL=your_URL Example: https://thelastcodebender.com/benderVisitorsPage?apiKey=1234567890abcedfghjkl&URL=https://thelastcodebender.com

Example 3: (GET BY PAGE and PAGE). This will return the sum of the all pages and the date the Visitors visit the pages for the pass seven days, in a JSON format.

Run the following request on your browser URL. NOTE: Make sure you use the correct URL you use in generating the API KEY, and also use the correct API KEY as well.

    
        

https://thelastcodebender.com/benderVisitorsDateAndPage?apiKey=your_API_KEY&URL=your_URL Example: https://thelastcodebender.com/benderVisitorsDateAndPage?apiKey=1234567890abcedfghjkl&URL=https://thelastcodebender.com

You can also use Ajax with JSON call back function to get all the visitors traffic. See the bellow Example;

In the example bellow, the benderVisitorsDate get Request method is use to get the traffic Date and the sum of the Visitors that visit par day, for the pass seven days, in a JSON format. Canvasjs is use to display the analysis of the traffic in bar chart format.

CanvasJS is a commercial product which requires purchase of license. Without a commercial license you can use it for evaluation purposes for upto 30 days. Please refer to the following link for further details. https://canvasjs.com/license/

View Life Demo
    
        
<!DOCTYPE html>
<html>
<head>
  <title>TheLastCodeBender Visitor Traffic</title>
</head>
<body>
<div class="row" id="chartContainer">
       
      </div>
        <hr>
<script>
window.onload = function () {
var objectChart="" ;
var countNum = 3289000;
var x='9.3'; var y;
for (var i = 2000; i < 2017; i++) {

    objectChart = objectChart.concat("{ y: "+countNum+", label: 'Venezuela' },");

    countNum += 9000;
}

var val = "";

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    title:{
        text: "TheLastCodeBender Web Traffic"
    },
    axisY: {
        title: "Visitors"
    },
    data: [{        
        type: "column",  
        showInLegend: true, 
        legendMarkerColor: "grey",
        legendText: "Visit Date",
        dataPoints: [    
          
            
            
        ]
    }]
});
chart.render();



function Traffic(){
  var urlLink = "https://example.com"; //Replace this with your URL
  var key = "abcdefghijkl1234567890"; //Replace this with your API KEY
  var vars  = "_token="+CSRF_TOKEN+"&apiKey="+key+"&URL="+urlLink;
  var hr = new XMLHttpRequest();
  var url = "benderVisitorsDate?"+vars;
  hr.open("GET", url, true);
  hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  hr.onreadystatechange = function() {
    if (hr.readyState == 4 && hr.status == 200) {
      var return_data = JSON.parse(hr.responseText);

      console.log(return_data);
      
      for (var i= 0; i < 6; ) { 
         var yesterday = new Date(new Date().setDate(new Date().getDate()-i));
         yesterday = yesterday.toJSON().slice(0,10).replace(/-/g,'-');
       
            let array = return_data;
            let checkDate = array.filter(x => x===yesterday).length; 
       

            chart.options.title.text = "Visitors Traffic";
            chart.options.data[0].dataPoints.push({ y: checkDate, label: yesterday});
            chart.render();

         i++;
       }
     
    }
  }
  hr.send(vars);


}

Traffic();

}


</script>
<button id="addDataPoint">Add Data Point</button> 
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
    

Feel Free to Contact me if you need my help.