Using Google Analytics and video: Integrate video player with your GA stats

Video not compatible



 

Gravitylab’s all purpose work horse streaming hosting video player, the JW Player, integrates seamlessly with Google Analytics and video.

 

You may already use Google Analytics for tracking your webpages, it is very popular. JW Player, when integrated with GA, shows only 2 things: Video plays and video completes. That’s the bad news. The good news is that there are 30 other video player events that can be monitored via GA. Here are the popular video analytics calls to Google:

 

Track when a user goes fullscreen:

onFullscreen()

Get the viewer’s selected video quality:

onQualityLevels() + getCurrentQuality()

Determine a user’s volume level:

onVolume() + getVolume()

See which sections views are skipping to:

onSeek() + getPosition()

Alert when a user experiences an error:

onError()

 

Setting up your video player with Google Analytics

 

If you’ve already embedded the GA JavaScript snippet for tracking (given to you by Google Analytics) in your site, tying it together with JW Player is easy:

 

Include the ga: {} block in your configuration options to enable it. For example:

 

jwplayer("myElement").setup({
file: "http://youraccount.gravlab.net/00xxxx/video/example.mp4",
image: "http://youraccount.gravlab.net/00xxxx/images/uploads/example.jpg",
ga: {} });

Using the preceeding code will cause JW Player to record the title of videos, not their URLs, in GA.

 

Here’s a demo of video player analytics, a working sample streaming video player with Google Analytics firing on events. Keep in mind, it will take 24 hours for you to start seeing your stats, but you should be able to monitor live traffic almost right away.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 <div id="video-part-001">
</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 = "abc123v1d30f0r3v3r";</script>
<script type="text/javascript">
jwplayer("video-part-001").setup({
        file: 'rtmp://fms.youraccount.gravlab.net/00xxxx/path/to/video/video.mp4',
        width: 896,
        height: 504,
        autostart: true,
        events: {
            onComplete: function (event) {
var elapsedTime = jwplayer("video-part-001").getPosition();
                var timedurationvalue = ((elapsedTime / 60).toFixed(2));
                updateValues();
                //ga('send', 'event', 'Video Completion', 'ULR of video or Title', 'Page URL', timedurationvalue);
            },
onReady: function (event) {
                var elapsedTime = jwplayer("video-part-001").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("video-part-001").getPosition();
                var timedurationvalue = ((elapsedTime / 60).toFixed(2));
                //  ga('send', 'event', 'Total Plays by Client', '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("video-part-001).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("video-part-001").getState();
var elapsed = jwplayer("video-part-001").getPosition();
setText("stateText", state);
setText("elapsedText", (elapsed / 60).toFixed(2));
}
</script>

Here’s some video player code that will ping google analytics to let GA know whether it is in a “Playing” state or not:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    setInterval(
        function(){
if (jwplayer().getState()=="PLAYING"){
                _gaq.push(['_trackEvent', 'Live streaming', 'Concurrente', 'Live streaming']);
                _gaq.push(['_trackPageview', 'concurrente_supermasita']);
}
},60000);
</script>
0