How to log drupal/zen download clicks to adwords as conversion info.

Here's an interesting problem I encountered the other day...say you're promoting a downloadable product which offers a free demo version.

If you're spending money on adwords and sending people to a landing page, you can track how many people hit the page, and you can track the number of downloads within Drupal itself using the "download count" module (see a couple of posts ago), but wouldn't it be nice if you could get conversion data right there in Adwords so you can balance your spend at source, and more importantly, see which of your ad-groups are actually making the conversions to help you segment your tarket market?

Here's how: May the Drupal gods forgive me if I've done anything out of line here - my metric is "does it work reliably" and for the most part this does seem to.

So:

This assumes your download is on a node page and is the only download for that node. If you want to do multiple downloads per page and record each file download as a separate conversions you'd need to select the right one when the javascript gets fired which would involve getting jiggy with the js/css and I suspect if you can do that you don't really need this guide...so make it one download per node for now and then maybe expand from there once it works ;).

Also this assumes you are using a zen-based theme. It may work with other systems but I have no experience of that. Essentially as long as you can uniquely reference the node you want via CSS there shouldn't be a problem..but as yet I don't know if zen is the only one to do that.

Finally - this doesn't seem to work on chrome (tested windows+linux) but seems fine in firefox (linux+win) as well as IE7. So whilst not 100% accurate it should give you a reasonable idea and using analytics you can calculate the margin for error based on how many chrome-based visitors you have.

The key thing here is finding the page class name to reference only the node we want which can be found in the tag. This is so that this script only fires on the node page it's supposed to. So if I was looking to reference this page/node only, here's the body tag:

<body class="not-front logged-in node-type-blog one-sidebar sidebar-right page-content-how-log-drupalzen-download-clicks-adwords-conversion-info section-content">

Drupal/zen uses several classnames for many of the elements so you can refer to them in different ways. The classname we want to use here would be the one highlighted in yellow. We're going to insert that into the script below, then intercept the click event on any file attachments for that node using javascript.

Add a block in the closure section right at the bottom with PHP as the input format (requires php filter module enabled). It can be another input format but it needs to allow pure text input - i.e. doesn't add line-breaks or convert urls like the default input format otherwise the script will break.

Into the block add the following, replacing the yellow text with the classname from your node page:

<script language="javascript">
$('.page-content-how-log-drupalzen-download-clicks-adwords-conversion-info #attachments a').click( function() {
document.getElementById('gcf').src = '/conv.php';
window.confirm('You are about to download the demo file. This is a large file, just over 1gb.\n\nPlease make sure you are not downloading this on a connection with a limited bandwidth allowance.\n\nClick OK to start the download.')
})
</script>

<iframe id=gcf src="" width=100 height=20 border=0 frameborder=0 framespacing=0></iframe>

Finally add a text file with a .php extension in your drupal root folder. this is going to hold the script which actually does the tracking of the conversion. If your site is www.foo.com the file should be viewable as www.foo.com/conv.php

conv.php should look roughly like this:

<html>
<body>
<-- insert your adwords or other tracking code here -->
</body>
</html>

It's going to be called into an iframe at the bottom of the page. The script basically intercepts the "click()" function on attachments on node pages which match the CSS page class we pasted in (hopefully just the one).

If this click matches the criteria the script sets the src attribute of the iframe we added to the closure block to be conv.php...whcih is where our tracking/conversion script gets fired.

The clincher here is the popup/yes/no/cancel box. The act of clicking on a link means the user is already leaving the page. there isn't time to fire and *complete* the tracking/conversion function before the user leaves the page, effectively ending the script.

By adding the popup/confirm box you allow the script time to execute in the background. Even if the user only has to click ok (e.g. with an alert('bleh') box, it's enough time to execute your tracking functionality.

I've tested this using adwords and statto but really you could use anything - I've got a feeling we're going to expand this idea since it has all sorts of possibilities.

I've added the scripts in a little file as an attachment to this post so you can see it in action. The popup which says "this is from inside the frame" would normally not be a popup - just a silent conversion-tracking script. It's just in place here to demo firing javascript from the iframe.

Partial credit for the solution goes to Steev from Initisix.

enjoy xD