Google Analytics Video Tracking Issue with JWPlayer 6

Question

I'm new to all this and am just not getting how to track a video that can be played on my site. I just installed my GA code to my page, so I'm going to assume that I'm using the new Asynchronous tracking. the issue is am not able to track this video in GA panel. Thanks

My code looks like this .

   <script type='text/javascript' src='js/jwplayer.js'></script>
    <script type='text/javascript' src='js/jwplayer.html5.js'></script>   

   (function (i, s, o, g, r, a, m) {
       i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
           (i[r].q = i[r].q || []).push(arguments)
       }, i[r].l = 1 * new Date(); a = s.createElement(o),
  m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
   })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
   ga('create', 'UA-40700489-1', 'epcint.com');
   ga('send', 'pageview');

---

 <script type="text/javascript">jwplayer.key = "myplayerkey=";</script> 
<script type="text/javascript">
    $(document).ready(function () {
        jwplayer('mediaplayer').setup({
            file: 'video.mp4',
            width: "100%",
            height: "480",
            autostart: true,
            ga: {


            }
        });
    });
</script>

<div id="mediaplayer">
 </div>

Any help will be highly appriciate Thanks

Thanks for your feedback i have updated and Debug the code in GA debugger i got the error whats this means ?

Initializing Google Analytics. analytics_debug.js:9 Registered new plugin: ga(provide, "linker", Function) analytics_debug.js:9 Registered new plugin: ga(provide, "displayfeatures", Function) analytics_debug.js:9 Running command: ga(create, UA-40700489-2, infopav.com) analytics_debug.js:9 Creating new tracker: t0 analytics_debug.js:9 Running command: ga(send, pageview) analytics_debug.js:9

Sent beacon: v=1&_v=j16d&a=686083534&t=pageview&_s=1&dl=http%3A%2F%2Fdev.www.infopave.com%2FPage%2FIndex%2FHOW_TO_ACCESS_LTPP_DATA&ul=en-us&de=UTF-8…30201944&_u=MCCC~&cid=2101349279.1393503811&tid=UA-40700489-2&z=1727898794

analytics_debug.js:9 adSenseId (&a) 686083534 analytics_debug.js:9 apiVersion (&v) 1 analytics_debug.js:9 clientId (&cid) 2101349279.1393503811 analytics_debug.js:9 encoding (&de) UTF-8 analytics_debug.js:9 flashVersion
(&fl) 12.0 r0 analytics_debug.js:9 hitType (&t) pageview analytics_debug.js:9 javaEnabled (&je) 1 analytics_debug.js:9 language (&ul) en-us analytics_debug.js:9 location
(&dl) http://dev.www.infopave.com/Page/Index/HOW_TO_ACCESS_LTPP_DATA analytics_debug.js:9 screenColors (&sd) 24-bit analytics_debug.js:9 screenResolution (&sr) 1680x1050 analytics_debug.js:9 title (&dt) LTPP InfoPave - How to Access LTPP Data? analytics_debug.js:9 trackingId (&tid) UA-40700489-2 analytics_debug.js:9 viewportSize (&vp) 1665x429 analytics_debug.js:9

There was an error while handling a listener: TypeError: Cannot read property 'id' of null function

(){if("array"==a.typeOf(m.playlist)&&2>m.playlist.length&&(0==m.playlist.length|| !m.playlist[0].sources||0==m.playlist[0].sources.length))g();else if(s.getStatus()==a.loaderstatus.COMPLETE){for(var e=0;em.modes[e].type;if(r.supportsConfig())return r.addEventListener(l.ERROR,d),r.embed(),c(b,f.events),b}m.fallback?(a.log("No suitable players found and fallback enabled"),new j.download(n,m,g)):(a.log("No suitable players found and fallback disabled"),n.parentNode.replaceChild(h, n))}} jwplayer.js:3

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.8.2.min.js:2 9 Could not add internal listener jwplayer.js:3 There was an error calling back an event handler

