I have hosted a basic webpage on amazon S3. The page is implemented in HTML, CSS and Javascript. I wish to record the number of times a button (which is present on the page) was clicked. Also since S3 support static web hosting only and considering my requirement needs server side scripting, is this question even valid? I do not need a fancy solution, I just need to record the number of times a button was clicked and store it in some simple text file residing in the bucket.

By number of times the button was clicked , I mean in all how many times was this button clicked. This web page will be accessed by many users. I want a cumulative number of clicks that occurred. So if i access the web page today and click the button, the number of click bees 1, if i do the same tomorrow, the number of clicks bees 2

EDIT: Scenario Consider the scenario. I have three users A, B and C. Suppose for one week, 'A' visits the website 3 times a day and clicks the button 4 times in all. B visits the website only once and clicks it 2 times. C visits it twice and clicks the button 1 time. So the total number i should be seeing by the end of the week is 7 (4 + 2 + 1). Ill add it in the edit.

I have hosted a basic webpage on amazon S3. The page is implemented in HTML, CSS and Javascript. I wish to record the number of times a button (which is present on the page) was clicked. Also since S3 support static web hosting only and considering my requirement needs server side scripting, is this question even valid? I do not need a fancy solution, I just need to record the number of times a button was clicked and store it in some simple text file residing in the bucket.

By number of times the button was clicked , I mean in all how many times was this button clicked. This web page will be accessed by many users. I want a cumulative number of clicks that occurred. So if i access the web page today and click the button, the number of click bees 1, if i do the same tomorrow, the number of clicks bees 2

EDIT: Scenario Consider the scenario. I have three users A, B and C. Suppose for one week, 'A' visits the website 3 times a day and clicks the button 4 times in all. B visits the website only once and clicks it 2 times. C visits it twice and clicks the button 1 time. So the total number i should be seeing by the end of the week is 7 (4 + 2 + 1). Ill add it in the edit.

• javascript
• jquery
• html
• amazon-web-services
• amazon-s3

• what had you tried? – Nagaraju Commented Apr 26, 2017 at 5:22
• I thought of saving a json file in the S3 bucket, but since this bees a server side requirement, i am confused about how will this be carried out using javascript. Take a look at this: askyb./javascript/… – Harshil Commented Apr 26, 2017 at 5:26
• save your clicks in database, saving it in json(frontend) might be a bad idea – Nagaraju Commented Apr 26, 2017 at 5:28
• It would be helpful if you could provide more information about your requirements. For example: Do you wish the button to do anything aside from counting how many times it was clicked? Should information be displayed or should users be taken to another web page? How will you be later using this value -- that is, should the count be displayed on the page, or will another application be using that value in some way? Why do you wish to store the result in a text file? That is not as efficient as storing it inside a database. These answers will help us to remend an appropriate solution. – John Rotenstein Commented Apr 26, 2017 at 5:49
• Well, I don't want to display it on anywhere. The button will have other functionality. That I have taken care of. I need to store the number of clicks to see how many times was the functionality used. In simple words, I just want to see how many times was the functionality used. Maybe after six months I want to see the how many times was the functionality used. I DO NOT want to see number of visits. One visit may result into multiple clicks. I want to store this number viz. Overall number of times the functionality was used. Text files was just some thing i wrote randomly. – Harshil Commented Apr 26, 2017 at 5:54

4 Answers 4

This cannot be acplished totally on the client (web browser) because it would need the ability to "read the current value" and then "write the new value" somewhere. This opens security holes because anyone reading the Javascript could modify its behavior.

Instead, you need to be able to trigger some server-side code that will increment the count without giving any additional capabilities.

The simplest option (depending upon your abilities) would probably be:

• Create an Amazon DynamoDB table to store the count
• Create an AWS Lambda function that increments the count in some database
• Create an API using AWS API Gateway that calls the Lambda function

DynamoDB pricing is only about half a cent per hour at the slowest speed (probably sufficient for your need) and 25c per GB/month. That's not going to cost much.

You'd possibly fit within the free usage tier for Lambda and the (first year) free tier for API Gateway.

The Lambda function would merely be an Update expression to increment the value.

Or, quick and dirty...

If all of this sounds too plex, you could simply update DynamoDB directly from JavaScript (see DynamoDB for Javascript – cheatsheet for examples). The downside is you'd need to provide some security credentials to the code, but you could limit them to only being able to call the Update function on a specific table. Not as secure, but the worst thing they could do is update your value to some very strange numbers (whereas the server version would only allow one increment at a time).

Frankly, you'll probably want to start getting smarter about recording clicks, by dividing it into time periods (eg hour, day) and possibly by User or demographics, so you might end up recording more details about each click and then calculating totals separately.

Guess what... this is known as website analytics!

You might be better off simply implementing a service like Google Analytics that gives you all of this functionality with very little effort.

Well, as you mentioned, you will gonna need a server-side language to do this properly and save your data in a database, but still you can use some tricks to do this with only javascript, one of them is storing your click counts in local storage, so at least until user not removed the storage data, your value is valid!

I create a simple example.

Javascript :

function countClicks(){
    console.log("Counting Start...");
    var counts = localStorage.getItem('click-counts');//You can use
    if (counts!==null){
        var newClick = parseInt(counts) + 1;
        localStorage.setItem('click-counts', newClick);
    }
    else{
        localStorage.setItem('click-counts', "1");
    }
   document.getElementById("showCounts").innerHTML = counts;
 }

HTML :

<button onclick="countClicks()" >
   Click!
</button>
<div>
  <p id="showCounts"></p>
</div>

You can try it here :

https://jsfiddle/emilvr/35v60xt5/21/

The better option is using some third-party services like Firebase :

https://firebase.google./docs/database/web/start

You have to use client side code for check times of button clicked and store this value into your database for future use :

/*------------// By Using JQuery //----

$(function() {
var i = 0;
$('button').click(function() {
i++;
$("#count").val(i);
// run ajax to save this value dynamically into database 
});
});
--------------------------------*/

// By using javascript 
var i = 0;
function countClick() {
i++;
//alert('here');
document.getElementById("count").value = i ;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button onClick="countClick()">Click Me</button><br>
Total Count<input type="text" id="count" disabled >