Blog

Tracking how users are interacting with your embedded Vimeo videos is now easier than ever thanks to Google Tag Manager (GTM). After reading my colleague Nicky Yuen’s post about tracking user interaction with embedded YouTube videos, I felt inspired to write a similar post about Vimeo videos. So without further ado, here is the step by step guide to setting up Vimeo tracking using Google Tag Manager (GTM).

Step 1 – Create your variables

Google Analytics Tracking ID

This variable will hold the Google Analytics tracking ID. This is how Google
Tag Manager will know which property it should to send information to.

  • Variable Name
    • UA – Property ID
  • Variable Type
    • Constant
  • Variable Config
    • Value: UA-XXXXXX-X (replace with your property tracking ID)

UA_PropertyID

Vimeo Video Present

This variable will track whether or not a Vimeo video is embedded on the page. It will return TRUE if a video is embedded on the page, and FALSE if there is no video embedded. This is important because we do not want to to execute our script library and potentially delay the page load time unless we are sure that it is needed.

  • Variable Name
    • cj – Vimeo Video Present
  • Variable Type
    • Custom Javascript
  • Variable Config
    • Custom Javascript:
//this function checks for the presence of an embedded Vimeo video
//if one or more videos are present, return true, otherwise return false

function () {
  for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {
    if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
      return true;
    }
  }
  return false;
}
 chrome_2016-10-17_12-57-24

Data Layer Category

We need to define a variable which will hold the event category that our tracking script will push into the dataLayer.

  • Variable name:
    • dL – eventCategory
  • Variable type:
    • Data Layer Variable
  • Variable configuration:
    • Data Layer Variable Name: eventCategory
    • Data Layer Version: Version 2
dl_EventCategory

Data Layer Action

We need to define a variable which will hold the event action that our tracking script will push into the dataLayer.

  • Variable name:
    • dL – eventAction
  • Variable type:
    • Data Layer Variable
  • Variable configuration:
    • Data Layer Variable Name: eventAction
    • Data Layer Version: Version 2
DL_EventAction

Data Layer Label

Now, we need to define a variable which will hold the event label that our tracking script will push into the dataLayer.

  • Variable name:
    • dL – eventLabel
  • Variable type:
    • Data Layer Variable
  • Variable configuration:
    • Data Layer Variable Name: eventLabel
    • Data Layer Version: Version 2
DL_Event_Label

Step 2 – Create Your Triggers

Vimeo Event Trigger

  • Trigger Name
    • Vimeo Video
  • Trigger Event Type
    • Custom Event
  • Trigger Fires On
    • Event Name: vimeo
VimeoVideo

Vimeo Present Trigger

This trigger will fire when the page is fully loaded (gtm.dom) and when our previously created variable detects an embedded Vimeo video and returns a value of “true”.

  • Trigger Name
    • Vimeo Present
  • Trigger Event Type
    • Custom Javascript
  • Trigger Fires On
    • “cJ – Vimeo Video Present”  >  equals  >  true
VimeoPresent

Step 3 – Configure Tag

Google Analytics Event Tag

This will be the tag that sends all of the wonderful information we are capturing with our listener script into our Google Analytics account.

  • Tag name
    • UA – Vimeo Event
  • Tag product
    • Google Analytics
  • Tag type
    • Universal Analytics
  • Tag config
    • Tracking ID: {{UA – Property ID}}
    • Track Type: Event
    • Category: {{dL – eventCategory}}
    • Action: {{dL – eventAction}}
    • Label: {{dL – eventLabel}}
  • Tag fires on
    • Vimeo Video
UA_VimeoEvent

Vimeo Listener Tag

This tag does all of the behind-the-scenes work to push valuable information about the video to the dataLayer. We will only want to fire this tag when there is a Vimeo video actually embedded on the page, which is why we created a special trigger for it in the previous step.

  • Tag name
    • Vimeo Listener
  • Tag product
    • Custom HTML
  • Tag Configuration
    • HTML: (found at bottom of page)
  • Tag fire on
    • Vimeo Present
Vimeo_listener

Step 4 (optional): Bonus Information About the Video

The Vimeo tracking code not only lets us listen in to play/pause/etc events, it also exposes some additional data points about the video which can be passed through to Google Analytics as custom dimensions enabling some more advanced reporting. The additional data points are as follows:

  • Author
  • Author profile URL on vimeo.com
  • Upload date
  • ID
  • Title

