Google Analytics – Why You Should Replace IDs in URLs

Google Analytics is brilliant at tracking things like Page Views for a website. It logs the URL and then keeps a count of how may times that URL is requested. Great, right? Not always.

There’s a problem. Dynamic sites that use IDs in their URLs generate a lot of different URLs. A typical example might be a site being made up of list and details screens, so the URL for a list screen might end in /List/. For a details page there’s probably one template with the data changing dynamically and the ID for that item is probably in the URL, something like /Details/123 or /Details?id=123.

This means that Google Analytics sees every visit to a different item’s details as a different screen. This is ideal for some data analysis, like seeing which item is viewed most but not so great when you want to look at something like the performance of that template. Having hundreds of different URLs makes it impossible to analyse the template as a single screen.

Good news. It’s quite easy to set up another view to show the aggregated data using filters.

  1. Go to the Admin area and create a new view.
  2. Find Filters and add a new filter.
  3. Add a Filter Name.
  4. Select a Filter Type of Custom.
  5. Use the Search and Replace option.
  6. Select a Filter Field of Request URI.
  7. The Search String needs to match the ID. You can use regex to match any patterns so if you know your ID is 3-5 digits long you can use [0-9]{3,5}. If it varies you could use a wildcard, like id=*.
  8. Add a Replace String. I use something to represent what’s being replaced, like ID. This gives me a URL like /Details/ID or /Details?id=ID. If you’ve used a wildcard in the Search String with part of the URL you can replace this too, like id=ID.

Here’s an example of replacing a GUID in the URL:

Google Analytics Filtering screenshotThe full regex needed is:

[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}

An added bonus. When you look at your reports in Google Analytics you’ll no longer see URLs like /Details/aace7226-0576-4a0f-9b39-bb549a53ee11 but just /Details/GUID. Much easier to understand, especially if your URL contains several IDs or GUIDs.

Hope this helps you analyse your screens, templates or UIs rather than just the data requested.

Can I Track It?

I’m not sure what proportion of websites include Google Analytics tracking scripts. I’d be guessing. What I do know is that every site I’ve worked on in the last decade or so has made use of it.

The part I feel more confident about guessing is that only a very small minority use anything beyond the most basic out of the box usage. This was true of me until only a few months ago when I was asked if we could track something other than a simple page load.

Tracking Events

It seems like a big thing initially but is actually quite straightforward. You just use any JavaScript event, like a click or change, and send some details to identify it off to Google, all asynchronously. Then it shows up in your reporting. Analytics for Web Event Tracking

This almost becomes a consideration in everything you do in JavaScript. Every time a user takes any kind of action in the UI ask if it’s worth tracking. It can be incredibly useful for a new site or new feature to understand exactly how things are being used in the wild. I’d say if in doubt, track it, analyse it, then once you know how it works and you’re happy with the result stop tracking.

What I Learned in 2015

I thought I’d do another quick run-through of what I’ve picked up this year. It feels good to show myself that I’m still learning at a healthy pace.

SVG

I’ve started using SVG more, creating some simple charts and building dynamic graphics for use with Google Maps. I made markers or pins, which have colours and characters set dynamically according to data. I think I’ve finally got my head around the whole viewBox, which took me a while. CSS Tricks provided me with some very useful SVG tutorials and introduced me to the work of Sara Soueidan.

Angular.js

I’ve been tinkering with Angular for a while but have really got into using it day-to-day this year. I found it hard at first because it’s so different to using native JavaScript or jQuery to manipulate the DOM. In Angular you basically set conditions in the HTML, e.g. show this when the data is that, and then to make things happen you just change the data. The data changes and the UI updates. It means you’re not making data changes and UI changes – just change the data and Angular looks after the UI. Once you’ve got that it’s actually a lot easier to manage than writing an app with jQuery.

React.js

I’ve done my first project using React. This is a very clever framework for updating the UI as quickly as possible. It checks what actually needs to change on screen and only updates the HTML nodes that require a change, making the UI very fast and, well, reactive. It’s based on building components which each have their own properties and state. The component or modular approach certainly feels like the way forward for building UIs.

Jekyll

I built the previous incarnation of this website using Jekyll. It’s a static site generator. It works in much the same way as any content management system with templates and a build process but spits out static HTML so it’s faster for the user. It took a lot of setting up on Windows and involved some scary new stuff for me, like Ruby, Python and using the command line. It is an amazing bit of software for building fast sites and very flexible. Definitely worth trying. I eventually moved away from it and back to WordPress as it was just easier to update – I can update from any device anywhere without having to have the complicated local set up. As my content is mainly just text, I didn’t feel the performance gains balanced out the usability for me as an author.

Markdown

Using Jekyll also introduced me to using markdown. It’s a quick way of writing HTML without having to use tags. It keeps the content clean and easy to read, whilst containing formatting. It kind of lets you write HTML without having to break your creative flow to think about formatting. It also enables non HTML savvy authors to publish formatted content easily.

New JavaScript Syntax – EcmaScript 6

I haven’t used it yet but started reading about ES6. There are a few good introductory articles, which show off some of the new features without getting too bogged down in the details. Here’s a good basic ES6 intro. It feels like a lot to learn but it becomes evident very quickly that we’ll be able to write less code and it’ll be easier to understand. Win win.

Google Analytics Event Tracking

