Keep track of how many times an HTML5 audio element is played?

Question

What is the best way to track how many times an HTML5 audio element is played?

(we can also use Google Analytics if this is the best approach)

Answer 1

HTML5 Audio elements have basic callbacks.

You can combine this with a basic event callback library, such as jQuery, to attach these events by default:

$("audio").bind("play", function(){ _gaq.push(["_trackEvent","Audio", "play", $(this).attr('src')]); }); 

You can also do similar tracking events when people finish audio:

 $("audio").bind("ended", function(){ _gaq.push(["_trackEvent","Audio", "ended", $(this).attr('src')]); }); 

This can be made more concise by combining them into one call:

 $("audio").bind("play ended", function(e){ _gaq.push(["_trackEvent","Audio", e.type, $(this).attr('src')]); }); 

You can also add events in the attributes of the <audio> like onplay and onended , but I would not recommend this approach.

Answer 2

If you switched to Universal Analytics and don’t use classic analytics, you will use the send event, not the push event: ga ('send', 'event', 'Audio', e.type, $ (this) .attr ('SRC ')); In addition, if you just tested this yourself, make sure that you have not created a filter to filter your own IP address.