Skip to content

Instantly share code, notes, and snippets.

@spra85
Last active September 28, 2017 18:24
Show Gist options
  • Save spra85/cc08e55fa28ecd2cb5b26aa1266247d6 to your computer and use it in GitHub Desktop.
Save spra85/cc08e55fa28ecd2cb5b26aa1266247d6 to your computer and use it in GitHub Desktop.

FMG Video Event - Examples

Below making assumption that these are the following dimensions:

  • dimension42 - video id
  • dimension121 - player position (NEW?)
  • dimension50 - player version (NEW)
  • dimension129 - content source (NEW)

Requirement is that each instance of a JWPlayer video player has its own namespaced client-side GA tracker

Example 1 - Kinja permalink to video page with MCP video

Base tracker:

ga('create', '<blog-ga-id>', 'auto');

Video player instance (MCP video id of 12345):

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-mcp-12345' });
ga('set', {
    'dimension42': '12345',
    'dimension121': 'permalink-featured',
    'dimension50': 'jw-7.12.6-fmg-sdk',
    'dimension129': 'mcp'
});

Video player uses namespaced tracker for all video events, example for play:

ga('player-mcp-12345.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 2 - Kinja permalink to video page with legacy JW video

Base tracker:

ga('create', '<blog-ga-id>', 'auto');

Video player instance (JW video id of 11111):

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-jw-11111' });
ga('set', {
    'dimension42': '11111',
    'dimension121': 'permalink-featured',
    'dimension50': 'jw-7.8.2-jw-legacy',
    'dimension129': 'jw'
});

Video player uses namespaced tracker for all video events, example for play:

ga('player-jw-11111.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 3 - Kinja permalink to video page with Onion Studios video

Base tracker:

ga('create', '<blog-ga-id>', 'auto');

Video player instance (Onion Studios video id of 22222):

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-os-22222' });
ga('set', {
    'dimension42': '22222',
    'dimension121': 'permalink-featured',
    'dimension50': 'jw-7.8.2-os',
    'dimension129': 'onionst'
});

Video player uses namespaced tracker for all video events, example for play:

ga('player-os-22222.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 4 - Outstream - current Kinja network solution

Outstream player instance, on Kinja post with ID 789:

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'outstream-789' });
ga('set', {
    'dimension42': 'None', // static, blank 1-second video so no video id
    'dimension121': 'outstream',
    'dimension50': 'jw-7.8.2-outstream-native',
    'dimension129': 'None' // content source empty, because no backing video
});

Video player uses namespaced tracker for all video events, example for play:

ga('outstream-789.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 5 - Outstream - backed by editorial video

Outstream player instance, on Kinja post with ID 789 but playing editorial video from MCP id 12345:

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'outstream-789' });
ga('set', {
    'dimension42': '12345',
    'dimension121': 'outstream',
    'dimension50': 'jw-7.12.6-outstream-edit',
    'dimension129': 'mcp'
});

Video player uses namespaced tracker for all video events, example for play:

ga('outstream-789.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 6 - Player on the homepage

Player on homepage, playing video from MCP with ID 12345

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-12345' });
ga('set', {
    'dimension42': '12345',
    'dimension121': 'homepage',
    'dimension50': 'jw-7.12.6-fmg-sdk',
    'dimension129': 'mcp'
});

Video player uses namespaced tracker for all video events, example for play:

ga('player-12345.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 7 - Player on a site's video section page (e.g. gizmodo.com/video)

Player on video section, playing video from MCP with ID 12345

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-12345' });
ga('set', {
    'dimension42': '12345',
    'dimension121': '/video',
    'dimension50': 'jw-7.12.6-fmg-sdk',
    'dimension129': 'mcp'
});

Video player uses namespaced tracker for all video events, example for play:

ga('player-12345.send', 'event', 'Video Play', 'action desc', 'label desc');

Example 8 - Kinja permalink with featured MCP video and related in-post embedded MCP video

Base tracker:

ga('create', '<blog-ga-id>', 'auto');

Featured video player instance (MCP video id of 12345):

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-mcp-12345' });
ga('set', {
    'dimension42': '12345',
    'dimension121': 'permalink-featured',
    'dimension50': 'jw-7.12.6-fmg-sdk',
    'dimension129': 'mcp'
});

Embedded related video player instance (MCP video id of 67890):

ga('create', '<kinja-roll-up-id>', 'auto', { 'name': 'player-mcp-67890' });
ga('set', {
    'dimension42': '67890',
    'dimension121': 'permalink-embedded',
    'dimension50': 'jw-7.12.6-fmg-sdk',
    'dimension129': 'mcp'
});

Example for play on featured video:

ga('player-mcp-12345.send', 'event', 'Video Play', 'action desc', 'label desc');

Example for play on embedded video:

ga('player-mcp-67890.send', 'event', 'Video Play', 'action desc', 'label desc');

Notes on FMG SDK implementation details

FMG SDK flexible content sources

The FMG SDK should be able to be used for content sources that are not MCP. In this case, the sources could be passed in mirroring JW player config options:

let playerConfig = {
      key: 'jw player key',
      sources: [
        { file: 'https://v.theonion.com/onionstudios/video/4053/hls_playlist.m3u8' },
        { file: 'https://v.theonion.com/onionstudios/video/4053/640.mp4' },
      ],
      image: 'https://i.onionstatic.com/onionstudios/4974/original/600.jpg',
      autostart: 'viewable'
};

FMG.init(playerConfig);

FMG SDK google analytics tracker config

The FMG SDK should provide a config option to pass in a GA tracker name, but default to using none, e.g.:

None

window.ga('send', 'event', 'Video Play', 'action desc', 'label');

Option player-mcp-12345 passed in:

let playerConfig = {
      googleAnalyticsTracker: 'player-mcp-12345'
};

FMG.init(playerConfig);

Results in the following convention for events fired through the SDK GA module:

window.ga('player-mcp-12345.send', 'event', 'Video Play', 'action desc', 'label');

FMG SDK - MCP custom dimensions

The FMG SDK should set FMG wide custom dimensions based on metadata stored within MCP. For instance, for MCP video 12345, if the video series name in MCP is "AVC Sessions" and the season is Season 5, the SDK should set:

ga('player-mcp-12345.set', {
    'dimension<series dim index>': 'AVC Sessions',
    'dimension<season dim index>': 'Season 5', 
});

The relevant values would come in the response (along with the video sources) from the video metadata hub.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment