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.
Before you start, we recommend reviewing these tagging resources from Google:
You can use the Google tag (gtag.js) or Google Tag Manager to load the Google Analytics library and install the G4 plugin. When using Google Tag Manager, additional steps may be required to set up and manage custom events.
Follow these steps to install the GA4 plugin using the gtag.js method. For more, see the Set up gtag.js information from Google.
Add the following snippet to your site. It loads the
gtag.jslibrary, establishes theGA_TRACKING_IDas the default Google Analytics property ID, and sends a page view hit to Google Analytics. 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>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 Wowza Flowplayer 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>
If you're using Google Tag Manager or the dataLayer object, we suggest using the steps in this section. For more, see the Google Tag Manager webpage installation details from Google.
Add the following snippet to your site. It dynamically adds Google Tag Manager to the webpage by loading the external
gtm.jsscript and specifies your Google Tag Manager container ID. The snippet is best placed immediately after the opening<head>HTML tag on every page you plan to measure:<script> window.dataLayer = window.dataLayer || []; </script> <!-- Google Tag Manager --> <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= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');</script> <!-- End Google Tag Manager -->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 Wowza Flowplayer 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>
You can configure the GA4 plugin using the top-level configuration ga object. The following properties can be included in your configuration.
This code snippet provides an example of the top-level configuration using a ga_instance and Google tag ID. It's tailored more towards using the gtag.js JavaScript framework to send data from your site to Google's measurement products.
ga: {
// set the data_layer_tracking property to true to leverage the dataLayer object
data_layer_tracking: true,
// 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.
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.
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 plan to track must be specified in the ga configuration. This includes event actions where you don't want to change the default value.
By replacing the default value, you can track ad position and associated events. This capability only applies to ad_start events, such as ad_start_preroll, ad_start_midroll, and ad_start_postroll.
Let's consider a scenario where you're trying to determine when the first, second, or third ad preroll has started. To do this, update your ga configuration to include [x] in your custom ad_start_preroll event action:
ga: {
ga_instances: ["G-XXXXXXXXXX"],
event_actions: {
ad_start_preroll: "ad_start_preroll_[x]",
}
}The GA4 plugin replaces the [x] and creates a sequence such as ad_start_preroll_1, ad_start_preroll_2, etc. This event sequence is sent to Google Analytics.
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_preroll",
ad_start_midroll: "ad_start_midroll",
ad_start_postroll: "ad_start_postroll"
}
}