Video Analytics

Using Video Analytics with OptinPlayer

OptinPlayer uses several different kinds of events sent from both the video and floating layers (such as when they are closed or an opt-in form is submitted) and sends the event information to Google Analytics, therefore it is required that the Google analytics code is present in the page.

The service is completely free and capable of the most sophisticated visitor and event analysis. The image below shows a real example of a report taken from Google Analytics for events.

You can add your own events which are triggered by whatever you choose, call them what you like and see them in the report. For example, the included Aweber Opt-in sends a notification when a user subscribes. You can add another to be sent when the form popup is closed.

As an example from the report of video events below we can see that the video was stopped on average at about 16 seconds into playback and playback started again at about 18 seconds. This report came from a demo where an opt-in form was triggered at 16 seconds and paused the playback. When the opt-in form was closed or submitted playback was resumed.

OptinPlayer allows unique identification of all videos and forms on a single page, so multiple sets of events can be tracked easily.


Installing Google Analytics

If you are already using Google Analytics then skip this step, otherwise set up an account for yourself - create an account. Install the tracking code on your website as instructed.


Tracking Video Events

Add the following option to your embed code:

 'analytics' : true,

As soon as any OptinPlayer video instance is added to the page the video analytics events are automatically sent, you can go straight to the analytics interface and create a report.


Video Analytics

Under the 'Content' menu item select 'Events' and then 'Overview'. The 'Event Category' for all OptinPlayer events is 'oplayer'. Each video embed or popup is tracked via its id, which in the analytics interface is called the 'Event Label'.

So in this simple embed code example the Event Label is 'myVideo':

<div id="myVideo"></div>

<script type='text/javascript'>
new oplayer('myVideo').initialize(
   {
      'content' : 'oplayer',
      'type' : 'embed',
      'flash' : 'http://www.myhost.com/oplayer/videos/myvideo.mp4',
      'html5' : 'http://www.myhost.com/oplayer/videos/myvideo.mp4',
      'width' : 570,
      'height' : 240
   }
);
</script>

If you select an Event Label corresponding to the id of the embed you are interested in, you can then choose as a secondary dimension the 'Event Action', which is the name given to the actual event. OptinPlayer supports the following events for video:

  opPlay,   opPause,   opSeeked,   opStop,   opClose

where the 'opClose' applies to a popup video when the popup is closed. There are then a variety of options for creating different reports depending on what information you want to see and how to see it.


Tracking Custom Popup Events
(Opt-in forms, Buy-now buttons, Ads etc)

In your OptinPlayer package there is a sample opt-in form called 'aweber.html'. This contains an example of how to use one particular event for when a visitor subscribes, but you can customize this to send any event at all and attach it to whatever you want, such as the close button on your opt-in popup.

To add a subscription event you need to add the following to your form tag (see the source of the example supplied):

  onsubmit = "postBack('myCustom1','layerSubmit')"

The event name is up to you and has been called 'layerSubmit' in this case. The id of the popup embed code is the first argument which is 'myCustom1' in this example.

You must also include the following bit of code somewhere in your opt-in form:

<script>
   function postBack(id,event){
      var jsonStr;

      var msg = {
         'template' : 'custom',
         'userEvent' : event,
         'time' : 0,
         'id' : id
      };
      
      jsonStr = JSON.stringify(msg);
      
      window.parent.postMessage(jsonStr,'*');
   }      
</script>

Perhaps you also want to track when the popup is closed or when the 'No thanks' button (for example) is clicked, in which case you could add to the appropriate tag this onclick code (in the case of a close button):

  onclick="parent.op.hide('myCustom1');postBack('myCustom1','layerClose');"


Testing the Analytics Events

Google has extended their real-time reports to include events, which is great because typically you would have to wait a while for them to show up in custom reports. Now however, you can immediately see the events coming in (although at the time of writing the numeric value is not passed, so the time associated with a pause event for example is not shown, but you can still test the event passing).



For a full list of options see here

We are here to help

Whatever the issue we want to help, please post a ticket here or at the lively forum for a fast and helpful response.


Back to top