Tag Manager for cleaning scraped Vimeo Video data

One of the best tools for tracking and defining KPIs for digital advertising is Google Tag Manager. With just a few bits of information I can create a new client account and be just minutes away from providing advanced data analysis for the sales team and client. One of the first things I do is to create a new Google Analytics (GA) account and add the tracking through the tag manager container. It’s all mine, this GA account. I can add views, goals, events, funnels, search metrics, segments, you-name-it, and it won’t interrupt or interfere with the client’s existing account. What’s even better, I don’t have to get permission or spend hours explaining why I need this-or-that, I just do-it. With tag manager you can get as simple as tracking page views, or as complex as tracking multi-channel, user cross platform funnels, shopping cart variables, and even track the user to CRM history.

I have a client with a website that uses Vimeo videos rather than YouTube videos. Most of the tracking from YouTube to GA is already preprogrammed and simplified. Vimeo videos, however, are not preprogrammed to track in GA. And tag Analytics and data science dashboard view of goalsmanager is fairly new and not yet as popular as I would like, so there isn’t a lot of help available. For instance, if you need a custom html or script for tracking Vimeo videos in, say something like GA. One of the best resources for any data science or analytics professional who are seeking programming expertise is github.com. Another good resource for programming help is stackoverflow.com. I have found both sources to be valuable for Python, R, java, and html assistance and troubleshooting. On this particular Vimeo project I was able to find a program written specifically for Vimeo Videos on github. That’s just plain lucky, and it saved me dozens of hours.

Adding the custom html to a tag manager account, creating variables, triggers, and tags as well as writing a dataLayer is still time-consuming and can take days of experimentation to perfect. I’ll show you how I got there and maybe save you several hours if not days of testing. Start by setting the Vimeo video variables to ‘true’ that provide analytics with key data. Within the iframe container for the video set ‘data-progress, data-seek, and data-bounce’ to true. These have to be set for every video.

<iframe src="//player.vimeo.com/video/133384247" width="100%" height="auto" frameborder="0" data-progress="true" data-seek="true" data-bounce="true" webkitallowfullscreen mozallowfullscreen allowfullscreen>

Add a dataLayer to push the video data to analytics on every page that include a Vimeo video. Place the data layer on the webpage immediate after the opening ‘<'body…> element and immediately before the tag manager container. Here’s what the dataLayer needs to be (note the actual video file name replaces the XXXXXXXXX shown below):

<!--start dataLayer-->
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Started video', 'eventLabel': 'http://player.vimeo.com/video/XXXXXXXXX', 'eventValue': undefined, 'eventNonInteraction': true});

dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Paused video', 'eventLabel': 'http://player.vimeo.com/video/XXXXXXXXX', 'eventValue': undefined, 'eventNonInteraction': true});

dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Resumed video', 'eventLabel': 'http://player.vimeo.com/video/XXXXXXXXX', 'eventValue': undefined, 'eventNonInteraction': true});

dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Completed video', 'eventLabel': 'http://player.vimeo.com/video/XXXXXXXXX', 'eventValue': undefined,'eventNonInteraction': true});

dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Skipped video forward or backward', 'eventLabel': 'http://player.vimeo.com/video/XXXXXXXXX', 'eventValue': undefined, 'eventNonInteraction': true});

<!--end dataLayer-->

The webpages are almost ready to wrangle and send the required data. To trigger the pages to collect and send the data requires two java programs. These programs are installed on the website server and then two scripts are added to the of each webpage that contains a video. The java programs are available from the following free downloads.


Vimeo.ga.min.js  (This is the program borrowed from github — Sander Heilbron)

On my web server I placed these two programs inside a folder named ‘js.’ The final step for collecting the raw data from the videos is to add the two scripts in the ‘<'head> of each webpage that includes a Vimeo video for tracking.

<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/vimeo.ga.min.js"></script>

Setting up Google Analytics to munge the data  into readable tables and charts  is accomplished with ‘goals.’ Within the analytics Admin tab select goals from the ‘view’ menu.  

setting goals in GA

Create a new custom goal. Name this goal Video View and set the type to be an ‘Event.’

Name the goal and set the event

Set the details Category equal to ‘Vimeo’ and Action equal to ‘Started video.’ Optionally set the Goal Value to reflect the revenue opportunity for the value of a video view. In my case study it was determined this value is $50 per video view.

Setting the goal parameters

Additional Goals can also be set to track the percent of video watched including:
  • Played video: 25%
  • Played video: 50%
  • Played video 75%
  • Paused video
  • Resumed video
  • Completed video

Each of those Event Actions is scraped and wrangled from the vimeo.ga.min.js and munged in GA. It is not necessary to set up a goal for each unless it is important to your client to set goal values for each Action. You will still be able to see the data through the Behavior/Events reports.

Set the value for the goal  

The data scraping from the website is now completed and Google Analytics is ready to munge the scraped data and show the results in the goal tracking and funnel tracking tables and graphs.

The final steps are to clean the data using tag manager.   There are five variables that need to be defined. Each of these variable are defined as ‘Data Layer Variables. In the tag manager console select Variables on the left side navigation panel. Make sure that all of the ‘Clicks’ variables are selected. Choose ‘New’ in the user-defined variables section and then select Data Layer Variable.

Custom variables with tag manager

Add the variable name, and configure the dataLayer variable name as shown and repeat for each of the five new variables.

Naming and defining variables  
  • Event Category : eventCategory
  • Event Action: eventAction
  • Event Label: eventLabel
  • Event Value: eventValue
  • Event Non Interaction: eventNonInteraction
There are at least four conditions to setup that will cause the clean data collection from the website. Select ‘Triggers’ from the left hand navigational panel, and click on the New trigger icon and then select ‘Other’, and then ‘Custom Event.’ Name the trigger ‘Vimeo Clicks’

Creating the vimeo video trigger

Add four conditions to the Vimeo Clicks trigger as shown in the image above.
  • Event Category – does not match RegEx (ignore case) — ^$|^\(not.set\)$|^undefined$
  • Event Action – does not match RegEx (ignore case) — ^$|^\(not.set\)$|^undefined$
  • Event Label – does not match RegEx (ignore case) — ^$|^\(not.set\)$|^undefined$
  • Event — equals – Vimeo
Save the new vimeo clicks trigger.  

The final step is setting up the tag. Select Tags from the left hand navigational panel, and click on the New icon. The tag will be a Google Analytics product named Vimeo Event GA. Select Universal Analytics (unless you are still operating pre 2012 analytics in which case it’s time for you to — upgrade!)

Creating the vimeo video tag

Configure the tag to accept the push data from the dataLayer. Add the Universal Analytics account number, enable display advertising features, and set the track type to be an event. In the event tracking parameters set the Category, Action. Label, and Value parameters to the custom variables that were created previously.

set the tag parameters  

Set the tag to fire on all pages, and save the tag.

Tag is set to fire on all pages

Last Updated BY: on .

Leave a Comment

Filed under Data Science

Comments are closed.