Tracking the Google ‘Save To Drive’ Button in Google Analytics

Google unveiled a Google ‘Save to Drive’ button for website publishers that allows their users to download files directly into their Google Drive accounts. Although a ‘Save to Drive’ Chrome extension has been around for a while now, this solution is great because not every person is a plugin/extension junkie like some of us.

This caught my attention because at IO we publish whitepapers that we want people to download. This ‘Save to Drive’ button sounded neat, but honestly I had to ask myself… would people even use this feature??

I don’t know. So let’s track it.

I love tracking all sorts of things in Google Analytics. When I looked at the documentation to implement the ‘Save to Drive’ button, however, I realized that there is currently no supported callback function in the API.  Meaning, this solution doesn’t give us an explicit/official way to say “Perform this GA event tracking after the button loads”.

Now, I probably should have stopped there and reminded myself that this is a new feature. And that maybe after some time they’ll update the API and add a supported callback function and there would be no need to devote so much time into hacking up some code (after a lot of trial and error) and I should just be patient for a bit.

But I want to track these downloads now. 🙂

So, I began code hacking. And now I want to share it with you.

What exactly are we tracking?

Because of the lack of an official tracking method in the API, we have some serious limitations to deal with. One is that we’re NOT able to track the actual confirmed download of a file.  We’re just tracking the click of the button. This is the best I can do.

Also, the rendered ‘Save to Drive’ button can change at any point in the future, potentially breaking my JavaScript solutions. Just warning you.

Teenage MutationObserver Turtles

For you technical folks: The ‘Save to Drive’ button documentation has a few different implementations, all of which add a bit of uncertainty of knowing when the iframe button will load. We needed a smart way to listen to changes in the DOM to see when the iframe is created and THEN attach our jQuery handlers. This is where the MutationObserver API comes in. Also, because we’re dealing with a cross-domain iframe, the browser won’t allow us to attach click handlers for anything inside the iframe. For this, we have to use a trick to detect a hover over the area of the iframe and then a blur once focus is lost in our document. You can learn more about that here.

Here’s the code

‘Save to Drive’ async load + my custom code:

<div class="g-savetodrive"
 data-src="//example.com/path/to/myfile.pdf"
 data-filename="My Statement.pdf"
 data-sitename="My Company Name">
</div>
<script>
 window.___gcfg = {
 lang: 'en-US'
 };
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>
<script>
//Select target div for SaveToDrive
var target = document.querySelector("body");
//Set to false now. When SaveToDrive iframe is found, this will turn to true to help escape the forEach
var gIframeFound = false;
//This logic will handle whether the iframe is being hovered over, so we can track a blur against it
var overiFrame = -1;
//Create an observer instance
var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
 if(gIframeFound==true) {
 //Iframe already found. Get out of this forEach
 return false;
 }
 //Is this node an iframe?
 if(mutation.target.nodeName == "IFRAME") {
 //Does this iframe have a parent of a SaveToDrive div?
 if(jQuery(mutation.target).parent().attr('id').match(/savetodrive/)) {
 jQuery(mutation.target).hover( function() {
 overiFrame = jQuery(this).closest('div[id*=savetodrive]').attr('id');
 }, function() {
 overiFrame = -1
 });
 //Track a click in the SaveToDrive iframe
 jQuery(window).blur( function() {
 if( overiFrame != -1 ) {
 //Send SaveToDrive click to GA via ga.js
 _gaq.push(['_trackEvent','GoogleSaveToDrive','Click','My Statement.pdf']);
 //Send SaveToDrive click to GA via analytics.js (Universal Analytics)
 ga('send', 'event', 'GoogleSaveToDrive', 'Click', 'My Statement.pdf');
 }
 });
 gIframeFound = true;
 }
 }
 });
});
//configuration of the observer
var config = { attributes: true, childList: true, characterData: true, subtree: true };
//Observe the target node/div
observer.observe(target,config);
</script>

Here’s an example of the button with GA tracking for the SEOmoz Beginner’s Guide to SEO:



There should be a better way

Again, not really ideal that we have to hack a solution just to get clicks on the button itself. And although I know my way around JavaScript, I’m by no means a JS expert.  If anybody can look at this code and offer some improvements, please do so!

That being said, I hope this gives you a little fun with tracking this new button. Enjoy!

Posted in Uncategorized