Search code examples
javascriptqualtrics

Javascript to track how many times an audio/video file is played (in Qualtrics)


In a Qualtrics survey, I'm trying to capture how many times an audio or video file is played by respondents.

I'm a Javascript novice and have read previous questions about how to capture whether a respondents clicks a link (Javascript code to record click on link to PDF - Qualtrics; Tracking when an external link is clicked in Qualtrics with javascript; Tracking when an external link is clicked in Qualtrics?). However, when I try to apply a similar strategy for media files to even capture whether a media file is played (create an embedded element click1=0 that appears before the item I'm tracking, giving an ID audio1 to the tracked item, and adding the following Javascript code, it stays at the default value of 0.

Qualtrics.SurveyEngine.addOnload(function()
{
    var a = $("audio1");
      a.onclick = function() {
          Qualtrics.SurveyEngine.setEmbeddedData("click1", 1);
      }
});

Is there a different strategy to track clicks for an audio or video file (rather than URL)? How can I capture how many times a file is played, rather than simply a binary variable for whether or not it is clicked?

I'd appreciate any advice. Thank you!

EDITED 1/29/18: Using the GUI to link to a file uploaded to Qualtrics, the resulting html is:

<video class="qmedia" controls="true" height="260" preload="auto" 
width="320"><source src="[URL OF MEDIA CLIP]" type="video/mp4"><embed 
align="middle" autoplay="false" 
bgcolor="white" class="qmedia" controller="true" height="260" 
pluginspage="http://www.apple.com/quicktime/download/" 
src="[URL OF MEDIA CLIP]" 
type="video/quicktime" width="320"></video>

I wasn't sure where to add the ID statement and ended up trying quite a few locations, but no luck yet. And yes, I do realize this is technically a video clip, but assumed (perhaps naively) the mechanism is the same!


Solution

  • Try this:

    Qualtrics.SurveyEngine.addOnReady(function()
    {
    	var playCounter = 0;
    	function onFinished(){
    		playCounter++;
    		Qualtrics.SurveyEngine.setEmbeddedData("click1", playCounter);
    	}
    	
    	$('videoPlayer').addEventListener('ended', onFinished);
    
    });
    <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="320">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="260" pluginspage="http://www.apple.com/quicktime/download/"
            src="http://techslides.com/demos/sample-videos/small.mp4" type="video/quicktime" width="320">
    </video>

    What this does is track the number of times the video finishes playing, and stores that number to the embedded data "click1".