I’ve used Google Analytics for years but have just discovered how to use event tracking. I can now track clicks on a particular UI element to see how it’s used, check pre-defined user preferences by reading data out of the browser’s localStorage, measure download numbers for PDF documents. It’s opening the doors to a lot of previously missing data with regards to user behaviour and can help me make better decisions on designing the user experience.

Responsive Web Design

I’ve made big strides forward this year with responsive design. I’m starting, late I know, to think about it in everything I do. It’s a lot more work but leads to much more usable UIs and often forces me to keep the design simpler than I would otherwise, which is probably a good thing.

Bootstrap

I’ve actively avoided Bootstrap for the last few years. I always had 2 major concerns with it: 1) that my sites would end up looking the same as everyone else’s and 2) that I was loading up a hefty framework and then only using a fraction of it, which would be very wasteful.

A colleague reintroduced me to it and I was delighted to find that it’s now possible to create customised builds so you can choose the parts you want to include (no waste) and even set colour schemes, default padding, etc. in the build, replacing the defaults, so there’s less needed to overwrite in a custom theme.

I’ve started using it as its grid layout makes responsive design so much easier than handling each page element and I know that the ready made components and UI elements are accessible where my own might not be.

Codepen

And finally, Codepen. I’ve covered this in another post, Developing in Codepen. In short, I use it every day, it’s awesome.

What I Learned in 2014: Part 3 – The Best of the Rest

This is the final part of a three-part article looking back on new things I’ve discovered in 2014. This part is just a round up of all the other bits and pieces not mentioned in the other parts and a bit of a look forward to 2015.

Google Analytics

I’ve used Analytics for years but haven’t really used it in any depth for the last couple of years. It’s changed. Quite a lot. All in a good way. It can do a lot more now than before. It seems to be moving closer towards the Webmaster Tools and used well can actually help you improve not only the user experience through design but also the performance of your site through the Behaviour > Page Speed data and suggestions.

ASP.NET MVC

I don’t do a lot server side but colleagues of mine have made excellent use of the EditorFor functionality and partial views to create reusable dynamic page components.

My biggest discovery has been Bundling and Minification of JavaScript and CSS assets. It allows you to create bundles of files and then concatenates them into one long file before minifying it and changing the references. This could mean one single request for all JavaScript, which is then cached – much better for performance and page loading times.

Responsive Web Design

I still feel like I’m quite new to this but have made some good progress this year. I now understand the basics of mobile and viewport sizing and scaling. I’ve also got the hang of media queries for changing font-sizes and positions of elements based on screen width. I’ve kind of taught myself by looking at the code of sites that do it well rather than by using any tutorials. It seems to be a good shortcut for now. There’s definitely a lot more to learn here but I’m pleased how painless it’s been so far.

Brackets

I’ve recently started using Adobe Brackets, which is an open source code editor available from brackets.io. It’s got everything I need, looks good and from the progress I’ve seen in its first few months it’s going to move pretty fast. The thing I love about it is that it’s built in front end technologies – HTML, CSS and JavaScript.

To Do List for 2015

So, now I see how much I’ve learned in the last year it’s time to start thinking about what’s next for 2015.

One obvious area for me is learning more about SVG. It would be nice to reach a point where any graphic that isn’t a photo could be created in CSS or SVG. I’d quite like to move away from icon font libraries in favour of SVGs to reduce a bit of bloat.

The other big area is responsive web design, in particular responsive images. Sending large images to mobile devices is bad news and should be a quick win on the performance front.

I’m sure there will be a lot more that crops up in 2015 as I find a need for it and I may even start learning things that haven’t even been created yet.

I hope I can help others to learn more too in 2015.

Monitoring your Marketing with Unique URLs

Failure

Using Google Analytics or a similar web stats package you can see how many people are visiting a particular page or downloading a particular document on your website.

When you’re creating a new online marketing campaign it’s useful for you to be clear on what web traffic has been generated from a specific activity rather than just look at your overall traffic.

For example, if you were promoting a particular event you might place a link on your website’s home page, run an ad on Facebook and do an email to your contacts. It would be very useful to know the effectiveness of each of these activities.

The easiest way to monitor this is to use specific URLs, one for each activity or source.

Instead of adding a normal link to your page, e.g. http://www.yourwebsite.com/event.htm, you can create unique URLs by adding additional information on to the end of the URL. These additional bits of information are called parameters and values. Here are some examples:

http://www.yourwebsite.com/event.htm?src=homepage
http://www.yourwebsite.com/event.htm?src=facebook
http://www.yourwebsite.com/event.htm?src=email

To introduce additional information you add a question mark “?” to the end and then a parameter name. This can be anything you like. Here I’ve used “src” short for source. You then have an equals sign “=” and set a value against it. Again, this can be anything you like.

If you’re website is database driven your URLs may already have one or more sets of parameters and values in the URL (look for a question mark). If this is the case you simply need to add an ampersand “&” on to the end plus your parameter name, an equals sign “=” and a value. The ampersand is used to join pairs of parameters and values.

By adding further sets of parameters and values to the URL you can get more detailed information back. For example, if your contacts database identified people’s sex and you wanted to check whether more men or women were visiting your page you could use the URLs:

http://www.yourwebsite.com/event.htm?src=email&sex=male
http://www.yourwebsite.com/event.htm?src=email&sex=female

You can use this URL monitoring to see which activities are working for you and which are providing the best value for money and return on investment.