Important consideration when using Google Analytics

If you are only interested in individual, distinct events - such as being able to see the total number of visitors that watched a video, or the total number of visitors that visited a particular page - then you can use our standard Google Analytics-integration “out of the box”. Once you have provided the player with the id of the account to send the data to (see How do I send data to Google Analytics?) - and you then embed a video on a page within your site (which will have Google Analytics-supplied tracking code on it) - you will see those events be logged in your Google Analytics dashboard.

However what this won’t do is let you track that visitor’s journey though your site ie the sequence of pages they went through before and after watching the video.

If it is important for you to know the visitor’s journey (perhaps you are monitoring a flow, such as with a funnel), then please read the rest of this guide to learn about a bit of extra code you will need to include on your page, alongside Google’s standard tracking code.

The problem

If you have used Google Analytics before, you will know that it tracks a user’s journey through your site by using a cookie. This cookie is a small file that remembers who they are (anonymously). It is set the first time they visit a page on your site that includes the Google Analytics tracking code (usually a file called analytics.js).

However any content served from a different domain has no access to that cookie. Our videos are served from a different domain (vidbeo.com, as opposed to your-company.com).

Therefore the video player has no access to that cookie. That results in Google Analytics setting a new one. It treats a request for a page/video from on our domain (despite it being embedded on your domain) as a new visitor.

So let’s say a user visits a page within your site called /product/one. You have embedded a video (using the normal embed code) on that page of ‘Product One’. The cookie set for the user who clicked on /product/one will be different to the one set for the user when they watch the video ‘Product One’.

The result of this is that the video is treated as an entry point to your site. If someone watches a video, then clicks on a link - for example in a call-to-action - the first link will be treated as the start of their journey, as that is where that cookie started. Normally this is not the behaviour you want. You want the user’s journey before they came across the video logged too, to get the complete picture.

The solution (part 1)

Google have thought of this and provided a way to do it. They go into great detail within their developer page if you want to find out more (https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain: scroll down to ‘Tracking Across Iframes’).

However we have written a small function (based on Google’s own one - we have simply added some more attributes) that takes care of the work for you. Assuming you are not using the responsive version of our embed code (as this code sets a fixed width and height), if you include this function on your page:

// This function is needed because Google Analytics sets a cookie. That cookie can not be
// accessed from a different domain. However your site's domain - and our video's
// domain - will be different. Therefore a way of passing the cookie between them is
// needed in order to maintain tracking of that same user. This function does that.
// See https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain
var linker;
function addiFrame(divId, url, opt_hash) {
    return function(tracker) {
        window.linker = window.linker || new window.gaplugins.Linker(tracker);
        var iFrame = document.createElement('iFrame');
        iFrame.id = divId;
        iFrame.width = 640;
        iFrame.height = 360;
        iFrame.src = window.linker.decorate(url, opt_hash);
        iFrame.frameBorder = 0;
        iFrame.scrolling = "no";
        iFrame.setAttribute('allowFullScreen', '');
        
        document.getElementById(divId).appendChild(iFrame);
    };
}

… that function will take care of passing the cookie from your domain to ours. That means that the same user can be tracked as they move from your domain to ours, and back again.

Note: You will probably need to change some parts of that function based on your needs. For example you can see that we set the width as 640 and the height as 360 (these are common values). However you might like to edit those numbers - or remove those two lines entirely if your iframe is using the responsive embed code.

The solution (part 2)

Now that function has been included on your page, you will need to use it. That means changing how each video is embedded on the page - else they will load twice:

1) Replace the current iframe with an empty div tag. That will act as a placeholder. The function above is in charge of actually adding the iframe to the page - into that div tag - and, in so doing, it will pass the cookie to it. That’s the key.

2) Tell the function the details of the iframe it needs to add to the page.

This sounds complicated but the transformation goes like this - you will need to replace ‘videoid’ with the real id of your video, of course:

BEFORE

<iframe id="vp_iframe_videoid" width="640" height="360" src="https://vidbeo.com/e/videoid" frameborder="0" scrolling="no" allowfullscreen=""></iframe>

… that’s simply the code you will have copied directly from our admin panel (the one that results in the GA cookie not being passed)

AFTER

<div id="vp_iframe_videoid"></div>

… that’s (1) - the empty div tag that acts as the placeholder for the iframe - that needs to go where the iframe previously appeared on your page

<script>ga(addiFrame('vp_iframe_videoid', 'https://vidbeo.com/e/videoid'));</script>

… that’s (2) - the call to the function, that actually makes the iframe appear on the page

Result

When your page is now loaded in a browser, the function will be called as soon as Google Analytics is ready. That will see the id and src of the iframe that it should build - and it will put it in place of the div tag. So you will end up with an iframe that should be exactly the same as the one you copied from our admin panel … but with one crucial difference - which was the reason for doing it like this - the src URL has gained a “_ga” parameter. This will look something like this:

<iframe id="vp_iframe_videoid" width="640" height="360" src="https://vidbeo.com/e/videoid?_ga=1.115957647.823870597.12345678" frameborder="0" scrolling="no" allowfullscreen=""></iframe>

… and by doing that, the unique id Google has assigned this particular visitor has now been passed to our player. That means any events it sends will be recorded as having been done by that same visitor - not a new one.

If you have any questions, please don’t hesitate to email support@vidbeo.com.

Go back to the questions about analytics