How to use Vidyard with Google Analytics (GA4 & UA)

You can use Google Analytics and Vidyard together to get a full picture of how video contributes to engagement and conversions on your webpages.

In this article, you’ll learn how to track events from your Vidyard videos and capture the data in your Google Analytics account.

An “event” tells you how a viewer interacts with your video – for example, when the video starts (plays), progresses to different milestones (the viewer watched 25%, 50%, 75% of the video), and completes (playback ends).

• See instructions for Google Analytics 4
• See instructions for Universal Analytics (deprecation in July 2023)

Requirements (GA4)

• You need a Google Analytics 4 property
• In your GA4 property’s data stream, make sure Enhanced Measurement is enabled

Add GA and Vidyard scripts to your webpage (GA4)

To add the necessary scripts for GA and Vidyard, you need access to the HTML for your web pages. Ask your web developer to perform these steps if you're unable to complete the steps yourself.

• Add the Google Tag for your GA4 property to the page
• Add your video embed code from Vidyard to the page (inline or lightbox)
• Add Vidyard’s Progress Events script to the page to send video engagement events to GA4

Adding scripts to Vidyard sharing pages or hubs

If you want to use Google Analytics to track video engagement on a Vidyard sharing page or video hub, you can edit the HTML in the Design Settings of either page. You will need permission to Edit video hubs or Edit sharing pages.

1. Sign in to your Vidyard account
2. Select Channels > Sharing Page OR Hubs from the main menu
   • If needed, use Change Folder to switch folders and edit a different sharing page or hub
3. Open the Code Editor for your sharing page or video hub
4. Add your Google Tag and the Progress Events scripts to Header JS

Vidyard's progress events script (GA4)

The following script is an example that uses Vidyard’s progress events API to pass video engagement data to Google Analytics.

The script sends an event for video_start, video_progress and video_complete when the viewer reaches specific % milestones during playback. Each event sent to Google Analytics also contains a set of parameters about the video, including the video_title, video_current_time and video_url.

• video_start triggers at 0%
• video_progress triggers at 10, 25, 50, 75, 95%
• video_complete triggers at 100%

We’ve created this example to mimic the enhanced event measurements that Google uses to track interactions with videos. You can modify the script to add or remove other player events that you want to track.

function initApp() {

    vidyardEmbed.api.addReadyListener(function(data, player) {
    var video_embed_url = window.location.href; // defines url where video is embedded
        
// ****** PROGRESS EVENTS ******     
        vidyardEmbed.api.progressEvents(function(result) {

            // defines the video URL, video duration, and video title
            var uuid = result.player.uuid;
            var video_url = "https://play.vidyard.com/" + uuid;
            var video_duration = result.player.metadata.chapters_attributes[result.chapter].video_attributes.length_in_seconds;
            var video_title = result.player.metadata.chapters_attributes[result.chapter].video_attributes.name;

            // Function for sending milestone data to GA
            // the data we send is the same for start, complete, and progress, but with a different event name for each
            function sendProgressToGA(name) {
                gtag('event', name, {
                'video_current_time': (result.event/100)*video_duration,
                'video_duration': video_duration,
                'video_percent': result.event, // this will be 0 for video_start, and 100 for video_complete
                'video_provider': "Vidyard",
                'video_title': video_title,
                'video_url': video_url,
                'video_embed_url': video_embed_url
                });
        }

            if (result.event === 0) { // video has been started
                console.log("video " + video_title + "has been started");
                // send data to GA for video start
                sendProgressToGA("video_start");

            } else if (result.event === 100) { // video has been completed
                console.log("video has been completed");
                // send data to GA for video complete
                sendProgressToGA("video_complete");

            } else { // video has reached another milestone (ie. 25%, 50%, etc.)
                console.log("video has reached " + result.event + "%");
                // send data to GA for video progress
                sendProgressToGA("video_progress");
            }
            }, [0, 10, 25, 50, 75, 95, 100]); // milestones at which events fire
            });
}

window.vidyardEmbed ?
    initApp(window.vidyardEmbed) :
    (window.onVidyardAPI = function(vyApi) { initApp(vyApi); });

Events measurement and parameters (GA4)

Using the example Progress Events script provided, the following table explains when events are triggered and what parameters are collected for each event.

You can find data for each triggered event in Google Analytics under Reports > Engagement > Events. You can also find event data as it happens under Reports > Realtime.

Verify data is passing to Google Analytics (GA4)

You can check whether video data is passing to Google Analytics using the developer tools in your browser.

For best results, open the page with your video in an incognito or private browsing session. Make sure that you have no ad blockers or extensions that might prevent Google from tracking events on the page.

1. Right click on the page and select Inspect to open developer tools
2. Open the Network tab
3. Play the video on the page
4. Click on the requests in the Network tab calledcollect?
5. Under Request Payload, you should see event names (shortened to en) for each event: video_start, video_progress and video_complete.