Updated Code

 $(document).ready(function () {

        jwplayer("mediaplayer").setup({
            file: 'rtmp://s1nu7pjztotbeg.cloudfront.net/cfx/st/mp4:Help/How_To/GettingStarted_V2-Sm_x264.mp4',
            width: "100%",
            height: "480",
            autostart: true,
            events: {
                onComplete: function (evt) {

                },

                onReady: function (event) {

                    ga('send', 'event', 'Video Played', 'action', { 'page': 'http://dev.www.infopave.com/Page/Index/HOW_TO_ACCESS_LTPP_DATA' });

                },
                onPlay: function (evt) {

                },
                onVolume: function (evt) {
                    alert("the new volume is: " + evt.volume);
                }


            },


            ga: {

            }


        });

    });

i want to send this when some one click the play button ,i want to send this code only

               ga('send', 'event', 'Video Played', 'action', { 'page': 'http://dev.www.infopave.com/Page/Index/HOW_TO_ACCESS_LTPP_DATA' });

How i can get that button click in jquery thanks for your help...

Thanks any help will be highly appriciated

Answer 1

and finally i got success to solve my problem !

 <div id="mediaplayer">
</div>
<ul>
    <li>State: <span id="stateText">IDLE</span></li>
    <li>time: <span id="elapsedText">0</span></li>
</ul>
<script type="text/javascript">        jwplayer.key = "mykeyeasdfasdf2132131=";</script>
<script type="text/javascript">

    jwplayer("mediaplayer").setup({
        file: 'rtmp://s1nu7pjztotbeg.cloudfront.net/cfx/st/mp4:Help/How_To/GettingStarted_V2-Sm_x264.mp4',
        width: 465,
        height: 300,
        autostart: true,
        events: {
            onComplete: function (event) {


                var elapsedTime = jwplayer("mediaplayer").getPosition();
                var timedurationvalue = ((elapsedTime / 60).toFixed(2));
                updateValues();
                //ga('send', 'event', 'Video Completes', 'ULR of video or Title', 'Page URL', timedurationvalue);
            },
            onReady: function (event) {
                var elapsedTime = jwplayer("mediaplayer").getPosition();
                var timedurationvalue = ((elapsedTime / 60).toFixed(2));
                updateValues();
                //  ga('send', 'event', 'Video Plays', 'ULR of video or Title', 'Page URL', timedurationvalue);
            },
            onPlay: function (event) {
                var elapsedTime = jwplayer("mediaplayer").getPosition();
                var timedurationvalue = ((elapsedTime / 60).toFixed(2));
                //  ga('send', 'event', 'Video Plays', 'ULR of video or Title', 'Page URL', timedurationvalue);

                //                    ga('send', 'event', 'category', 'action', 'label', value);
            },
            onVolume: function (event) {
                updateValues();
                alert("onvolume called!");
            },
            onPause: function (event) {


                var elapsedTime = jwplayer("mediaplayer").getPosition();
                var timedurationvalue = ((elapsedTime / 60).toFixed(2));
                //  ga('send', 'event', 'Video Paused', 'ULR of video or Title', 'Page URL', timedurationvalue);

                alert("onpause called!");
            }
        }
    });
    function setText(id, messageText) {
        document.getElementById(id).innerHTML = messageText;
    }

            function updateValues() {
                var state = jwplayer("mediaplayer").getState();
                var elapsed = jwplayer("mediaplayer").getPosition();
                setText("stateText", state);
                setText("elapsedText", (elapsed / 60).toFixed(2));
            }
</script>

Answer 2

JW Player only supports ga.js for the time being. The new universal analytics does not work yet. That is why.

Answer 3

I would recommend you look into Event-tracking. You can add a tag in the onclick so that when a user clicks to view your video you will log an event that you can find in your google Analytics under Behavior -> events

I haven't tested this but you should be able to do something like:

<div id="mediaplayer" onclick="ga('send', 'event', 'video', 'click', 'videoname');">
</div>

Note: Events will first show up in the standard report after 24 hours. You can also see them in the real-time reports.