sanderheilbron / vimeo.ga.js Goto Github PK

Followed the multiple tutorials proposed in the readme, without a problem. However, when I press play I get two errors: What could be causing them? Thanks.

[Error] TypeError: undefined is not an object (evaluating 'vimeoGAJS.eventMarker[iframeId].videoPlayed')
    onMessageReceived (vimeo.ga.js:88)
[Error] TypeError: undefined is not an object (evaluating 'vimeoGAJS.eventMarker[iframeId].timePercentComplete = Math.round((data.percent) * 100)')
    onPlayProgress (vimeo.ga.js:159)
    onMessageReceived (vimeo.ga.js:77)

An example of my vimeo iframes

<iframe id="vimeo-player-1" class="media-vimeo-player google-analytics-vimeo-processed" data-progress="true" data-seek="true" data-bounce="true" width="640" height="360" title="Title of Video" src="https://player.vimeo.com/video/xxx?api=1&amp;player_id=vimeo-player-1" frameborder="0" allowfullscreen="">Title of Video</iframe>

My javascript is exactly the same as what's in MASTER here, with one change.
On line 19 I changed

vimeoGAJS.iframes = $('iframe');

to read

vimeoGAJS.iframes = $('iframe[class*="vimeo"]');

because it was conflicting with google adwords remarketing.

This is a drupal 7 site using the https://www.drupal.org/project/google_analytics_vimeo module, if that helps.

Is anyone else having any issues?

Thank you!

I was testing this on a page with some other embedded content in iframes (Bandcamp & Soundcloud) and the js wasn't working. Adding a vimeo class to the specific vimeo iframes then changing the vimeoGAJS.iframes variable to look for iframe.vimeo fixes the problem.

Hi, just implemented this and ran a few tests and am getting errors.

If you get a chance, can you take a look and let me know?

Thanks!

• Marcus

http://screencast.com/t/yM8sSDn81I

vimeo.ga.min.js?ver=1.0.0:8 Uncaught TypeError: Cannot read property 'split' of undefinedvimeoGAJS.getLabel @ vimeo.ga.min.js?ver=1.0.0:8vimeoGAJS.sendEvent @ vimeo.ga.min.js?ver=1.0.0:8vimeoGAJS.onPause @ vimeo.ga.min.js?ver=1.0.0:8vimeoGAJS.onMessageReceived @ vimeo.ga.min.js?ver=1.0.0:8

We're trying to implement this script to track a video on our site, but are having some issues. We are using Universal Analytics, implemented through Yoast's Analytics plugin for Wordpress. However, when we run a check on the script on our video page, we're seeing asynchronous GA calls (see screenshot). Additionally, it is pulling in a UA other than ours (UA-76641-35, which looks like it's within the main vimeo.ga.js code). We're also seeing the error "Uncaught TypeError: undefined is not a function". Any guidance on these issues is much appreciated!

Thanks!

Hi, I'm trying to track both Vimeo and YouTube videos in a section of our website, and so far, I've used
http://www.optimizesmart.com/youtube-video-tracking-via-google-tag-manager/ for YouTube, which has yielded results, and following your advice from #8, I've added a set for Vimeo....they're all in the same container....and while the YouTube one has results, the Vimeo one doesn't. Are they conflicting with each other?

Thanks!

• Irene

Hi,

We noticed a discrepancy between plays on Vimeo and plays filtering into Google Analytics.

We've used Google Tag Manager to deploy the event tracking.

When I drilled down we see 100+ pageviews for the video page on IE but no events recorded.

I tested the tracking using the Google Tag Manager preview and the Vimeo events fired and were pushed into Google Analytics. I then turned off the preview and played the video: no events appeared in Google Analytics.

The video I'm using is on https://www.guidelinesinpractice.co.uk/respiratory/animation-on-braltus174-tiotropium-bromide-zonda174/453176.article.

The GTM preview container is here: https://tagmanager.google.com/scc/?uiv2&id=GTM-NF74WK&gtm_preview=env-44&gtm_debug=x&gtm_env_name=Draft+Environment+43+2016-07-25+03:52:01

Can anyone see where the tracking is falling over?

Helen

I have deployed the vimeo.ga.js tracking code through GTM on the gtm.dom event. Jquery 1.12.4 is included in the head of the wordpress site. I have exposed the API and updated iframe embed with the required parameters.

