2

First of all, I understand pre-optimization is the root of all evil (and I have a nasty tendency of falling into that trap). However, I feel I must think this through, because the implications of taking a wrong approach can result in a lengthy rewrite of the code.

How can I reliably track a visitor's time spent listening to music through the page's audio player?

I'm using jPlayer on my website to serve audio content. I want to reward my users with points for listening:

  • Every full minute spent listening rewards a point.
  • No points are rewarded for fractions of a minute.
  • Audio files are usually between 30 minutes and 2 hours long. Users can start and stop playback at any time, and scrub through the file as they please.

I have no experience with timing sensitive activity tracking. I'm not aware of any best practices for something like this. Does anyone have experience with this sort of visitor tracking?

I've come up with two potential solutions, but before programming all of that, I need advice on which one to pursue and why.


Method 1: Save start and stop events

  • When the $.jPlayer.event.play event is triggered, insert a record in database with start time.
  • When the $.jPlayer.event.pause or $.jPlayer.event.ended events are triggered, calculate amount of minutes between saved start-time record and the current time.
  • To prevent users from hammering the database, JavaScript would wait for 60 seconds before inserting the record in database.

Pro
Database traffic is kept to a minimum: one insert and one delete from the table for each consecutive playback longer than 1 minute.

Con
There is a high chance a users will not be rewarded anything if they don't pause playback before leaving the site, closing the tab or closing the browser. Between the start and stop events no other tracking occurs so their generated reward is completely lost.

Method 2: Periodic saving of progress

  • When the $.jPlayer.event.play event is triggered, save a timestamp client-side and start a loop. This loop could interval as often as once a minute.
  • At each interval, update the user's points in the database with the appropriate reward.
  • When the $.jPlayer.event.pause or $.jPlayer.event.ended events are triggered, break the loop and clear the timestamp.

Pro
With an interval of 1 minute, the most a user would miss out on in case they navigate away from the site, close the tab or close the browser, is a single point. That's a lot better than losing all progress made using Method 1.

Con
With a high traffic website and many users playing music simultaneously, could it put too much strain on the database?

3 Answers 3

2

I know this question is really old ... but for anyone stumbling across this: Google has a limit as to how many hits per session they allow. As of today (march 2021) the limit is still 500 hits per session. https://developers.google.com/analytics/devguides/collection/gajs/limits-quotas

So if you trigger an event every second for a 30 minute video you'll be sending 1800 hits for that one audio file alone.

1

One hit per second for tracking purposes would be reasonable.

Google Analytics is a good case study for it. Google Analytics has "events" that you can grammatically send via JavaScript and would allow Google Analytics to track user actions such as start and stop. You could also send "continuing to play" events every minute of audio. From their collection limits and quotas:

analytics.js:

Each analytics.js tracker object starts with 20 hits that are replenished at a rate of 2 hit per second. Applies to all hits except for ecommerce (item or transaction).

So the Google Analytics API would allow tracking to the half second. If Google Analytics allows it, it must be manageable even at huge scale.


Another way to look at is is in terms of overhead. If you are already streaming music to the users you have to have a powerful enough server for that. A ping track a minute is going to use an infinitesimal amount of bandwidth compared to streaming music. It may require an additional connection to your server. That would require configuring your server to accept more connections, but connections are generally not a super scarce resource.

2
  • But that is Google Analytics in the client hitting Google-owned infrastructure. I'm not worried about the data on the wire, just the receiving end. I'm sure Google has server powerful enough to swallow data at that rate. Not sure how I can compare Google to my own case here. Commented Jan 21, 2016 at 13:52
  • I think you can. Yes, Google has powerful servers but they are also providing analytics services for millions of sites, some of which have ridiculous amounts of traffic. If they have determined reasonable limits with those parameters I'd think that anything you implemented yourself for just yourself could easily operate with similar limits. I'm not sure how else other than case studies else this question can be answered. If not that, it is either a matter of opinion or "go test it yourself and find out." Commented Jan 21, 2016 at 14:18
0

You can use the "Google Tag manager" to create custom events based on the JQuerry, CSS etc. Push the data into Google analytics.

1
  • And how would I then use this data in my own database and scripts? Data in GA is anonymized. I need to have this data in my own db. Can you expand your answer to explain the solution? Commented Feb 21, 2016 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.