To capture these data points, we’ll need to create some variables to pull the information from the data layer, and also modify our Google Analytics event tag to pass these data points through as custom dimensions.

The variables

Since the above extra data points are stored in the data layer, we will need to create some “Data Layer Variables”. Here are the “keys” that can be used to capture this information:

  • vimeo_playerID
  • vimeo_playerTitle
  • vimeo_playerAuthor
  • vimeo_playerAuthorURL
  • vimeo_playerUploadDate

The Setup (you’ll need to create one for each “key” listed
above)

  • Variable name:
    • dL – vimeo_playerID
  • Variable type:
    • Data Layer Variable
  • Variable configuration:
    • Data Layer Variable Name: vimeo_playerID
    • Data Layer Version: Version 2
DL_vimeo_playerID

The Modified Google Analytics Tag

We will take the existing Google Analytics tag that we configured in Step 3, and simply pass through some additional information as custom dimensions. For this example, I will pass through all of the additional data points in order to show how that would be achieved.

Make sure that these custom dimensions are created within your Google Analytics Administrator settings before you start sending data into them, otherwise the data will not be captured. Google Analytics does not automatically create custom dimensions.

  • Tag name
    • UA – Vimeo Event
  • Tag product
    • Google Analytics
  • Tag type
    • Universal Analytics
  • Tag config
    • Tracking ID: {{UA – Property ID}}
    • Track Type: Event
    • Category: {{dL – eventCategory}}
    • Action: {{dL – eventAction}}
    • Label: {{dL – eventLabel}}
      • More settings
      • Custom Dimensions
        • Index 1: {{dL – vimeo_playerID}}
        • Index 2: {{dL – vimeo_playerTitle}}
        • Index 3: {{dL – vimeo_playerAuthor}}
        • Index 4: {{dL – vimeo_playerAuthorURL}}
        • Index 5: {{dL – vimeo_playerUploadDate}}
  • Tag fires on
    • Vimeo Video
UA_vimeo_event

The Code Snippet – Google Docs

Click here to get the custom Javascript markup required for Vimeo video tracking!

The Code Snippet – Pastebin

Click here to get the custom Javascript markup required for Vimeo video tracking!

Overview

Dynamic Tag Manager makes it simple to set attributes based on the element which is clicked. While this generally satisfies most click tracking needs, there comes a time when advanced tracking is required in order to pass specific data to conversion or traffic variables when deploying Adobe Analytics. In this article, we will share a practical and straightforward technique to do this.

Our Example

In this example, our goal is to track when users click on a video link.  We would also like to capture the title of the video, so that we know which specific videos are being clicked the most. Below is the sample HTML we will have to navigate:

1

In a typical scenario, you would define an “Event Based Rule” as demonstrated in the two screen capture images below:

2
This tells DTM to track any link that has a class value of “video_link”.

3

This tells DTM to extract the text of the clicked anchor.

4

The problem here is that prop1 will be defined as “Watch Now”, but we want this to be populated with “What every marketer needs to know”.

The Solution

We are now going to add a Rule Condition which will include a small snippet of JavaScript that will save a reference to what was clicked in the Data Element.

 

5

6

7

Once you have the data element configured, you can simply map it to the appropriate prop or eVar:

8

In conclusion

Now that we have a reference to the clicked element, we can create as many data objects as needed to populate additional props and eVars. Please note that this is a simplified example created for demonstrative purposes, and is intended to give you an understanding of the fundamentals.

Are you looking for more information, or an expert to help you configure your TMS?  Feel free contact us, we would be happy to discuss your needs.

With all the talk around tag management and how it revolutionizes digital marketing, traffic management and analysis, it isn’t too difficult to conclude that moving away from onsite scripts to marketer friendly, less technical TMS’ is the right way to go.

migration

The challenge arrives when you already have a steady, traditional Google Analytics (or Universal Analytics) implementation in place and there are several thoughts running through your mind (and meetings)… How much more value will a TMS bring us? How long will it take? What happens to my existing data? How can we compare the Tag Management System’s data with our current Google Analytics? How do we preserve the current data and protect it from corruption?

Cardinal Path has worked with several clients to help them move from their traditional GA implementations to perfectly functional Tag Management Systems and improved quality of GA data. Like all technical projects, each migration poses a unique challenge behind some underlying core principles and best practices.

