Google Analytics: GA4

The Google Analytics 4 (GA4) plugin allows you to track media content using the Google Analytics 4 service. It can help to measure traffic and engagement for video-on-demand (VOD) streams, live streams, and advertisements. The plugin leverages Google Analytics event tracking to record different playback related events.

Table of contents

Install the plugin

Follow these steps to install the GA4 plugin and other relevant libraries. In our example, we use the Google tag (gtag.js) approach to load the Google Analytics library. You can also utilize Google Tag Manager to achieve the same goal. However, when using Google Tag Manager, some additional steps may be required to set up and manage custom events.

  1. Add the Google tag snippet to your website. The snippet is best placed immediately after the opening <head> HTML tag on every page you plan to measure.

    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'TAG_ID');
</script>

    This Google tag snippet loads the gtag.js library, establishes the GA_TRACKING_ID as the default Google Analytics property ID, and sends a page view hit to Google Analytics.

  2. Load the GA4 plugin and core player along with any other required plugins. If you would like to measure and track ads, make sure to also install the Advertising plugin.

    <script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ga4.min.js"></script>

Configure the plugin

You can configure the GA4 plugin using the top-level configuration ga object. The following properties can be included in your configuration.

    • Property
    • Type
    • Description
    • ga_instances
    • string
    • Add the Google Analytics tag IDs to track in this array. Required when using the gtag.js approach to set up Google Analytics. If not provided, the plugin pushes events to the dataLayer object which may require additional configuration in Google Tag Manager
    • event_categories
    • string
    • Use this property to optionally replace the default category names with a custom value. If not set, the default values (live or videos) are detected by the player. Sent to Google Analytics as event_category.
    • event_actions
    • string
    • Use this property to optionally replace default action names with a custom value. Sent to Google Analytics as event_action.
    • custom_data
    • string
    • Add optional data or custom event parameters to be set and used on all existing events.

The video title is used by default to send the event_label to Google Analytics.

This code snippet provides an example of the top-level configuration using a ga-instance and Google tag ID:

ga: {
  // ga_instances property is required when using the Google tag (gtag.js) method
  ga_instances: ["G-XXXXXXXXXX"],
  event_categories: { live: "my_live_value" },
  event_actions: { live_start: "my_live_start_value" },
  custom_data: { dimension0: "my_dimension_value", metric0: "my_metric_value" }
}

If Google tag IDs are omitted, we use the dataLayer object, calling the dataLayer.push() method and a flowplayer event command to initiate the sending of events to Google Tag Manager. You can set up a custom event trigger in Tag Manager to capture this flowplayer event.

Set default values

As described in this section, event categories and event actions have default values. It's possible to override these default values with a custom category or action in the configuration. See Replace default values for additional information.

Event categories

Categories group objects that you want to analyze. In this case, they can help distinguish between live and video-on-demand events as you aggregate metrics. See the following table for the different event categories and their default values.

Event categories

    • event
    • label default
    • live:
    • "Live"
    • videos:
    • "Videos"

Event actions

    • property
    • description
    • ad_break_completed
    • "ad_break_completed"
    • ad_start_preroll
    • "ad_start_preroll"
    • ad_start_midroll
    • "ad_start_midroll"
    • ad_start_postroll
    • "ad_start_postroll"
    • ad_completed_preroll
    • "ad_completed_preroll"
    • ad_completed_midroll
    • "ad_completed_midroll"
    • ad_completed_postroll
    • "ad_completed_postroll"
    • ad_skipped_preroll
    • "ad_skipped_preroll"
    • ad_skipped_midroll
    • "ad_skipped_midroll"
    • ad_skipped_postroll
    • "ad_skipped_postroll"
    • fullscreen_enter
    • "fullscreen_enter"
    • fullscreen_exit
    • "fullscreen_exit"
    • live_start
    • "live_start"
    • live_click_play
    • "live_click_play"
    • live_pause
    • "live_pause"
    • live_resume
    • "live_resume"
    • live_mute
    • "live_mute"
    • live_unmute
    • "live_unmute"
    • live_complete
    • "live_complete"
    • video_player_load
    • "video_player_load"
    • video_start
    • "video_start"
    • video_click_play
    • "video_click_play"
    • video_pause
    • "video_pause"
    • video_resume
    • "video_resume"
    • video_mute
    • "video_mute"
    • video_unmute
    • "video_unmute"
    • video_25_percent
    • "video_25_percent"
    • video_50_percent
    • "video_50_percent"
    • video_75_percent
    • "video_75_percent"
    • video_complete
    • "video_complete"

Replace default values

You can override the default values for event categories and event actions by customizing those values in your ga configuration. For example, use the following to set the event_actions property:

event_actions: { video_player_load: "my_custom_load_action" }

When replacing default values, all events you want to track must be specified in the ga configuration, including event actions where you don't want to change the label.

Identify ad positions

By replacing the default value, you can get the position of your ad and determine if it's the first, second, or third preroll you're sending. To do this, include [x] in your custom ad_start_preroll event action.

For example, use ad_start_preroll_[x] in your ga configuration. The GA4 plugin replaces the [x] and creates a sequence such as ad_start_preroll_1, ad_start_preroll_2, etc.

This capability only applies to ad_start events, such as ad_start_preroll, ad_start_midroll, and ad_start_postroll.

Track a subset of events

When using the GA4 plugin, you can specify which event actions to track. Otherwise, the player emits all of the event actions described in the Event actions table.

Add the event that should be tracked to the ga configuration and the plugin only considers those events. The following example shows how to only track these six start and complete events:

ga: {
  ga_instances: ["G-XXXXXXXXXX"],
  event_actions: {
    video_start: "video_start",
    video_complete: "video_complete",
    live_start: "live_start",
    ad_start_preroll: "ad_start",
    ad_start_midroll: "ad_start",
    ad_start_postroll: "ad_start"
  }
}
Gemius analytics Google Analytics UA
Results