Friday, December 18, 2009

How To Track PDF Downloads in Google Analytics

Google Analytics is an excellent tool for tracking all types of site visitor interaction. But two common questions we receive from clients interested in tracking their site's activity include:

I) Why doesn't Google Analytics track PDF* downloads on my site?
II) How can I make Google Analytics track PDF* downloads on my site?

Read on to find the answers to both of these questions.

I) Why doesn't Google Analytics track PDF downloads on my site?

Google Analytics updates it's data every time a page on your site loads its tracking code. If a page on your site does not contain the Google Analytics tracking code, that page is essentially invisible to Google Analytics. Because the PDFs that you are linking to do not contain Google Analytics tracking code installed on them, they are invisible to Google Analytics. (This is the same reason why links hosted on your site and pointing to other websites are not tracked, since the landing page of the other websites do not contain your Google Analytics tracking code.)

II) How can I make Google Analytics track PDF downloads on my site?

Fortunately for us, Google Analytics has created a work-around for tracking activity to destinations (URLs or documents) that do not contain your tracking code. Essentially, it is a means of faking or "simulating" a page load at the link click level (rather than the page load level). In this way, you can tell Google Analytics to update its data whenever your tagged link is clicked, regardless of whether or not the destination contains tracking code or even loads in full. You can accomplish this by performing the following:

Once you've created a link to your PDF, you'll need to edit the Source Code (HTML). To do this using the Evergreen CMS, you'll need to click the [<>] button located within the second row of the WYSIWYG ribbon menu. Locate the line of code that denotes your hyperlink.

eg.


You'll simply want to edit this link to match the following format:

eg.


Apart from the URL pointing to your PDF (in this example: http://www.mydomain.com/assets/documents/my-document.pdf) the only other part to this code which will change with each link you tag is the actual name you assign to the link (eg. /downloads/document-name). For example, you could name it /downloads/Calendar-2010.doc or simply Registration Dates. This part of the code is entirely up to you, just know that whatever you choose to name it will dictate how it shows up in your Google Analytics reports.

We hope this guide was helpful in not only giving you the tools to track your site's PDF downloads, but also in providing you with some of the logic behind it.

* The PDF filetype is used in this article simply because of its popularity among our clients, however this guide applies to ANY filetype that can be linked to on a website and downloaded by a visitor (eg. .doc, .xls, .zip, etc.)

Thursday, December 17, 2009

3 Technical Tips for Web Design

Designing for the web can be tricky. Unlike print media, where your only design constraint is the size of the canvas you're working on, the web requires that whatever you design align with the constraints of the technology powering that environment. That means that if you are to achieve a design that is both scalable and compliant, pay attention to the following 3 technical tips.

#1) Employ Vertical Scalability

First, ask yourself this: "Will this website be subject to edits post-launch?" If your answer is Yes, you'll want to pay particular attention to vertical scalability.

Unlike print, where your final deliverable is often fixed in dimensions and/or size, the web demands flexibility in both. When designing a template for the web, be sure to include a vertical "coupler"--a horizontal chunk spanning the width of the design that is conducive to replication down the page. This coupler is how a design made for a website 768px high can scale to a webpage needing 1000px of height. If you're still unsure whether or not your design is vertically scalable, ask yourself these questions: "What will happen to my design if the client doubles the amount of content on the page? Will that break my template as I have designed it?" If your answer is Yes, then you have not designed a scalable website and you'll likely be hearing back from the client with complaints--and rightly so.

Design your website in such a way that content can be added or removed without compromising its structure or requiring continuous support from the designer.

#2) Appreciate HTML (Use Web-Friendly Fonts)

If you do NOT use web-friendly fonts in your design, you're setting the client up for disappointment and yourself up for failure . Here's why: unless you plan on having your entire website developed as a series of giant, static, images (NOT RECOMMENDED), HTML text will need to be used to recreate the copy you designed in your original mockup. The benefits of using HTML text are too numerous to count, but a few of the big ones include:
  • Search Engine Friendliness - search engines, the middleman between your site and an online audience of millions, cannot read text that is presented as an image. Therefore, if you expect engines like Google, Yahoo! or Bing to index your Novelty T-Shirt site for relevant terms, you had better ensure that you have offered them text talking about "novelty t-shirts" in a format they can understand (HTML).

  • Scalability - If the site you've designed is going to undergo change and updating post-launch, having copy represented in HTML will ensure the easiest and most efficient means of doing so. Whenever textual elements of your design are represented as images (instead of using HTML and web-friendly fonts) you have set the requirement that if the client needs to alter this text in any way, he/she must first contact you to do so. If this is how you want the client/designer relationship to be, then you are in a fine position. Otherwise, empower your clients by making them rely as little as possible on design aptitude when managing their site.
A comprehensive list of web-friendly fonts can be found here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html. Use these whenever possible.

#3) Specify Copy Styles

When designing a website, it is important to exercise consistency. Visitors to your site want to consume information in as easy and efficient a means as possible, and that means introducing an intuitive set of rules for presenting your content and then adhering to them.

To keep things simple and straightforward, imagine you only have 5 ways of presenting copy throughout the site. Those 5 ways include:
  1. Titles (Header 1)
  2. Section Titles (Header 2)
  3. Subsection Titles (Header 3)
  4. Standard body copy (Paragraph)
  5. Hyperlinks
An example of a site which has done an excellent job of creating a predictable user-experience in regards to copy styles is Wikipedia. Consider the following example of Henry VIII's Wikipedia entry.

At the top of the page, "Henry VIII of England" is presented in the largest of fonts (Header 1).



If you scan past the intro and Table of Contents, you'll notice the first Section Title ("Early years: 1491-1509) which is presented in a slightly smaller font (Header 2), but still larger than the Standard body copy (Paragraph). Scanning even further down, you'll notice the Subsection title of "Death of Arthur" which is presented in even smaller copy still, but this time it's been emboldened (Header 3).



Lastly, everywhere on the page hyperlinks are denoted in blue, with an underline added upon hover.

Granted, Wikipedia is an online encyclopedia and isn't the most exciting of examples, but the concept of utilizing consistency for an enjoyable user experience is a sound one and whether its plain-Jane information you're serving up like Wikipedia or the latest designer shoes, visitors will respond best to consistency and predictability.