Step 1. Add Google Analytics/Google Tag Manager tracking code to your page

To pass your Vidalytics watch data to Google Analytics or Google Tag Manager, first you need to add the appropriate tracking code to your page.

Universal Analytics with gtag.js:

You will need to add a code like this to your page:

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

Elements to modify:

  • "UA-XXXXXXXXXX-X" should match your Google Analytics ID.

Please follow the official Google Analytics article for more details.

New GA4 implementation

If you have set your GA4 from scratch, you can follow the same instructions above, and just replace UA-XXX with your new G-XXX code from GA4 in the tracking code.

If you use the old, Universal Analytics, and want to also send data to the new GA4, then you can add the line gtag('config', 'G-P6XXXXXXXB'); to the old tracking code.

You can also enable/add GA4 to your existing UA using the steps below, without having to touch any code:

Tracking using Google Tag Manager

You will need to add a code like this to your page:

<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>

Elements to modify:

  • "GTM-XXXXXX" should match your container ID.

If you use Tag Manager, then there is no need to deploy and additional gtag.js-based code on your site, as Tag Manager takes care of it under the hood. Please follow this article for more details.

Step 2. Add Vidalytics custom code snippet to your page

Additionally, you'll need to set up and modify the code below to match your specific video and preferences on what you'd like to track:

<script>
var _vidalyticsPlayerPlugin = {
"EMBED_ELEMENT_ID": {
"google-analytics": {
"id": "UA-XXXXXXXXXX-X", // Google Analytics ID
"videoTitle": "Video XYZ", // Video Title to Send to GA
"sendWatchedPercent": "0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100", // Which percents of video length should be sent to GA as "milestones"
"sendPlay": true, // Send Play Event to GA or not
"sendPause": true, // Send Pause Event to GA or not
"sendPausePercentage": true, // Send at which time % user has paused
"sendPlayGateSubmit": true // Send Play Gate Submit Event to GA or not
}
}
};

window['_vidalyticsPlayerPlugin'] = _vidalyticsPlayerPlugin;
</script>

Elements to modify:

  • EMBED_ELEMENT_ID should match your Vidalytics embed ID. E.g.: vidalytics_embed_xxxxxxxx

  • "id": "UA-XXXXXXXXXX-X" should match your Google Analytics ID.

  • "videoTitle": "Video XYZ" - Use here the title you want GA to display for this video in your reports.

  • "sendWatchedPercent": - Add as many percentages of your video as you want to track in GA.

Make sure you place your tracking code above the Vidalytics embed code. It can go anywhere above the embed code, or even in the head section.

Fire a GA event when someone submits a Play Gate form

If you have set up a Play Gate in Vidalytics and would like to pass opt-in data into GA, just add this line of code to the code that you already saw above:

"sendPlayGateSubmit": "optin via player"

Checking Your Data in GA

Inside Google Analytics, you can see events immediately here:

And the totals report here (it takes one day to update the Total Events report):

To see more details, click on the "Video" category.

Track Goals in GA Based on Video Watch Time

To track goals inside of GA based on the watch data you're passing via the code above, follow these steps:

Set your Goal as 'Custom'.

Add a title and set the type as 'Event'.

The goal details will depend on what you're wanting to track with this code.

Category - video

Action - this could be 'Play' or 'Pause' or 'Pause Percentage' or "(number)% watched" e.g.: "10% watched" or "30% watched"

Label - The title of your video

Value - This is not required for play percentage, but you will need to add it if you're wanting to track 'Pause Percentage' e.g.: 35 (i.e. pause at 35%)

Save your goal and you're ready to go!

Did this answer your question?