Google Analytics Plugin

Use the Player V4 Google Analytics plugin to track statistics for your Ooyala Player V4 in your Google account Analytics. For general information about Google Analytics, see the Google Analytics site.

Run-time Flow During Playback

During playback, a playback event triggers notification about the event to Google Analytics.

Supported Players

The Player V4 Google Analytics plugin supports integrating Google Analytics with the Ooyala HTML5 web player versions 4.7.9 and above.

Prerequisites

Prior to using the Player V4 Google Analytics plugin, you must have a Google Analytics account. To that account, you must have added at least one property for which you want to collect data, and know your Tracking ID associated with each property. For more information, see the Google documentation: Get Started with Analytics.

Step 1: Get the Latest Google Analytics Plugin

  1. Download the latest version of the googleAnalytics.min.js plugin. For the download URLs, see the Ooyala Player V4 Release Notes.
  2. Host this plugin like you host other Player V4 plugins. See Hosting Player V4 Resources for details.

Step 2: Load Google Analytics on Your Web Page

Begin by loading Google Analytics on the web page from which you run Player V4. You have three options.
Note: For UA-XXXXX-Y, you must specify the proper tracking ID associated with the property for which you want to collect data.

Option A: Load Google Analytics (analytics.js)

With this option, you obtain a snippet from the Analytics interface (refer to the Tracking Code page under the Admin tab), and then insert this code into the page - ideally within the <head> tag. This snippet contains your unique "Tracking ID". Here is an example code snippet:
<!-- Google Analytics -->
<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-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
Note: If you copied the snippet from your account Admin page, the value of UA-XXXXX-Y should already be set to the proper tracking ID.
For additional information about analytics.js, see the Google Analytics documentation.

Option B: Load Google Analytics (Legacy) (ga.js)

With this option, you obtain the Legacy Google Analytics (ga.js) code snippet (at https://developers.google.com/analytics/devguides/collection/analyticsjs/), and then insert this code into the page - ideally within the <head> tag. Here is an example code snippet:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
                        
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
For additional information about ga.js, see the Legacy Google Analytics documentation.

Option C: Use the Google Tag Manager

With this option, you obtain the code snippet for the Google Tag Manager from the "Install GTM" link under the "Admin" Tab. Here is an example code snippet:
<!-- Google Tag Manager -->
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M8ML7S"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-M8ML7S');</script>
<!-- End Google Tag Manager -->
Insert this code immediately after the opening <body> tag on your page. For additional information, see the Google Tag Assistant.

Step 3: Load the Ooyala Google Analytics Plugin on Your Web Page

Load the url_where_hosted/googleAnalytics.min.js script on the page where you want to launch the player. Note that this plugin requires Google Analytics to be set up already on the page (using one of the three methods described above).

Step 4: Specify a Tracker (Optional)

As with other Player V4 plugins, on the page where you want to run the player, you can specify a page-level parameter within the playerparams variable that is passed in during player creation (see Embedded Parameters for Player V4). The tracker will target events sent by the plugin to the provided tracker name (trackerName). This tracker name must be equal to the tracker name defined in the ga('create') function call used to set up the tracker. If you want a tracker name for the Ooyala Debug Page, this page-level parameter must be set and be equal to the tracker name provided in the url parameter "ga_tracker_name".

Example page level parameter:

"googleAnalytics":{
   "trackerName":"myTrackerName"
}
For more information, see the following Google topics:

Player V4 Events for the Google Analytics Plugin

The Player V4 Google Analytics plugin reports run-time playback events.

Event Category

Events sent by the plugin have the event category "Ooyala".

Event Actions

Events sent by the plugin have the following event actions:
Event Sent When
playbackStarted
  • Playback has started.
  • Playback has resumed. This is fired when returning from pauses and buffers.
playProgressStarted Playback has reached 0% of the total duration. This event maps to the Video Starts metric in Ooyala IQ (see Common Metric Definitions and Examples).
playProgressQuarter Playback has reached 25% of the total duration.
playProgressHalf Playback has reached 50% of the total duration.
playProgressThreeQuarters Playback has reached 75% of the total duration.
playProgressEnd Playback has reached 100% of the total duration.
contentReady The content is ready to be played.
adPlaybackStarted An ad playback starts.
adPlaybackFinished An ad playback finishes.
playbackPaused Playback is paused.

Event Labels

For events sent by the Google Analytics plugin, the event label is the title of the content being played.

Viewing Analytics

In the Google Analytics GUI, go to the Reporting tab to view your analytics. Useful metrics include:
To View Go To Notes Go To Notes
Live Events Reporting -> Real Time -> Events Real time event notifications from active users. You can view these events as part of a live-updating graph to the right or as a list underneath the graph.
Audience Overview Reporting -> Audience -> Overview General overview of session related analytics over time periods of your choosing.
Events Reporting -> Behavior -> Events Various ways to view the event distribution sent from your users.

Example

<html>
<head>
    <title>Google Analytics Plugin Example</title>
    <!-- Google Analytics -->
    <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-XXXXX-Y', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->
 
    <!-- V4 JS core is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
    <script src="url_where_hosted/core.min.js"></script>
    <script src="url_where_hosted/html5-skin.min.js"></script>
    <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css" />
    <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
    <script src="url_where_hosted/main_html5.min.js"></script>
    <!-- Google Analytics plugin -->
    <script src="http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/googleAnalytics.min.js"></script>
</head>
<body>
    <div id="container" style="width:640px; height:360px;"></div>
    <script>
        var playerParam = {
            "pcode": "YOUR_PCODE",
            "playerBrandingId": "YOUR_PLAYER_ID",
            "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
            },
            // trackerName is optional
            "googleAnalytics":{
                "trackerName":"myTrackerName"
            }
        };
        OO.ready(function() {
            window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
        });
    </script>
    <body>
</html>
             

Was this article helpful?