However, I'm not tracking any events at all when clicking the video's play button.

Here is preview of the GTM container

Any help would be appreciated!

I uncommented the console messages in the script for debugging and Tracker is Missing is showing up. What does this indicate? Thanks!

Beginning June 13, 2015 Analytics is no longer reporting any video event data. Since discovering this, I've updated to the latest vimeo.ga.js version, updated the HTML with the latest description in the docs, confirmed that the videos still work and play and pause etc, confirmed that Analytics is reporting pageviews traffic for the page containing the videos, and confirmed that the Vimeo account is active and that video views are being reported in the Vimeo stats. I can find no reason for the events no longer being reported in Analytics. Has anyone else experienced this? Any thoughts on debugging this?

I'm trying to use this on a site with pages loading in via Ajax, but the outer wrapper staying the same. Is it possible to re-initialize this when a page loads (that has Vimeo videos on it)?

I am having a little trouble implementing it to my site. I am using GTM 2.0:

1. downloaded and uploaded to my site: www.mysite.com/vimeo.ga.js
2. edited the video iframe code and <script src="//www.mediamath.com/vimeo.ga.js"></script>
3. Followed the steps from #8 to create Macros (Variables in GTM 2.0)
4. Created an custom event to equal Vimeo.
5. Created a tag for Universal Analytics Event to include all the macros (variables) created in step 4 and set to fire when event equals Vimeo.
   When I did the debugging, the tag was not firing.
   I also tried to implement the vimeo.ga.js code using an custom html tag described in #8 . Through debugging, I did not see any data passing through data layer, everything was undefined.

The video is also embedded within a player that pops up when clicking on it. onclick="initializePopupVideo2()

Please take a look at this and thank you in advance for your help.

You have a great script and I really want to get it to work. But right now I can't get any of the interactions with the video passed into the dataLayer. The script is populating the dataLayer with the JS variables but not with event information.

Below is what I see in the Tag Assistant extension:
Parsed Data Layer
event: "Vimeo"
eventCategory: "Vimeo"
eventAction: e
eventLabel: n
eventValue: undefined
eventNonInteraction: true

Below is the iFrame contents:

src="//player.vimeo.com/video/100905776" width="200" height="150" frameborder="0" id="vimeo-player" data-progress="true" data-seek="true" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""


Any ideas? I would really appreciate the help to get this to work.

I am seeing the following errors when running this:
Cannot read property 'videoPlayed' of undefined
Cannot set property 'timePercentComplete' of undefined

the iframe is set up as

Any assistance would be greatly appreciated.

Setting nonInteraction explicitly is inappropriate for many types of content, especially for completion of 75% or 100% of a video — that's not a bounce if that's the desired action.

It would be great to see an option for what counts as interaction.

Do I include the following example options within the ga js block? I just don't seem to get anything loading if I don't but if I do all the events trigger including "Paused video" even though I haven't paused which is kind of weird.

ga('send', 'event', 'Vimeo', 'Started video', 'https://player.vimeo.com/video/22439234', undefined, {'nonInteraction': 1});
ga('send', 'event', 'Vimeo', 'Paused video', 'https://player.vimeo.com/video/22439234', undefined, {'nonInteraction': 1});
ga('send', 'event', 'Vimeo', 'Resumed video', 'https://player.vimeo.com/video/22439234', undefined, {'nonInteraction': 1});
ga('send', 'event', 'Vimeo', 'Completed video', 'https://player.vimeo.com/video/22439234', undefined, {'nonInteraction': 1});
ga('send', 'event', 'Vimeo', 'Skipped video forward or backward', 'https://player.vimeo.com/video/22439234', undefined, {'nonInteraction': 1});

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'XXXXXX', 'auto');
  ga('send', 'pageview');

The above options goes here?

</script>

Any way via the API and this script to get the title of the video?

When loading content via ajax the script doesn't work - 'iframe is not available'. It would be good if the code could be initialized via function call vs the IIFE

I am unable to receive progress events using the stock setup as described on your site - I've narrowed it down to the following in the onPlayProgress function:

if (!iframeEl.data('progress')) {
      return;
    }

I have confirmed I am receiving progress information from the data variable.

I don't see anywhere in the Vimeo docs or in your code that indicates when that iframe would have a progress data attribute.

Thanks - and great work!