Google Tag Manager (GTM), which has 60% of the market share among the top retailers according to our State of Digital Marketing Analytics in the Top 500 Online Retailers whitepaper, is constantly improving and adding new features. We have used our technical prowess and experience to create a set of rules and guidelines to help you flawlessly move from a GA based system to a GTM system.

State of DM whitepaper graph

The Cardinal Path method ensures minimal data discrepancy, and improved data quality and governance using the latest and greatest features of GTM.

Join me for online training to learn the Cardinal Path method of migrating to GTM on Thursday June 9th.

 

Featured image source: Pixbay
Tag Management Systems (TMS)
Image source: themacx, iStock

We explored the business and the technical considerations and benefits of implementing a Tag Management System (TMS) in a webinar that you can watch on-demand as well as in the blog post that answered the great questions that the webinar attendees left for us. Not surprisingly, many of the questions were about Google Tag Manager, a free tool that is used by 60% of top online retailers according to our recent report. So as a follow up, Dave Fimek, our Sr. Consultant, Implementation, collected the ten most common questions that we receive about GTM and addressed them here:

Q. Is it only for Google products?

A. No, you can deploy anything via Google Tag Manager. The tool is designed to be agnostic to whatever analytics or advertising platform you want to use. Everything from Adobe to Coremetrics will work in GTM.

Q. Does it store any data?

No, try to think of any tag management system as a junction that directs the flow of traffic. The data never stops in GTM and it just gets sent on through to wherever it’s going. This is typically something your IT security people want to know.

Q. Do I have to be a developer to use it?

A. Many will tell you no but if you really want to leverage GTM to its fullest then you’ll want some development chops. The development skill set needed to max out the features GTM offers is pretty basic so even a junior level developer can do well with this tool. If you’re comfortable with JavaScript, CSS, and basic HTML you’ll do just fine with GTM. Where this comes into play the most is building out triggers and variables for your tags. You’ll have to look under the hood of your website to make those configurations.

Q. What kind of team should maintain it?

A. GTM has various levels of user access that can control exactly who can do what in the configuration. It’s recommended that very few people have the ability to publish your container to the website and that those people are looped into the overall development of the website and are very skilled regarding the usage of GTM. The rest of the team can be more marketing and analytics-centric. This will allow them to configure GTM to their liking while your development-savvy gatekeeper reviews the updates and rolls them out to production. Such an approach will take a tremendous load off the development team and empower the marketing and analytics side of the house to get the exact data they need.

Q. Do I have to remove the current implementation code?

A. Yes and no.  Your GTM container will not disrupt any existing tracking code on the page. If, for example, you have the Google Analytics Tracking Code (GATC) on the top of your page executing a pageview it will continue to operate normally. It’s important to avoid having code reporting to the same web property. If you have a tag in GTM firing a pageview to account X and a GATC directly on the page also firing a pageview to account X you will be double counting every session that hits your site.

Q. Can I have code on the page as well as in GTM?

A. Yes.  On larger deployments that involve a lot of tracking you might want to ease yourself into transitioning fully to GTM.  It’s perfectly fine to be iterative about deploying out GTM by migrating over functionality from direct code on the page to Google Tag Manager.  Just be certain to avoid the double-counting issue listed above.  Having both a GTM container code on the page as well as the legacy deployment is a great way to build a proof of concept, and a good method for getting some organizational “buy-in” for using GTM.

Q. What are the alternatives to GTM?

A. There are tons of other tag management systems (TMS) out there for you to use and I would recommend exploring your options. Most of the better ones out there are commercial and do have a price tag associated with using them. I won’t go into specifics regarding the pros and cons of each of the competitors but what I normally tell people is that GTM is one of the newer kids on the block which means that its competitors had a head-start on developing features and functionality. GTM is updating at a breakneck pace and it’s abundantly clear Google has dedicated itself to the product, but it did jump into the race later than some of the competitors. The main reason my clients have chosen another TMS over GTM is typically due to a “must-have” feature that GTM has not quite developed yet or another part of the organization is already paying the bill on some other TMS system.

Q. Can I deploy out the container code using a CMS plugin?

