Download counter via dynamic content

support
1

I see that 0.13 brings support for dynamic content and wonder whether it would be possible to realize download counter with it?

There are pages on the web site containing links for audio (*.mp3) files and I’d like that whenever some visitor (public page) click and download some file, that it triggers some (probably) JS method and increase appropriate counter for the file, store it in JSON/CSV ‘database’ and then read from it and render the ‘download counter’ on the page besides file’s link.

Any pointer how to realize it with Hugo?

1 Like
2

The “Dynamic content” feature has a misleading name, we should consider finding another name for it.

What you want cannot be implemented with Hugo alone.

But it is easy to do via Javascript and some external store (e.g. Firebase)

3

You could accomplish something like this with Hugo + JS or something else. Hugo can render the pages from JSON file, but the pages will still be static HTML files. It will only change the values when you re-render the site.

4

spf13 discuss@gohugo.io writes:

You could accomplish something like this with Hugo + JS or something
else. Hugo can render the pages from JSON file, but the pages will
still be static HTML files. It will only change the values when you
re-render the site.

That’s acceptable and something I was thinking about: Hugo + JS + file
(JSON/CSV format) believing that there is no need for some ‘database’ as
suggested by bjornerik.

5

I too am curious about how @spf13 suggests solving this without some server-side state.

6

Oh you would definitely need server side state, but it could be a very simple script that modifies a JSON file. The point is you don’t need a database, you can so it really simply without any extra dependencies. I’m envisioning how the CGI counters worked in the 90’s. Just incremented to a file. It’s not very safe or secure, but it’s only a counter, so it may not need the extra complexity.
Best,Steve

Steve Francia
http://stevefrancia.comhttp://spf13.comhttp://twitter.com/spf13

7

bjornerik discuss@gohugo.io writes:

I too am curious about how @spf13 suggests solving this without some
server-side state.

Storing in flat file in JSON/CSV format?

8

Storing some value in a JSON / CSV is “server-side state” . My point is: This isn’t (in my head) solveable with Hugo alone, and not by Hugo + client side JS alone.

9

You are correct. Needs server state somewhere and some mechanism to interact with it. I should have been more clear. Thanks.

10

bjornerik discuss@gohugo.io writes:

Storing some value in a JSON / CSV is “server-side state” . My point
is: This isn’t (in my head) solveable with Hugo alone, and not by Hugo

  • client side JS alone.

That’s clear now…any recommendation how to do it using Go as
server-side language?

11

Haven’t tried it myself, but this looks interesting: https://github.com/theromis/ngx_counter_zone

Not sure if it’s persistent though.

12

I know that this post is from '15 but does anyone have example code how to update on server json file?
Hugo is static builder and is not dynamic web server…i done in my blog page url links that downloads a file…file is read from json and retrieved its contents with $.getJSON and download link is increment by one and li span text is updated (it shows number of downloaded files)…then i $.ajax to call html page on server that needs to read local json file and update it. But as this is security restriction how can i do it in Hugo or shortcodes or any other way?

this is code that is calling on hugo server html file to update json file locally:

$.ajax
        ({
          type: 'GET',
          dataType : 'json',
          async: false,
          url: 'http://'+ window.location.host + '/assets/json/downloads.html',
          data: { data: JSON.stringify(file) },
          success: function () { window.open(link.attr('href')); },
          failure: function() { alert("Error!"); }
        });

and this is downloads.html that reads successfully json file localy and modify json value using key name:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

<script type="text/javascript">
  $.getJSON("https://api.ipify.org/?format=json", function(e) { 
      var myParam = location.search.split('data=')[1]

      $.getJSON('/assets/json/downloads.json', function(data) {
        data[myParam] = parseInt(data[myParam]) + 1;
        
        $.each(data, function(key, value) {
            console.log(key+"..."+value);
        });
      });
  });
</script>

Now i im stuck how to write these changes to local file '/assets/json/downloads.json'?

Any help?