Disclaimer: This article is provided for instructional purposes only. Vidyard does not support or guarantee the code. Vidyard also cannot offer support for third-party tools and platforms or technologies such as JavaScript, jQuery or CSS.
Overview
You may already be pushing video view milestones into Google Analytics (GA). This is a great way to have all of your website tracking and video views placed into one system.
Another thing you can add to this data is how your viewers are interacting with calls to action within Vidyard Events.
You can bond any type of action, such as a link click or a button press by modifying the HTML code of an Event (CTA) in Vidyard. This is designed to send the data into the 'Events' section of GA.
Steps
1. After you have created your Custom Event, paste the following code into the HTML, preferably at the end.
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE-ANALYTICS-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GOOGLE-ANALYTICS-ID', {
cookie_flags: 'secure;samesite=none'
});
window.addEventListener('showEvent',function(){ gtag('event', vyContext.player_id, {'event_category': 'Videos','event_label': 'Event View'})});
function sendevent() {
gtag('event', vyContext.player_id, {'event_category': 'Videos', 'event_label': 'Button Click'});
}
</script>
2. Next, ensure that you replace the text '[GOOGLE ANALYTICS ID]' with your specific Tracking ID. It will usually start with 'UA-'.
The Google Analytics ID can be found in your Admin settings of Google Analytics:
3. Within the code provided on this article is a function called 'sendevent'. It looks like this:
In order for this to get triggered, you will need to add a matching 'onclick' value to a button or link. This will be added to a specific clickable element within your current code.
The end result will look similar to this line of HTML, where the submit button will now have an 'onclick' value of 'sendevent()' :
<div><input type="button" class="submit-button" value="Submit" onclick="sendevent()" /></div>
You can also combine your Google Analytics push event with other onclick events in your code where required. The result would look something like this:
4. You can control what values you send into Google Analytics by adjusting the 'Category', 'Action' and 'Label' within the code.
The default will send the Category as 'Videos', the Event as the Player UUID and the Label as 'Button Click'
function sendevent() { gtag('event', vyContext.player_id, {'event_category': 'Videos','event_label': 'Button Click'})};
You can edit these fields to match the type of tracking you are doing, while also taking into account how other data is presented in GA.
As an example, I might want to know if my viewer clicked on a link that took them to a homepage. In this case, I would edit the function so that it looks like this:
function sendeventHomePage() { gtag('event', vyContext.player_id, {'event_category': 'Videos','event_label': 'Home Page Clicked'})};
and then assign that function name to an onclick within the <a> attribute, such as the following:
Within the code is a line that also sends an GA Event when the Vidyard Event is viewed, so you can do a comparison between views and button clicks within your analysis. Feel free to change the Category, Action & Label for this if required:
If you want to track multiple links or buttons within the Event, you can duplicate the send event functions to match the number of clicks you wish to track. Then assign the related onClick elements as in step 3.
For example, the final section of the code could look like this:
function sendeventFormSubmit() { gtag('event', vyContext.player_id, {'event_category': 'Videos','event_label': 'Form Submit'})};
function sendeventHomePage() { gtag('event', vyContext.player_id, {'event_category': 'Videos','event_label': 'Home Page Clicked'})};
function sendeventSubscribe() { gtag('event', vyContext.player_id, {'event_category': 'Videos','event_label': 'Subscribe Clicked'})};
</script>