Hello, trying to get your amazing script to work on my page but have failed unfortunately. Would you please be able to take a look and let me know where I am going wrong?

http://beta.to-jo.co.uk

Thank you in advance!

Cheers,

Tom

Hi there

I have your excellent code working on a couple of sites, but I've just tried to implement it on a new site, and it fails each time. It seems to break down inside the onMessageReceived(e) function. If I alert(e.data) on sites where this is working successfully it gives me the following

However on this new site,it gives me

which is clearly not of the required structure, causing the tracking to fail.

I understand that this is unlikely to be an issue with the script itself. But I'm stumped. Do you have any idea at all what might be causing this. The code that embeds the video is:

Thanks

Garry

with v0.5.1

http://www.aptare.com/demo_isilon_analytics -> press play and see error in console

I'm using jQ 1.7.2

Hello. I came across your repository when trying to see how to track Vimeo video events. I've uploaded both vimeo.ga.js and vimeo.ga.min.js and followed the HTML instructions. I just need to know where I should put the .gaq.push code. Should it be within the iframe?
Thanks in advance for your hard work.
SAm

Caution provisional headers are shown in chrome debugger when I add vimeo.ga.min.js

Hi,

I created a custom HTML and loaded vimeo.ga.js on a page that contains one vimeo video that loads in gtm.dom

An universal analytics event tag is also created with firing rule "event equals Vimeo"

Next to that all the necessary macro's used are created as described in issue #8

In the tag manager debug console i see that custom HTML tag (vimeo.ga.js) loads fine. But when starting/stopping the video i do not see any GTM events appear in the console. Therefor the UA event tag also doesn't trigger.

I'm not using vimeo.ga.min.js at all. Should i load this somewhere? I'm also not loading anything on the pagepage itsself. All is done via GTM.

I used several similar scripts like youtube tracking and scroll depth tracking.
Any idea what i'm doing wrong?

Thanks in advance!

I'm using Universal Analytics and this is not working. I'm not receiving any errors. Manually created test events are tracking properly in GA. I'm using the code provided in the example. Am I missing something?

Hi. This script looks perfect, thanks so much for posting it. I can't get it to work using GTM - can you talk about how to include the plugin via a custom HTML tag? What goes in the HTML tag? Thanks again.

When added globally to a site that may or may not have Vimeo videos on every page, there is an error:

TypeError: 'undefined' is not an object (evaluating 'f.attr("src").split')

First, let me say THANK YOU for creating this whole process. You have certainly made my work much easier as someone who is new to GTM and does not have much coding experience.

I am having one small issue. When a site visitor goes to the page where a video resides, all four data layer events fire (Start, Pause, Resume, Complete) at once. Then if someone actually clicks to complete these interactions it counts again. This will obviously inflate my numbers in Google Analytics.

Here is an example of what is dropped within a post/page:

"<script>dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Started video', 'eventLabel': 'https://player.vimeo.com/video/145327406', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Paused video', 'eventLabel': 'https://player.vimeo.com/video/145327406', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Resumed video', 'eventLabel': 'https://player.vimeo.com/video/145327406', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Completed video', 'eventLabel': 'https://player.vimeo.com/video/145327406', 'eventValue': undefined, 'eventNonInteraction': true});
</script>"

If there is anything I am missing/doing wrong, I would surely appreciate the guidance!
Thanks,
Andrea

Trying to implement vimeo.ga.js with Google Tag Manager on this page:

https://www.georgefox.edu/about/index.html

I'm getting console errors like these:

Uncaught TypeError: Cannot read property 'videoPlayed' of undefined
Uncaught TypeError: Cannot set property 'timePercentComplete' of undefined
Uncaught TypeError: Cannot read property 'timePercentComplete' of undefined

Not sure what I'm missing in my implementation. New to GitHub and Javascript, any help would be appreciated!

How do you use the tracking when you have multiple vimeo videos on one page?

Thx for your plugin. I like the work 👍

You check for the id #vimeo-player. Is there a reason why you do this? I mean wouldn't it be nice, if an id or even better a class is customizable as a parameter? Furthermore, with the id solution it's only possible to implement one single video per page.

Cheers
Phil

Is it possible to track more than one vimeo video on a single page ?

I tried to add my events :
ga('send' ...) under each video, but if i read only the first one, i get many events into analytics.

