Track when user listens to a sound file

General questions
1

After som troubles related to php.ini -settings I was up and running. Find the Piwik-reports generated really great. Perhaps I missed something in documentation but I have an issue around a page where a couple of sound files (songs) are displayed with the browsers standard soundfile player. It would be great to see how many times those songs was selected. In my mind streaming a sound file is some kind of ‘download’ but there’s no representation in that Piwik section.

Is there any way to identify how many times visitors have listened to certain songs?

2

Hi,

Maybe this helps you:
https://piwik.org/faq/new-to-piwik/faq_47/

1 Like
3

Perfect tip but don’t know if it works here? This snippet is used to display a sound controler:

<audio controls
  source src="sounds/04 Dont Keep Me Wondering - The Kallman Sisters Band.mp3" type="audio/mpeg"
  source src="horse.ogg" type="audio/ogg"
  embed height="50" width="300" src="sounds/04 Dont Keep Me Wondering - The Kallman Sisters Band.mp3">
 </audio>

Displayed at http://www.kallmansistersband.se/sound.php?lang=1&page=3

The ‘force’ tip was used with (a) that is a ‘link’ reference. In my case controlers are displayed on screen. Nothing in the actual code indicates that a user actually started (all controlers at stop when arriving) one of the sound files.

Do you see a solution of that?
(had to try and get rid of brackets as it first didn’t was visible in posting)

4

Hi,

If it isn’t a link to an mp3 file users click on, but an interaction on the website, you’ll need to use event tracking.

So in the javascript of your media player you need to run _paq.push(['trackEvent', 'Documentary', 'Play', 'Thrive']); (or something similar) when the user starts playing the audio.

5

I just saw that you are using the html <audio> tag

I haven’t tested it but something like this should work:

var v = document.getElementsByTagName("audio")[0]; //select your audio element
v.addEventListener("playing", function() { 
    _paq.push(['trackEvent', 'AudioPlayer', 'Play', 'someThingElse']);
}, true);

In similar ways you could also track volumechange and more.

If you don’t like playing around with javascript and want far more tracking you can use the MediaAnalytics plugin, which out of the box tracks this and more.

6

Great input as allways Lukas :). You read and respond to the actual question. Appriciate that a lot. I don’t refer to this forum but in many cases people don’t read what you ask about, start some kind of parallell discussion and just create a lot of confusion. So far every posting you’ve made has been precise and accurate!

Hope you have some more patience with me. Piwiks works and this feature is probably all I need to leave it as is.

I have some scripting background and at least it helps to understand a bit of java script logics. But I rely on trying to adapt my cases to working snippets, as I don’t have the ambition to be a creative java-scripter. I’ve also used some java-snippets before and managed then to edit them correctly. Hopefully I also can adapt to the trackEvent function you suggested. It seems to be the perfect solution to get the kind of statistics I need.

First time I copied in code here it was invisible so as there are restrictions around that I try to avoid it. I refer my notifications to the example presented below Tracking Events at https://piwik.org/docs/event-tracking/.

I’m a bit confused when it comes to the variables/arguments passed and how I connect an individual reading of each player. There are totally six media players on the page, four of them for soundfiles and two for videos.

