<< Back to examples index

Cloudinary Video Player

Analytics

The Video Player supports tracking of interesting events to the Google Analytics platform.
Supported events include: 'play', 'pause', 'ended', 'volumechange', 'resize', 'error', 'fullscreenchange', 'start', 'videoload', 'percentsplayed', 'timeplayed', 'seek', 'playerload'.
Some of the events are only available for analytics purposes (e.g 'start', 'videoload' and 'playerload').
Some of the events are semantically different than the ones emitted by the player (e.g. 'start' and 'ended' will only track once)

To enable analytics for a player, use the 'analytics' param.

In the example below, Google Analytics debug mode is enabled so you can actually see events information in the DevTools console when the actual tracking occurs.

Example Code:

      HTML:

      <video
        id="example-player"
        controls
        muted
        class="cld-video-player cld-video-player-skin-dark">
      </video>


      JavaScript:

      <!-- Google Analytics Code Snippet -->
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-99366171-1', 'auto');
        ga('send', 'pageview');
      </script>

      <!-- Actual code -->
      <script type="text/javascript">
        var cld = cloudinary.Cloudinary.new({ cloud_name: 'miki-cloudinary' });

        // Initialize player
        var player = cld.videoPlayer('example-player', {
          analytics: { // Enable player analytics
            events: [
              'play',
              'pause',
              { type: 'percentsplayed', percents: [10, 50, 75, 100] }, // Some events may have additional settings
              'start',
              'ended'
            ]
          }
        });

        // Modify player source
        player.source('oceans').play();
      </script>