Track and view the number of visitors that visit your website and the pages they visit for the past 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 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 use the correct API KEY as well. And finally don't forget to include the token hidden input field, as shown from the bellow example code.

        
        <script type="text/javascript">
            function setTraffic(){
               var CSRF_TOKEN = document.getElementById('IDtoken').value;
               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>
        <input type="hidden" id="IDtoken" value="{{csrf_token()}}">
      
  

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 CSRF_TOKEN = document.getElementById('IDtoken').value;
               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>
        <input type="hidden" id="IDtoken" value="{{csrf_token()}}">
 ); ?>
    </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 Request 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 for the past 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 use the correct API KEY as well. And finally don't forget to include the token hidden input field, as shown from the bellow example code.

    
        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 all pages that Visitors visit par day for the past 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. And finally don't forget the to include the IDtoken hidden input field, as shown from the bellow example code.

    
        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 past 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. And finally don't forget to include the token hidden input field, as shown from the bellow example code.

    
        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 visitor's traffic. See the bellow Example;

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

CanvasJS is a commercial product that requires the purchase of a license. Without a commercial license, you can use it for evaluation purposes for up to 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 CSRF_TOKEN = document.getElementById("IDtoken").value;
  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>
   <input type="hidden" id="IDtoken" value="{{ csrf_token() }}">
</body>
</html>
    

Feel Free to Contact me if you need my help.