Skip to main content

Google Analytics

We know, Google Analytics is complicated. Depending on when their tracking code was added to your site, one of their variation was used: Classic (ga.js), Universal Tracking, gtag.js or more recently GA4.

For all installations, you need to use the hooks feature where callback functions are defined and triggered when their respective events happen:

videodonut("init", "YOUR-VIDEO-ID", {
/**
* Hooks
*/
onLoad: function (video) {
// Widget loaded. Insert tracking here.
},
onOpen: function (video) {
// Video player opened. Insert tracking here.
},
onPlay: function (video) {
// Video started playing. Insert tracking here.
},
onClose: function (video) {
// Video player closed. Insert tracking here.
},
onButtonClick: function (video) {
// Call-to-action button clicked. Insert tracking here.
},
onShutdown: function (video) {
// Widget is terminated. Insert tracking here.
},
});

Pick your flavor: The codes below displays a sample event handler that sends a conversion event for the Play action to Google Analytics using all 4 possible methods.

Classic (ga.js)#

Documentation: https://developers.google.com/analytics/devguides/collection/gajs

<script>
function (video) {
// Change the variables below:
var event = 'YOUR GOOGLE ANALYTICS CONVERSION EVENT'
var action = 'Play' // Example: Open, Play, Close, Click
var category = 'VideoDonut'
/*
Google Analytics Classic (ga.js) tracking
*/
_gaq.push([
event, category, action, video.title
])
}
</script>

Analytics.js (ga)#

Documentation: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

<script>
function (video) {
// Change the variables below:
var event = 'YOUR GOOGLE ANALYTICS CONVERSION EVENT'
var action = 'Play' // Example: Open, Play, Close, Click
var category = 'VideoDonut'
/*
Google Analytics Universal Tracking
*/
ga('send', event, category, action, video.title)
}
</script>

Universal Analytics (gtag.js)#

Documentation: https://developers.google.com/analytics/devguides/collection/gtagjs/events

<script>
function (video) {
// Change the variables below:
var event = 'YOUR GOOGLE ANALYTICS CONVERSION EVENT'
var action = 'Play' // Example: Open, Play, Close, Click
var category = 'VideoDonut'
/*
Google Analytics gtag.js Tracking Code
*/
gtag(event, action, {'event_category': category, 'event_label': video.title})
}
</script>

GA4 (gtag.js)#

Documentation: https://developers.google.com/analytics/devguides/collection/ga4/events Help Center Articles:

The gtag.js snippets for a Universal Analytics property and for a Google Analytics 4 property are fundamentally the same.

<script>
function (video) {
// Change the variables below:
var event = 'YOUR GOOGLE ANALYTICS CONVERSION EVENT'
var action = 'Play' // Example: Open, Play, Close, Click
var category = 'VideoDonut'
/*
Google Analytics gtag.js Tracking Code
*/
gtag(event, action, {'event_category': category, 'event_label': video.title})
}
</script>

Checking the Google Analytics version#

How do I know which version of the Google Analytics tracking code is on my website? To find out which version of Google Analytics tracking you’re using:

  1. Go to your website.
  2. Right click and select View page source.
  3. Press ctrl (cmd) + F to open the find menu.
  4. Search for the various tags.
    1. Search for ga.js. If you find a reference to this you are using the Classic tracking.
    2. Search for analytics.js. If you find a reference to this you are using Universal tracking.
    3. Search for gtag.js. If you find a reference to this you are using the gtag.js tracking code.

Ready to Grow Your Business?Start using Video Donut today.

Add a stories-style video to your website to boost engagement and conversions.

Sign up for Free