Custom Outbound Link Tracking With Google Analytics

Oct
10

I have been using Google Analytics for years, but have never attempted to extend its functionality to track outbound clicks. Lately I decided to add that functionality, and here is how I did it.

The default JavaScript code declares a variable named _gaq. If yours is named differently, adjust the following code accordingly.

First, you need to define the following trackOutboundLink function:

<script type="text/javascript">
function trackOutboundLink(link, category) {
   try {
      _gaq.push(['_trackEvent', category, link.href]);
      // redirect once click event is sent to Google
      _gaq.push(function() { document.location.href = link.href });
   } catch(e){}
   return false;
}
</script>

Then in the links that you would like to track, set the onClick attribute as follows:

<a href="example.com" onClick="return trackOutboundLink(this, 'Outbound Links')">Link</a>

You will then begin to see data accumulating in Google Analytics under Content->Events->Outbound Links.

Of course, you can change the "Outbound Links" in the onClick attribute to whatever you wish, and it will be put under the corresponding event in Google Analytics.

Cross-browser One Click File Upload

Aug
14

I wanted to make a simple file uploader where I could click one button, choose a file, and it would begin to upload. The trick is that I wanted to avoid the ugly "Choose File" button and use a custom button. After toying with a few different methods, I figured out that the following is the best way to go about this, as it works on IE 7+ and all other major browsers. The <label> tag can be styled as a button to fit in to any application. Without further ado, here it is.

<form>
    <label for="input">Click Me to Upload</label>
    <input type="file" id="input" style="display: none" onchange="this.parentNode.submit()"/>
</form>

Get a User's Timezone using JavaScript/jQuery and PHP

Apr
11

I wrote a function using jQuery and PHP that I have tested.

On the PHP page where you are want to have the timezone as a variable, have this snippet of code somewhere near the top of the page:

<?php    
   session_start();
   $timezone = $_SESSION['time'];
?>

This will read the session variable "time", which we are now about to create.

On the same page, in the <head>, you need to first of all include jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

Also in the <head>, below the jQuery, paste this:

<script type="text/javascript">
   $(function() {
      if (0 == "<?=$timezone?>".length) {
         var visitortime = new Date();
         var visitortimezone = "GMT " + -visitortime.getTimezoneOffset() / 60;
         $.ajax({
            type: "GET",
            url: "http://domain.com/timezone.php", // Change this!
            data: 'time='+ visitortimezone,
            success: function(){
               location.reload();
            }
         });
      }
   });
</script>

You may or may not have noticed, but you need to change the url to your actual domain.

One last thing. You are probably wondering what the heck timezone.php is. Well, it is simply this: (create a new file called **timezone.php** and point to it with the above url)

<?php
   session_start();
   $_SESSION['time'] = $_GET['time'];
?>

If this works correctly, it will first load the page, execute the JavaScript, and reload the page. You will then be able to read the $timezone variable and use it to your pleasure! It returns the current UTC/GMT time zone offset (GMT -7) or whatever timezone you are in.