Each event name (en) in the payload should include a set of data that contains the event parameters for video_current_time, video_title, etc. Parameters are labeled as ep (an event parameter that is text) and epn (event parameter that is a number).

Note that, with GA4, events that trigger in quick succession (like video_progress) are batched together and sent to Google as a string of data. You can find the string under the Request Payload.

Where to find video events data in Google Analytics (GA4)

Once data passes to Google Analytics, you can find the video events under Reports > Engagement > Events. Assuming you use the example progress events script we provide, you should see an event for video_start, video_progress and video_complete.

Select the name of an event to see more details.

If you also want to see data for specific parameters within the event details (video_title, video_current_time, etc.), you need to create these parameters as custom dimensions in GA. Once the parameters exist as custom dimensions, you can see and make use of the data in your Reports and other GA4 features, like Explorations.

Capture more video events in Google Analytics (GA4)

In the example progress events script, we pass basic video events like video_start, video_progress and video_complete to Google Analytics.

If you want, you can use Vidyard’s Player API to capture different types of video events in Google Analytics – for example, you might send an event whenever a viewer pauses the video, seeks to a different time in the video, or changes the volume.

Below is an example script that you might use to capture video_play events – whenever the user plays the video (other than the initial video_start).

function initApp() {
​
  vidyardEmbed.api.addReadyListener(function(data, player) {
​
    var video_embed_url = window.location.href; // defines url where video is embedded
    var uuid = player.uuid;
    var video_url = "https://play.vidyard.com/" + uuid;
​
        // this function gets info about the current video 
        function getVideoMetadata() {
            var video_index = player.getCurrentVideoIndex();
            var video_name = player.metadata.chapters_attributes[video_index].video_attributes.name;
            var video_duration = player.metadata.chapters_attributes[video_index].video_attributes.length_in_seconds;
            var current_time = player.currentTime();
​
            return {
            "video_index": video_index,
            "video_name": video_name,
            "video_duration": video_duration,
            "current_time": current_time
              }
            }
        function getPercent(current_time, duration) {
            return Math.round((current_time/duration)*100);
        }
        
// ****** PLAY ******  
      player.on("play", function(time) {
​
                gtag('event', "video_play", {
                    'video_current_time': time,
                    'video_duration': getVideoMetadata().video_duration,
                    'video_percent': getPercent(time, getVideoMetadata().video_duration),
                    'video_provider': 'Vidyard',
                    'video_title': getVideoMetadata().video_name,
                    'video_url': video_url,
                    'video_embed_url': video_embed_url
                })
            });
          });
}
window.vidyardEmbed ?
    initApp(window.vidyardEmbed) :
    (window.onVidyardAPI = function(vyApi) { initApp(vyApi); });

Vidyard & Universal Analytics (UA)

If you have yet to switch from Universal Analytics (UA) to GA4, you can still pass data from your videos to Google Analytics. Be aware that Google will deprecate Universal Analytics starting in July 2023.

Add Google Analytics & Vidyard scripts to your webpage (UA)

• Add Google Analytics’s UA tracking script to head of your page or website
• Add your video embed code from Vidyard to page (inline or lightbox)
• Add the following google-analytics.js (progress events) script to the body of the page.
  • • This script uses Vidyard’s progress events API to pass engagement events to Google at specific video percent milestones (0, 25, 50, 75, 100%).

<script type="text/javascript">
 window.onVidyardAPI =(vidyardEmbed)=>{
 vidyardEmbed.api.addReadyListener((_, player)=>{

var scriptTag = document.createElement('script');
 scriptTag.src ="//play.vidyard.com/v0/google-analytics.js";
 document.body.appendChild(scriptTag);

},)
}
</script>

Adding your Google Tag script to a sharing page or hub (UA)

If you want to use Google Analytics (UA) to track video engagement on a Vidyard sharing page or video hub, add your UA tracking script from Google to the HTML header of the sharing page or hub.

Adding your tracking ID to the <head> tag allows Google to detect interactions like page views. In combination with the google-analytics.js script, it also allows you to capture video progress events in Google Analytics when viewers watch your videos.

To edit the page HTML, your Vidyard user needs permission to Edit sharing pages or Edit video hubs.

1. Sign in to your Vidyard account
2. Select Channels > Sharing Page OR Hubs from the main menu
   • If needed, use Change Folder to switch folders and edit a different sharing page or hub
3. Open the Code Editor for your sharing page or video hub
4. Add your UA tracking script and the Progress Events script (google-analytics.js) to Header JS

Events and parameters (UA)

Once data passes to Universal Analytics, you can find events from Vidyard under Behavior > Events > Overview.

Each event includes a Category, Action and Label that displays in your reports. Read more about the event data model in UA to learn about these three data points.

When Vidyard passes data to GA, the event data is structured as follows:

• Event Category = Player Title
• Event Action = Video Title
• Event Label = % of the video watched (0, 25, 50, 75, 90)