How to see your Video clicks in Google Analytics – Via Google Tag Manager (GTM)

In this post I will talk you through linking your VideoSpicer video results to your Google Analytics account. This way, you can see which specific actions lead to conversions. We help you measure Video Clicks in Google Analytics!

You are probably already familiar with GTM procedure: every interaction you wish to track, needs a tag and a trigger. If you wish to track all In-Video results with Google Analytics, you need to create a Google Analytics Tag and a Trigger (rule) when a tag must fire. To further specify your results, Variables need to be set up that check information from the DataLayer and sent to Google Analytics.

Creating Variables is the first part:

  1. Go to Variables
  2. Scroll down to User-defined variable section and click the New button
  3. In Variable Configuration choose Data Layer Variable:
  4. Add the following Variables:
    Variable Name Name DataLayer Variable The Data it shows
    VS – Action vsAction Defines the action as a ‘videospicer_video’ interaction
    VS – Category vsCategory Defines the actions as an interaction as video ‘started’, ‘ended’, or ‘interaction Clicked’
    VS – VideoTitle vsVideoTitle Shows the Video Title as given within the VideoSpicer tool
    VS – VideoEmbed vsVideoEmbed A unique code for every video, if you need to distinguish videos by something other than their name.
    VS – ItemType vsItemType Shows a code that shows you the type of interaction:

    0 Text
    1 Image
    2 Url / link
    3 Scrolltext
    5 Hotspot
    6 Jump
    7 Pauze
    8 Menu
    9 Highlight
    10 Audio
    11 Zoom

    VS – ItemTitle vsItemTitle Shows the Video Action as given within the VideoSpicer tool
    VS – ItemValue vsItemValue Here you see the url or location that that Interaction is linked to
    VS – ItemCorrect vsItemCorrect Linked to asking questions, counts when given the correct answer

Creating a Tag is the easy part of this process. Let’s make one :

  1. Go to Tags
  2. Press New button
  3. In Tag Configuration choose Universal Analytics:
    1. Paste your Google Analytics ID (e.g. UA-XXXXXX). It would be better if you pasted it as a constant variable. Please read the following blog post to set this up.
    2. Track Type – Event
    3. Event Category – {{VS – Action}} (feel free to choose another appropriate title)
      This will show ‘videospicer_video’ as an event category
    4. Event Action – {{VS – Category}}(feel free to choose another appropriate title)
      VideoSpicer will send information to Google Analytics about wether this is a video ‘started’, ‘ended’, or ‘interaction Clicked’.
    5. Event Label –{{VS – VideoTitle}} – {{VS – Label}}.
      This will show the title of the video, and the name of the Interaction, to identify every Call To Action seperately.
    6. Leave other fields as they are.

Leave the Triggering part empty (for now) and click Save. We’ll get back to it in next chapter of this blog post.

Create a Trigger after setting up the Tag:

  1. Go to Triggers
  2. Press New button
  3. In Trigger Configuration choose Custom Event.
  4.  Define Name of Event ‘ga-event-videospicer’.
  5. Click Save

Now go back to your VideoSpicer Tag, Click on it and add the ‘ga-event-videospicer’ Trigger.

How to send your Video clicks to Google Analytics - setting up your variables wiith videospicer.com
Add In-Video buttons, measure the results in Google Analytics with VideoSpicer.com
How to send your Video clicks to Google Analytics - Analyse in-video clicks and choices

VideoSpicer Player

Add the following code above the < /head> of your website

<script>
if (typeof window.dataLayer === 'undefined') {
window.dataLayer = window.dataLayer || [];
}
window.addEventListener("<wbr ></wbr>message", receiveMessage, false);
var vendor = 'hihaho';
var allowedOrigins = ["<a href="https://player/" target="_blank" rel="noopener" data-saferedirecturl="https://www.google.com/url?q=https://player&source=gmail&ust=1551799955711000&usg=AFQjCNGukQ8EHhnfKvtABv8TKf8o-ycnwg">https://player</a>." + vendor + ".com"];
var category = 'videospicer_video';
var event = 'ga-event-videospicer';

function receiveMessage(message) {
if (!allowedOrigins.includes(mess<wbr ></wbr>age.origin) || !message.data) {
return;
}

var data = JSON.parse(message.data);
if (data.origin.name !== 'HiHaHoJSApi') {
return;
}

switch (data.type) {
case "init":
console.log('The Videospicer Video has been loaded');
break;
case "documentTrigger":
return triggers(data.triggerName, data.triggerData);
}
}

function triggers(eventName, data) {
var dataObject = {
'event': event,
'vsCategory': category,
'vsAction': eventName.replace('_', '-').replace(vendor + '-', ''),
'vsVideoTitle': data.video.title,
'vsVideoEmbed': data.video.embed,
'vsItemType': '',
'vsItemTitle': '',
'vsItemValue': '',
'vsItemCorrect': '',
};
switch (eventName) {
case vendor + '_started':
return started(dataObject, data);
case vendor + '_answer':
return answer(dataObject, data);
case vendor + '_interaction_clicked':
return click(dataObject, data);
case vendor + '_menu_item_clicked':
return menuItemClick(dataObject, data);
case vendor + '_chapter_item_clicked':
return chapterItemClick(dataObject, data);
case vendor + '_optional_variable_submitted'<wbr ></wbr>:
return optionalVariableSubmitted(data<wbr ></wbr>Object, data);
case vendor + '_ended':
return ended(dataObject, data);
}
}

function started(dataObject, data) {
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}

function optionalVariableSubmitted(data<wbr ></wbr>Object, data) {
dataObject['vsItemTitle'] = data.value.name;
dataObject['vsItemValue'] = data.value.value;
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}

function answer(dataObject, data) {
dataObject['vsItemTitle'] = typeof data.answerText !== 'undefined' ? data.answerText : '';
dataObject['vsItemValue'] = data.points;
dataObject['vsItemCorrect'] = data.correct;
dataObject['vsItemType'] = data.type;
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}

function click(dataObject, data) {
dataObject['vsItemTitle'] = data.interaction_name;
dataObject['vsItemValue'] = data.action.link;
dataObject['vsItemType'] = data.action.type;
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}

function menuItemClick(dataObject, data) {
dataObject['vsItemTitle'] = data.menuItem.title;
dataObject['vsItemType'] = data.menuItem.action.type;
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}

function chapterItemClick(dataObject, data) {
dataObject['vsItemTitle'] = data.chapterItem.title;
dataObject['vsItemValue'] = data.chapterItem.start_time;
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}

function ended(dataObject, data) {
window.dataLayer.push(dataObje<wbr ></wbr>ct);
}
</script>
VideoSpicer Clickable video for startups

With this tool, you can REALLY start proving the value of your videos!

Excited? Start measuring Video clicks in Google Analytics!