Plugins

This describes the supported center plugins and the functions they provide.

Plugin Summary

The following plugins are available to be required. Plugins not defined here will not perform any operations.

Plugins  
vimeo Event integration with embedded Vimeo videos.
youtube Event integration with embedded YouTube videos.

Plugin Details



Vimeo

Event integration with embedded Vimeo videos. The video specified must be on the page as an <iframe> embed with the URL matching the videoId specified. If the video is on the page more than once, will attach to all occurrences of the video.

Once attached, will automatically send play and progress events as the visitor interacts with the video. These are equivalent to the following standard calls:

center('send', 'vimeo', 'play', [videoName]);
center('send', 'vimeo', 'progress', [videoName], [secondsWatched]);

Usage

center('require', 'vimeo');
center('vimeo:trackVideo', [videoId], [videoName], [options]);

Parameters

Name Type Required Description
command string yes ‘vimeo:trackVideo’. May optionally be property targeted.
videoId string yes Vimeo video id. This is numbers at the end of Vimeo URLs.
videoName string yes Friendly name to report video events as.
options object no Optional flags for the property. See table below.

Options

Name Type Default Description
autoPlay boolean false Whether to automatically play the video after we’ve attached.
callback function null Callback function once the command is complete.
durationInterval number 10000 Milliseconds to wait between sending progress events. Note that Vimeo will not consistently report intervals less than 5 seconds.

Examples

<iframe src="https://player.vimeo.com/video/185441790"
  width="640" height="360" frameborder="0"
  webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
<script>
  center('vimeo:trackVideo', '185441790', 'monsoon');
</script>
<iframe src="https://player.vimeo.com/video/185441790"
  width="640" height="360" frameborder="0"
  webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
<script>
  center('vimeo:trackVideo', '185441790', 'monsoon', {
    autoplay: true,
    durationInterval: 60000 // 1 minute
    callback: function() {
      alert('video loaded!');
    }
  });
</script>



YouTube

Event integration with embedded YouTube videos. The video specified must be on the page as an <iframe> embed with the URL matching the videoId specified. If the video is on the page more than once, will attach to all occurrences of the video.

Once attached, will automatically send play and progress events as the visitor interacts with the video. These are equivalent to the following standard calls:

center('send', 'youtube', 'play', [videoName]);
center('send', 'youtube', 'progress', [videoName], [secondsWatched]);

Usage

center('require', 'youtube');
center('youtube:trackVideo', [videoId], [videoName], [options]);

Parameters

Name Type Required Description
command string yes ‘youtube:trackVideo’. May optionally be property targeted.
videoId string yes YouTube video id. This is the 11 characters at the end of YouTube URLs.
videoName string yes Friendly name to report video events as.
options object no Optional flags for the property. See table below.

Options

Name Type Default Description
autoPlay boolean false Whether to automatically play the video after we’ve attached.
callback function null Callback function once the command is complete.
durationInterval number 10000 Milliseconds to wait between sending progress events.

Examples

<iframe width="560" height="315"
  class="test-youtube-frame"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0" allowfullscreen>
</iframe>
<script>
  center('youtube:trackVideo', 'dQw4w9WgXcQ', 'rickroll');
</script>
<iframe width="560" height="315"
  class="test-youtube-frame"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0" allowfullscreen>
</iframe>
<script>
  center('youtube:trackVideo', 'dQw4w9WgXcQ', 'rickroll', {
    autoplay: true,
    durationInterval: 60000 // 1 minute
    callback: function() {
      alert('video loaded!');
    }
  });
</script>