This is a message.

Track Flowplayer events with google analytics

By default the plugin tracks whenever a video playback is started and the total time it has been viewed. This total time includes all view time accumulated even when the user is seeking in the video timeline back and forth.

The above demo shows Analytics in debug mode so you can see the events that are tracked as they occur. Remove the debug flag from the configuration and nothing will appear and the events will be sent to Google Analytics. They may take up to a day to show up, be patient.

If you are interested in a more detailed tracking it's possible to track more events including Pause, Resume, Seek, Mute, Unmute, Full Screen, and Full Screen Exit. An external JavaScript function allows you to customize the labels for these events as well as track only a subset of these events. Another external JavaScript function allows you to track custom events using the current clip's status time.

The plugin tracks events based on the "category" value you specify in configuration. This value corresponds to the event category you can see in the Google Analytics event tracking page.

Features

  • Allows you to configure which events will be tracked
  • Configurable event label names for language localization
  • External function called trackEvent() to track custom events in addition to the ones Analytics normally tracks
  • External function called setEventName() to change event label names at runtime, as well as turn on or off specific event tracking

Usage

To create a Google Analytics account and view event tracking for your website, visit the Google Analytics website. Visit their support site for more information on how to set up and use your Google Analytics account.

The actual event tracking info uses the following format: [the_event_category_configured_inclip], "Play", [clip_url], "time_in_seconds". For example:

"Promo video", "Start", "http://flowplayer.org/demo/video.flv", "12"

JavaScript

Player setup

The following snippets show how the above demo is configured:

<a
href="http://edge.flowplayer.org/flowplayer-700.flv"
style="display:block;width:426px;height:300px;"
id="player">
 
<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg" alt="Search engine friendly content" />
 
</a>

HTML

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
// this will be tracked under our Promo Video category
eventCategory: 'Promo Video'
},
plugins:{
gatracker: {
url: "flowplayer.analytics-3.2.9.swf",
 
// track all possible events. By default only Start and Stop
// are tracked with their corresponding playhead time.
events: {
all: true
},
debug: true,
accountId: "UA-5877901-1" // your Google Analytics id here
}
}
});

JavaScript

The accountId is the Google Analytics account identifier that you can get from Google Analytics after you set up your website for tracking. The debug parameter determines whether or not the event tracking information is sent to Google or simply displayed in an overlay over your media.

By default the plugin tracks when the playback starts and stops. A "stop" gets tracked in following situations:

  • the clip is played completely to the end
  • user presses the stop button
  • the player is unloaded (happens when the page is closed for example)

The total view time is reported to Google Analytics together with the stop events. This total time includes all the time the user has spent viewing the video. Total time gets accumulated if the user seeks backwards and repeatedly views parts of the video.

NOTE: Unloading can be tracked only when the player is embedded using the flowplayer.js script!

You can configure additional events to be tracked. For example, if you don't want to receive tracking information for mute and unmute actions and you want to rename the 'Resume' event to 'Unpause', your events object would look like this:

events: {
// first enable all events
all: true,
 
// custom label for resume
resume: "Unpause",
 
// don't track these
mute: false,
unmute: false
}

JavaScript

If you want to differentiate the finish event from the stop event you need to give them distinct labels. The finish event is fired when the playback reaches the end of the video. By default the finish and stop events are both tracked under label 'Stop'. The following code makes these two events to be tracked separately under the labels 'Finish' and 'Stop':

events: {
// track the finish event under label 'Finish',
// by default it goes under label 'Stop'
finish: 'Finish'
}

JavaScript

Configuration

Here is a list of all Analytics specific clip properties. These go under the gatracker object in the player configuration:

PropertyDatatypeDefaultDescription

url

String

null

Required. The path to your local Analytics plugin.

accountId

String

null

Required. Your Google Analytics account identifier.

debug

Boolean

false

Optional. If true, no tracking information will be sent to Google and will be displayed on an overlay over the video instead.

events

Object

(see below)

Optional. Each of the event labels may be renamed, or turned off by setting the event name to false.

mode

String

"AS3"

The tracking mode. Allowed values: "AS3", "Bridge".

trackingObj

String

"window.pageTracker"

Used in "Bridge" mode: The name of the Analytics tracking object JavaScript variable.

Here is a list of configuration options for the events object. See more information on player events and clip events.

PropertyDefaultDescription

all

false

Used to enable tracking of all events. By default only onStart, onStop and onFinish are tracked.

start

Start

The onStart event

pause

Pause

The onPause event. Not tracked by default, see the 'all' option.

resume

Resume

The onResume event. Not tracked by default, see the 'all' option.

seek

Seek

The onSeek event. Not tracked by default, see the 'all' option.

stop

Stop

The onStop event

finish

Stop

The onFinish event. By default this is grouped together with the onStop event.

mute

Mute

The onMute event. Not tracked by default, see the 'all' option.

unmute

Unmute

The onUnmute event. Not tracked by default, see the 'all' option.

fullscreen

Full Screen

The onFullscreen event. Not tracked by default, see the 'all' option.

fullscreenExit

Full Screen Exit

The onFullscreenExit event. Not tracked by default, see the 'all' option.

The event category is defined in clips. For example here is a playlist with 2 clips using their own categories. The category value corresponds to the "Event Category" that you can see in your Google Analytics event tracking page.

playlist: {
{
url: 'product1.mp4',
eventCategory: "Product videos"
},
{
url: 'company.mp4',
eventCategory: "Company videos"
}
}

JavaScript

If the eventCategory is not specified the plugin uses the embedding page's URL as the category value. However, you should always specify the eventCategory explicitly when you embed Flowplayer e.g. via the OBJECT tag or in virally shared configurations.

Scripting

The Analytics plugin has the following custom methods that can be used at runtime:

MethodExampleDescription
setEventName(
        event:String,
        newName:Object)
$f().getPlugin("gatracker")
    .setLabel("pause", "Pausa");

Changes the label name for the given event to newName. If newName is false Analytics will stop tracking for that event. If the function is subsequently called with a new newName tracking will start for that event again. This can be used for language localization.

trackEvent(name:String)

$f().getPlugin("gatracker")
    .trackEvent(
        "My Custom Event Name");

Immediately tracks an event with name as the event label using the current clip's time. You can use this function to track events on the page and synchronize them to a specific clip's timeline. For example, if a user clicks on a link on the page you can call this function to track which clip and at what time the user clicked. This function could also be used to track events from another Flowplayer plugin.

Download

Get latest version of the Flowplayer Analytics plugin.

flowplayer.analytics-3.2.9.swf

just the working flash file to get you going

flowplayer.analytics-3.2.9.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.analytics-3.2.9-src.zip

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.