I start with how I’ve interpreted the java scripts I have on other pages. As I understand it a declaration of what java is used on the page has to be made within the ‘head’ tag. I have lots of examples of that, not to mention the Piwik code I pasted in all pages. Then there use to be some kind of reference to those declarations where the script is used. I have a script that generates a slide show (declared within the head-tag in connection with a named variable, then used as a named div-tag in the HTML.

So, a declaration at ‘head’ and a reference to that in the HTML code. I can see the logic in that.

The function is ‘trackEvent(category, action, [name], [value])’

The example used is describes as the intention ‘to track a click on the Play button of the Documentary Thrive’. I understand ‘click on the Play button’ :slight_smile: but it’s a bit unclear what ‘Documentary Thrive’ stands for? It’s very important to understand later on.

I then see the suggested script ‘_paq.push([‘trackEvent’, ‘Documentary’, ‘Play’, ‘Thrive’]);’

Comparing that to other java I use it’s a row used in declaration in ‘head’. So from that you just have to replace the example variables with your own. Trouble from here.

I understand the syntax as there is some hidden java function called ‘_pac.push’ that needs arguments.
The 1st argument within brackets is the name of a function, ‘trackEvent’.
The 3rd is obvious. You can also put in anotherone with argument ‘Duration’ to get a record of how long the file played.
The 2nd and 4th is a problem for me. What is ‘Documentary’ and ‘Thrive’ in this case?

Before we learned that we intend to track click ‘on the Play button of the Documentary Thrive’. I can’t see any logic how those two words is related to two different arguments in a function? So my trying-out stops here.

The next task would be to somewhere in HTML connect to the declatation. You already know the HTML at the players from the ‘audio-controls’ tag. The player of the two videos has a iframe-tag with URL from src=. Even if I did get the arguments right to start with I don’t know how to implement them at the players. Somehow I have to use uniqe ID’s at the different files so the stats can report what files was played.

Sorry. Couldn’t say this with a few words. Hope it’s understandable at all :wink:

7

Hi,

I understand that the parameters can be confusing. But all of them are just names that you can define how you need them. They are Category, Action, Name and Value, but the last two are optional.
So e.g. you could use _paq.push(['trackEvent', 'MediaPlayer', 'Play', 'Song1']); or _paq.push(['trackEvent', 'MediaPlayer', 'Volume', 'Song1', 10]);. I don’t know how Piwik displays this parameters, so you’ll have to experiment a bit to find out what should be the name and what is the action.

8

Great. But how do the script relate them to each indivdual player in the HTML-code? The line we talk about is in ‘head’ only? (I might be stupid)

9

I tested a bit more and found this Javascript snippet, which seems to do what you want:

var audioTags = document.getElementsByTagName("audio");

for (var index = 0; index < audioTags.length; ++index) {
    var audioTag = audioTags[index];
    audioTag.addEventListener("playing", function() {
        _paq.push(['trackEvent', 'MediaPlayer', 'Play', this.dataset.audioTitle]);
    }, true);

}

It searches for all <audio> tags and listens to the events of each one.

But I guess you not only want to know when a file is played, but also which one.
So I’d recommend you to change the HTML to

<audio controls="" data-audio-title="Songtitle">
  <source src="sounds/00 DontWantYouNoMore &amp; ItsNotMyCrossToBear - The Kallman Sisters Band.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed src="sounds/00 DontWantYouNoMore &amp; ItsNotMyCrossToBear - The Kallman Sisters Band.mp3" height="50" width="300">
 </audio>

That way the third parameter can be set to the Songtitle (this.dataset.audioTitle).

10

Amazing if it works. I have to leave for some hours så I can’t test now. I’ll get back when I’ve tried it.

11

Hi Lukas, It’s late here and will shut down. I tried the code without sucess. Have to double check tomorrow.

12

Can’t get this to work. Searched for any reference Piwik Media and all links connects with the MediaAnalytics Plug-In. Cost too much. This is a small bandpresentation and have to be able to use a ‘free’ script. Perhaps it doesn’t work? Where did you find the öast snippet?

13

Hi,

“found” was the wrong word, I quickly wrote it.
I think the issue is, that the snipped needs to be after the tracking code.

14

I just noticed that I forgot something: When the code is executed, the site has finished loading.

So it needs to be like this instead:

document.addEventListener("DOMContentLoaded", function(event) {
    var audioTags = document.getElementsByTagName("audio");

    for (var index = 0; index < audioTags.length; ++index) {
        var audioTag = audioTags[index];
        audioTag.addEventListener("playing", function() {
            _paq.push(['trackEvent', 'MediaPlayer', 'Play', this.dataset.audioTitle]);
        }, true);

    }
}
15

Sorry, no sucess. Might have to let it go. I tried the script above as initiation java-script like this, where I put the code after the general Piwik java, and it looks like this:

<!-- Piwik original -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["setCookieDomain", "*.www.imatri.se"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//www.imatri.se/analytics/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
    <!-- Piwik Lukas script -->
document.addEventListener("DOMContentLoaded", function(event) {
var audioTags = document.getElementsByTagName("audio");
	
	for (var index = 0; index < audioTags.length; ++index) {
		var audioTag = audioTags[index];
		audioTag.addEventListener("playing", function() {
		_paq.push(['trackEvent', 'MediaPlayer', 'Play', this.dataset.audioTitle]);
	}, true);
		
	}
}

And in the code for the first audio player:

Neither of us knows how a tracking will be listed in Piwik but the most logical place to look to me is from Events -> Events -> Event names. Nothing is shown there with the code above.

Had to pass the full code as the only thing I can check for is the correct numer of brackets. So if you can see something else that have to be edited please let me know. Otherwise I believe I’ll have to give iut up. Time, time, time :wink:

16

The HTML wasn’t visible so I copy a version without tag chars. Hope you can ‘see’ those behind…

audio controls="" data-audio-title="DWYNoMoreINMCrossToBear"
source src=“sounds/00 DontWantYouNoMore & ItsNotMyCrossToBear - The Kallman Sisters Band.mp3” type="audio/mpeg"
source src=“horse.ogg” type="audio/ogg"
embed height=“50” width=“300” src="sounds/00 DontWantYouNoMore & ItsNotMyCrossToBear - The Kallman Sisters Band.mp3"
audio

17

Hi,

first of all: You can post code by pressing on the </>-Button or enclosing them with ```three backticks```.

Second: I was in a bit of a hurry and it seems like like I missed the closing bracket at the end:

document.addEventListener("DOMContentLoaded", function(event) {
    var audioTags = document.getElementsByTagName("audio");

    for (var index = 0; index < audioTags.length; ++index) {
        var audioTag = audioTags[index];
        audioTag.addEventListener("playing", function() {
            _paq.push(['trackEvent', 'MediaPlayer', 'Play', this.dataset.audioTitle]);
        }, true);

    }
});
1 Like
18

Sorry to announce yet another failure. In a syntax I’m more familiar with I might have been more useful in conclusions. As it is I see some connections but really don’t know anything about what data is generated and what instance taking care of them. It doesn’t feel right to demand new suggestions and somehow it seems like it’s hard for Piwix tracker do pick up the data we hope to deliver. The fact that I in every code-test checked the Events-section (as the code defines it as ‘event’) seemed the right thing to do.With focus just in that section I seemed to have missed that some respons came out, but not where I expected.

The thing is that after all failing tests yesterday I played around with the varibles related to name. Just the kind of trouble-shooting when you try if something works, check, and if it isn’t you try something else. Did some random moves like that this morning. The problem is that if it didn’t work I went on and have no clue of variants during the procedure.

Piwik present unique visitors with icons for each page that was loaded in form of small folders. I just noticed that one visit early this morning also had generated another type of icon. It was representing ‘downloads’. So in someway one of my tested scripts led to generating download icons when a media player played the sound.

It’s not an easy task to find a needle in a haystack but perhaps I try to remeber and hope for the best. That is at least some indication of what song was listened to. But kind of useless in the long run as those stats is listed realtime and push the list downwards. Probably merge the individual post at a certain level as well. Nothing useful if you check the stats one a week or so. BUT an indication that something happened - somehow :).

19

Hi,
I am not sure if I can see the failure. When I press the play button Piwik sends the event to the server. I tried visiting it in a browser with do-not-track disabled, so you should be able to see my visit in the visitor log

20

I guess you represent the Austrian visit. But nothing is reported in the Events-section and no sign of the use of the player. But… …how can you detect that something was passed?