I would associate events with a specific iframe ? Is it possible ?

Thks

Is there a way to make the video image accessible?

On the demo page I can't tab through to select the image, so I can imagine this would also be a problem on screen readers. With the current approach, all of the easily accessible Vimeo buttons are made inaccessible with this plugin until clicking the video image.

Is there no way to make this work nicely with screen readers? Or am I missing something?

Is ther a way to replace the url in an event tracker based on the iframe on the page instead of hardcoding it? We have a site that plays a different video on each page and I'd like to be able to track each video.

ie: ga('send', 'event', 'Vimeo', 'Played video: 25%', 'http://player.vimeo.com/video/22439234', undefined, {'nonInteraction': 1});

would be replaced with something like:
ga('send', 'event', 'Vimeo', 'Played video: 25%', videoURL, undefined, {'nonInteraction': 1});

Is there a way to dynamically add in the ?api=1&player_id=vimeo-player-1 or ?api=1&player_id=vimeo-player-2 if it does not exist on a given page?

Also, is there a way to dynamically add in the other values in the iframe code like: data-progress="true" data-seek="true" data-bounce="true" and id="vimeo-player-1" or id="vimeo-player-2"

Thanks and I look forward to your reply.

I get this error when pressing play on a vimeo video where I have the script installed.

vimeo.ga.js:111 Uncaught TypeError: Cannot read property 'split' of undefined
at Object.getLabel (vimeo.ga.js:111)
at Object.sendEvent (vimeo.ga.js:188)
at onMessageReceived (vimeo.ga.js:89)

My video is like this:

<div class="flex-video widescreen vimeo">
        <iframe src="https://player.vimeo.com/video/214521274?title=0&byline=0&portrait=0&api=1&player_id=vimeo-player-1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen data-progress="true" data-seek="true" data-bounce="true"></iframe><br/>
        <p>Girl Boxer</p>
</div>

Hi,

I tried the code on my website which features 5 vimeo videos on a single page, each one in an iframe.
The console returns me this:
undefined is not an object (evaluating 'e.attr("src").split')
for line 57: var t = e.attr("src").split("?")[0],

Datas don't show in GA.

Do you have any ideas how to get through this?
I'm really new to js.

Thanks a lot,

Paul

Hey Sander,

Nice work on this script... I noticed that the script doesn't seem to pass the progress events.

From what I can tell the timePercentComplete is updated correctly on line 159, but the Three if statements don't seem to fire when the timePercentComplete is great than 24/49/74

Any thoughts?

I get the following error on page load when trying to use this.

Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '//player.vimeo.com/video/12345678' in a call to 'postMessage'

Would it be possible to get step-by-step instructions for implementing this with Google Tag Manager? eg, what tags/macros/rules must be created?

When using Universal Analytics, the main tracking script allows you to customize the global object name which is 'ga' by default.

https://developers.google.com/analytics/devguides/collection/analyticsjs/renaming-the-ga-object

If you are using a custom global object name for universal analytics then you will need to update the vimeo.ga.js script to use this custom name instead of the default 'ga':

For v 0.6:

• In line 37 change 'typeof ga' to 'typeof your_custom_name'
• In line 196 change 'ga' to your_custom_name

I have created a test page in my localhost and included vimeo.ga.js and video code that given in github page.

But I am not able to see any Google Analytics event is triggering. I tried to check using Google chrome Event Tracking Tracker Extension.

Please Help.

Hello, I am desperately trying to make this JS work but I am not a developer (though learning to code).

Here is the error I get in the console when loading the JS script and a vimeo video in an iframe. As far as I can see, I did everything by the book otherwise:

Uncaught TypeError: undefined is not a function vimeo.ga.min.js:8
(anonymous function) vimeo.ga.min.js:8

Would you have any pointers as to what could be the root cause at play?

Many thanks!

When I look at real-time analytics, all events happen when the page loads. Started video, Paused video, Completed video etc. all fire when I refresh the page. Any idea what I'm doing wrong? Here is my code: http://www.davispreview.com/feed-templates/dungarvin/videotest.htm

We have a page with multiple videos: https://www.nintex.com/company/events-webinars/events/inspirex

It appears the tracking only works on the first video view. If you go to open another video, we get the following error:
"error: Uncaught TypeError: Cannot read property 'postMessage' of null"

Ideas?