Giter Club home page Giter Club logo

videojs-sc's Introduction

videojs-sc

Adobe Analytics (formerly Site Catalyst) plugin for video.js

Getting Started

Download videojs and videojs.sc

In your web page:

<video id="video" src="movie.mp4" controls></video>

<script src="VisitorAPI.js"></script>
<script src="AppMeasurement.js"></script>
<script src="AppMeasurement_Module_Media.js"></script>

<script src="video.js"></script>
<script src="dist/videojs.sc.js"></script>
<script>
var s = new AppMeasurement ();
s.account = 'MY_SUITE_ID';
// configuration of s omitted

s.loadModule ('Media')
// configuration of s.Media omitted

function get_current_video_info ()
{
  return {
    'name': 'Name of the current video',
    'channel': 'Channel of the current video',
    'props':  {
      prop1: 'prop 1 value',
      prop2: 'prop 2 value',
      // ...
      propN: 'prop N value'
    }
  };
}

videojs('video', {}, function() {
  this.sc({
    player_name: 'My Awesome Video Player',
    sc: s,
    new_video_cb: get_current_video_info
  });
});
</script>

Please note that the VisitorID, AppMeasurement, and AppMeasurement_Module_Media scripts must be loaded and configured before the sc plugin

Options

Provide options to the plugin by passing them in the javascript call to initialize the plugin.

player.sc({
  sc: s,
  new_video_cb: get_current_video_info,
  player_name: 'My Awesome Video Player',
  new_video_event: 'vast.contentStart'
});

The following options are supported:

sc (required)

A reference to the s object, as returned from s_gi ();

new_video_cb (required)

A callback that the plugin will use when a new video is started; the callback returns an object that provides basic information about the video. The returned object should be of this format:

{
    'name': 'Name of the current video',
    'channel': 'Channel of the current video',
    'props':  {
      prop1: 'prop 1 value',
      prop2: 'prop 2 value',
      // ...
      propN: 'prop N value'
    }
}

Note that any props you define will be applied to the "s" object, and must also be included in the s.Media.trackVars variable when you are configuring s.Media.

player_name

The name of your video player to use in the analytics calls. Defaults to "VideoJS".

new_video_event

By default, the plugin will wait for a loadedmetadata event to make a call to s.Media.open(). If you would prefer to wait for another event, you can specify its name here.

As an example, if you are using videojs-vast-vpaid plugin, you would get a loadedmetadata event when the main content video loads in, as well as one when the preroll video loads in. You would probably not want to start recording analytics when the first loadedmetadata event fires, as the user hasn't really started watching the content video yet.

The videojs-vast-vpaid plugin fires an event when the preroll is done playing and the content video is starting: vast.contentStart. By specifying vast.contentStart for new_video_event, you can start tracking the content video when it actually starts playing.

verbosity

If set to non-zero, logs debugging messages to the console. A value of 1 will output the most important messages; a value of 2 will output a lot of time update messages.

Caveats

We have noticed some oddities with the way events are fired by the videojs-swf player when the user clicks on the timeline to skip forward.

[videojs.sc] <ontimeupdate> _media_offset: 4
[videojs.sc] <ontimeupdate> _media_offset: 5
[videojs.sc] <ontimeupdate> _media_offset: 6

*** user clicks on timeline at 95 seconds ***

[videojs.sc] <ontimeupdate> _media_offset: 95
[videojs.sc] <ontimeupdate> _media_offset: 95
[videojs.sc] <onpause> s.Media.stop (WRAL WeatherCenter Forecast, 95)
[videojs.sc] <ontimeupdate> _media_offset: 95
[videojs.sc] <onplay> s.Media.play (WRAL WeatherCenter Forecast, 95)

Notice that by the time the pause event is fired from videojs, the user clicks the timeline, the media offset is already 95. So it looks like the user was already 95 seconds into the video when it stopped playing.

We could monitor the offset in the ontimeupdate() function and look for discontinuities to detect this sort of timeline jump (and then use the last "good" offset in teh call to s.Media.stop(). But I don't think this will affect analytics gathering by SiteCatalyst, and I'm not sure the events will fire like this if videojs is using an HTML5 player, so I have not taken steps to address it.

videojs-sc's People

Contributors

jpriebe avatar

Stargazers

Justin Geeslin avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.