A. You can, but I don’t typically recommend it. When deploying out the container code you should embed it directly into the template or theme files of whatever CMS you’re using.  All CMS’s from WordPress, Joomla, Drupal, to DotNetNuke have a small set of files that govern the look and feel of the website and it’s a perfect permanent home for your container code. If you download and use a plugin you run the risk of that plugin not abiding by best practices. Using a plugin is one of the most non-technical ways to deploy out, but you’re adding a lot more points of failure to your tracking. I would only use a CMS plugin as a stop-gap solution as the container code is being added to your template files.

Q. What is the dataLayer?

A. I’ve defined the dataLayer before in a previous blog post, but in a nutshell the dataLayer is a means to send values from the page into whatever tracking software you’d like as well as notify GTM that some important event or action has occurred on the page. The dataLayer is not a unique concept to GTM and most TMS systems have it in some form or another. The dataLayer does require a developer for your website to add code to the page itself.

Q. How much development effort is it to use the dataLayer?

A. Since this does require a web developer for your website to go in and add code there will be an unavoidable level of effort. Luckily it is pretty low impact and far less invasive than a traditional non-TMS implementation. There are two types of dataLayer code you’ll see on a page. One will push values to the dataLayer immediately upon the page loading. This is ideal for sending values such as, “what type of page is this?” or “who is the author of this page?” The second type will be more on-demand to push values and notifications of when some action happens on the page such as, “what button was just pressed and what was the text on that button?” or “what language did the user just change the page to?”

The dataLayer code itself is very basic JavaScript. The bulk of the effort for your developer will be not understanding that basic dataLayer JavaScript but rather deciding where the JavaScript needs to execute, and how to pluck those values from the page and populate that JavaScript. The more familiar your developer is with the website the faster the turnaround on dataLayer requests. On most of our implementation project we allocate two weeks for the developers to implement the dataLayer changes, but the hours invested during those two weeks are generally pretty low.

Whether you’re looking for a vendor-agnostic expert to help you select, implement, and configure a new TMS, or if you already have a system but are not seeing the ROI that you were hoping for, we can help. Contact us to speak with a TMS expert about your needs.

Tag Management Systems (TMS)
Image source: themacx, iStock

By now, the use of a tag management system (TMS) is widely considered a best practice. And yet, research shows that there are still many organizations that are still not taking advantage of the time savings, quality assurance, and optimization benefits of this tool.

Our most recent webinar explored the business and technical considerations and benefits of implementing a TMS. Nick Iyengar and Nick Wei, our in-house TMS experts, were joined by Mia Vallo, National Geographic’s Senior Director, Marketing Analytics and Optimization, for practical implementation tips, an overview of the TMS vendor landscape, and lessons learned from real-world deployments.

Our presenters took the time to respond to all the questions that we didn’t have time to answer after the webinar, and we thought it would be worth sharing the entire Q&A below.

Q. What are some of the key differences between the tag management systems you worked with?

A. GTM is a very approachable tool while remaining very flexible and powerful at the same time. The interface allows for the execution of more complex tags but allows less technical users to see, understand, and adjust simpler tags as well. GTM does lack a little on the tag organization standpoint but it is an evolving tool and the introduction of folders and environments recently at least partially addresses this need.

Tealium and Ensighten have good tag organization built-in and their execution of spaces/environments (ie. one for Dev, Prod, QA, etc.) is robust. They also support incremental deployment of selected tags which is more difficult in GTM if you forgot to publish changes in different versions. Tealium also supports a “load only when necessary” mechanism via load rules which is particularly nice given that any extra code that doesn’t need to be downloaded and executed will only improve page performance and reduces possible points of interference with other things going on in-page.

Q. What are the pros/cons of using a paid solution like Tealium over GTM?

A. The only real pro or con in this case is price and the fact that a free product may not have as robust (or any) SLA. The real comparison, therefore, really comes down to:

  • The comparison of feature sets.
  • The type of user that will be managing the TMS and therefore the suitability of the tool to the job.
  • How much of an advantage or a disadvantage more heavily investing with a particular vendor actually is (ie. whether or not to use GTM given that you are using Google Analytics or other Google products). The advantages include tighter integration, and automatic updates to tags from the same vendor. A third-party TMS likely won’t apply necessary updates to tags which it does not own as quickly as to ones it does.

Q. Do you know anything about the announced Google Tag Manager 360?

The new tag manager is part of the bigger Google Analytics 360 Suite announcement last month. There isn’t that much to say about GTM 360 just yet. The biggest difference is that Google is now formally supporting GTM with a Service Level Agreement (SLA) with the same level of support that you would be getting if you were a Google Analytics Premium customer. We’re guessing and speculating that over the coming months and years there will probably be a divergence from a feature standpoint between the regular GTM and GTM 360. Potentially some of the features that paid tag managers have that GTM does now may start appearing in GTM 360 before they do in the regular GTM.

Q. What are some reasons to use more than one TMS platform?

A. Here are some reasons we’ve come across in the past:

  • This might be a temporary situation where a website is transitioning from one TMS to another and wants to verify tagging on the new TMS before completely abandoning the old one.
  • Third-party vendors using a TMS to deliver code to a target website in order to facilitate maintenance and control of proprietary code.
  • For certain analytics scenarios (although this may also be equally applicable to some marketing tags) it is necessary apply a local tracker for only the target site and a global roll-up tracker that, along with many other sites, feed data to the same global roll-up account. An example of this would be the incorporation of a newly acquired site by a larger company that wants traffic from the new site to be rolled into its global reporting.
  • Different internal teams use different tools because that’s the way it always has been and that’s the way it will always be.

Q. Would we lose data or record incorrect data during the transition from JavaScript code to TMS?

A: If approached correctly, no. It’s important that the push to production does two things simultaneously:

  • Disable the legacy Javascript tracker
  • Enable/include the TMS installation code

If either of these steps are missed then you will either double track every user interaction, or lose all tracking entirely. There will be a short period of time immediately after deployment in which some visitors are sending hits via the old method and others through the new TMS but no data should be lost. Staging your releases during low traffic times will further minimize any possible impact.

Q. For a site that’s built as a single page app, can data layers still be used? I hear different viewpoints – the developers will do work-arounds and not implement data layers, but also have problems because they did their own thing.

A. Yes, SPA’s definitely can and should leverage a data layer.  The key difference between an SPA and a standard web site from a TMS standpoint is that you can’t rely on page location changes to “reset” and therefore and that you have to something other than the built in Page Load trigger to fire your page views.  In lots of ways this makes implementation of a TMS for an SPA more similar to app tracking with a TMS.

The difficulties you mention are likely due to the fact that the developer has not accounted for the fact that since the page never reloads, the data layer is truly persistent and needs to be carefully maintained with each transition.  Contrast this with a web site where the data layer naturally resets with each page transition which helps to clear out old stale values that are not relevant to the current content.

View the webinar on-demand: Marketer’s Guide to Tag Management Systems

Tag Management

Vimeo Tracking with Google Tag Manager

Tracking how users are interacting with your embedded Vimeo videos is now easier than ever thanks to Google Tag Manager (GTM). After reading my colleague Nicky Yuen’s post about tracking user interaction with embedded YouTube videos, I felt inspired to write a similar post about Vimeo videos. So without further ado, here is the step … Read Full Post

Advanced Click Tracking with Dynamic Tag Manager

Overview Dynamic Tag Manager makes it simple to set attributes based on the element which is clicked. While this generally satisfies most click tracking needs, there comes a time when advanced tracking is required in order to pass specific data to conversion or traffic variables when deploying Adobe Analytics. In this article, we will share … Read Full Post

Migrating to Google Tag Manager like a Pro!

With all the talk around tag management and how it revolutionizes digital marketing, traffic management and analysis, it isn’t too difficult to conclude that moving away from onsite scripts to marketer friendly, less technical TMS’ is the right way to go. The challenge arrives when you already have a steady, traditional Google Analytics (or Universal … Read Full Post

10 Google Tag Manager Questions That We Get Asked Most Often

Tag Management Systems (TMS)

We explored the business and the technical considerations and benefits of implementing a Tag Management System (TMS) in a webinar that you can watch on-demand as well as in the blog post that answered the great questions that the webinar attendees left for us. Not surprisingly, many of the questions were about Google Tag Manager, … Read Full Post

Marketer’s Guide to Tag Management Systems: Webinar Q&A

Tag Management Systems (TMS)

By now, the use of a tag management system (TMS) is widely considered a best practice. And yet, research shows that there are still many organizations that are still not taking advantage of the time savings, quality assurance, and optimization benefits of this tool. Our most recent webinar explored the business and technical considerations and benefits … Read Full Post

Benchmark Your Marketing Analytics Maturity

See how your marketing analytics performs against thousands of organizations. (Approx. 5 minutes).