Archives

Home » Blog

Burying Windows XP with IE11 Enterprise Mode

Note: this post first appeared on my blog on April 8, the last day of Windows XP support.

Chart showing that IE8 is the browser common to Windows XP and Windows 7.
Screen shot from Microsoft’s presentation on IE11 Enterprise Mode, showing what browsers are available on what versions of Windows. Note that the Venn-ish diagram has no IE11 intersection for Windows 8.

As of today, Windows XP has effectively reached its end of life. What I mean by that is that Microsoft will no longer be releasing security patches for Windows XP. Those of you waiting to deploy those XP exploits can run at the platform unopposed.

While this may be a nuisance for the home user (and the family who acts as his/her tech support), this has larger implications in the business world. For example, if you work in the healthcare world you may very well be in violation of HIPAA / HITECH laws if you’re still running Windows XP tomorrow.

What’s really annoying about this is that so many web-based applications were built to support the dominant browser(s) at the time — Internet Explorer 6 through 8. What that means is users on Internet Explorer 11 are being locked out of these online tools, making the transition away from Windows XP (which cannot have a version of IE greater than 8) a tough proposition for organizations.

Simply put, poor web development practices have created an environment where upgrading to the latest version of IE is directly at odds with keeping your productivity up (if it requires you to stay on an old version of IE). Complicate that by now making that old version of IE a vector for security breaches and compliance penalties/lawsuits.

But fear not! As long you have the hardware and licenses to run Windows 7 or Windows 8.1 (notice, not Windows 8), you can still use those Internet Explorer 8 web sites without being locked out (you’re SOL if you need IE6).

With a week before Windows XP turns into a zombie, Microsoft released Enterprise Mode for Internet Explorer 11. After all, you only needed a week to get all that hardware in place and configured, right?

Enterprise Mode doesn’t just emulate IE8, it masquerades as it. Some of the benefits of Enterprise Mode:

  • Enterprise Mode sends the IE8 user agent string to defeat misguided browser sniffers;
  • it mimics the responses IE8 sends to ActiveX controls, ideally allowing them to keep working;
  • it supports features removed from later versions of IE (CSS Expressions, woo hoo!);
  • pre-caching and pre-rendering are disabled to keep from confusing older applications;
  • IE8′s Compatibility View is supported, so odds are many applications designed for IE7 will work.

Some web developers have panicked that now they’ll have to support another browser or browser mode, but so far the evidence doesn’t bear that out.

Enterprise Mode will be controlled by a central source, most likely corporate IT departments, and will only be enabled for sites that have been manually identified. Intranets and custom-built un-maintained web-based applications are an easy fit here. If an IT department deems it appropriate, it can also allows end users to decide to enable Enterprise Mode on a site-by-site basis.

Microsoft has been testing this in many industries and countries (though not China, the biggest culprit for old, and illegal, versions of Windows). Hopefully this will help speed users to upgrade to IE11, even if it doesn’t provide motivation for organizations to upgrade their legacy IE8 applications.

In addition to the links above, you can get more information from the video of Microsoft’s Enterprise Mode presentation, or you can just view the presentation slides alone.

In short, this is a great band-aid for organizations that already have Windows 7 or 8.1, but won’t be helping to push IE8 out of the way (despite the best efforts of some). In short, as web developers, we can expect to support IE8 for a while still.

Related

With the demise of Windows XP (even though we know it’s not suddenly gone today), Internet Explorer 6 is also at its end of life (because no supported platform can run it). We know that it won’t go away completely, but it’s still being celebrated at sites like IE6death.com.

Update: April 11, 2014

I mentioned HIPAA above and linked to a post that argues for the presence of Windows XP as an automatic HIPAA violation. A more balanced, and well-cited, post is on this very blog: So You’re Stuck with Windows XP but Still Need to be HIPAA Compliant

Free Getty Images?

Screen shot of the Getty embed tool.
Earlier this year, there was big news for bloggers and content authors when Getty announced it would open up ~40 million of its images for free for use on web sites. Over on my personal blog I talked about some things to consider before using those free Getty images on your site.

The Caveats

Since then I’ve had a few of my clients ask me about how and if they can use those images on their sites and blogs, and my blog post is a bit long-winded (it’s written more for technical people). I’ll distill my feedback here, with less technical jargon.

Resizing

If you want to resize the image to fit your layout, you’ll need to know some HTML. Complicating matters, if you have a responsive site that shifts its layout for phones and tablets you’ll quickly find the Getty image doesn’t do the same. What may look great on your desktop could break your layout when you view the same page on your smartphone.

Privacy

You aren’t allowed to place an image right on your pages, you have to reference the image from Getty’s servers using code Getty gives you. While today not much may be in that code to concern you, in time Getty can add anything it likes, including ads.

Longevity

At any time Getty can revoke its license for use (or the photographer could). Because you are using code from Getty, you may never know if the image disappears, potentially leaving a big empty block in your page. To be fair, you take this same risk when you embed a YouTube video, among other services that allow you to use their content or media player.

Code

You need to have access to the raw HTML code of the page in order to use Getty’s code. For some authors and some platforms, this may be a little trickier than it seems. In addition, Getty offers a tool to generate that code, but doesn’t give you any way to customize it. It also doesn’t offer alternate versions of the code (shortcodes for WordPress, for example).

Featured

Many content management systems or blog platforms allow you to identify a featured image for a page or post (such as WordPress), otherwise the platform may use the first image in the page as the featured image (such as Blogger). When you use Getty’s code, there is no image, just a reference to one. Therefore you cannot set it as the featured image and it won’t appear in your blog index or in your RSS feeds.

Accessibility

Getty doesn’t account for accessibility. If your site needs to meet internal or government accessibility standards (specifically for marking up images), the code that Getty provides will certainly fail. Even if you know HTML, you cannot just add the necessary code since you cannot access the discrete image code that Getty ultimately embeds on your page.

One Workaround

Of all the issues I identified above, I can only control one — making the image work in a responsive layout. I have a much more detailed explanation of this over at my blog.

My approach doesn’t require you to modify the Getty code at all. As long as you can paste the following JavaScript into the site’s footer (somewhere before the closing body tag), it should just work when the page loads. To make it work when users resize their windows or rotate their screens, you will need to call the function then as well, perhaps in an onload event in the body.


function responsiveGetty() {

  try {
    // Get all the iframes on the page.
    var iframes = document.getElementsByTagName('iframe');

    // Height in pixels of the Getty credits/share bar at the time of this writing.
    var crHeight = 69;

    for(var i = 0; i < iframes.length; ++i) {

      // Check to see if it's a Getty embed using the only attribute that's unique, the src.
      if(iframes[i].src.indexOf("//embed.gettyimages.com") != -1) {

        eachIframe = iframes[i];

        // Get the current ratio after excluding the credit bar.
        picHeight = eachIframe.height - crHeight;
        picRatio =  picHeight / eachIframe.width;

        // Set the iframe to fill the container width.
        eachIframe.style.width = "100%";

        // Set the iframe height to correspond to the ratio, adding back the credit bar height.
        eachIframe.style.height = ((picRatio * eachIframe.offsetWidth) + crHeight) + "px";
      }
    }
  } catch(e) {}
}

responsiveGetty();

Obviously there are a few ways to implement this, so feel free to play around with it to get a solution that works for you. You can see an example page I made with a few different sizes of images that also resizes them if you resize your window or rotate your device.

Speaking on Accessibility at 2014 HTML5 Developer Conference

2014 HTML5 Developer Conference

I will have the pleasure of speaking at the 2014 HTML5 Developer Conference in San Francisco, taking place May 19 through May 23 (I’ll be speaking on May 22). The quick overview of the conference:

The HTML5 Developer Conference has grown to become the highest attended HTML5, JavaScript, and Web Development conference in the world. Providing tracks on Javascript, HTML5, Apps and Games, client, server, and mobile. HTML5DevConf boasts renowned speakers and leading edge sessions at the most developer friendly price on the planet.

You can learn more at the HTML5 Developer Conference site and you can also follow the conference on Twitter.

I will be speaking about accessibility and how it relates to you as a current and future user with my presentation Selfish Accessibility. The full abstract:

We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.

My bio and the abstract are on my speaker page on the HTML5 Developer Conference site.

Changes to EU Cookie Law

Information Commissioner's Office logo.
I was recently asked by a client whether or not the cookie law will apply to its overseas business. As a reference, he provided a link to the Computer Weekly article “How to comply with the EU cookie law.”

It’s a handy article, but as with most reference material on the web there is no date on the article to give an indication how recent it is. Rules have changed a bit since the law was passed and so the requirements aren’t quite so clear anymore.

It is still a regulation, though watered down. Instead of asking explicit permission, you can now get by under implied consent by linking to a cookie policy page from every page on your site. The content of that policy page is still informed by the law. More information on implied consent is available in this PDF.

Enforcement is a different story. My understanding is that enforcement is arbitrary and based on end-user complaints, at which point I think a slap on the wrist and request to make the cookie policy link more prominent may be all that is demanded (I haven’t found any verified examples yet).

Obviously I am not an EU citizen nor an expert in international law, but I think you’ll find feedback from appropriate counsel would be similar (though probably a bit more risk averse).

For more detail, you can read up on current language of the law at the ICO page (the folks who came up with the law) which includes this clarifying content (dated January 31, 2013):

We first introduced a notice about cookies in May 2011, and at that time we chose to ask for explicit consent for cookies. We felt this was appropriate at the time, considering that many people didn’t know much about cookies and what they were used for. We also considered that asking for explicit consent would help raise awareness about cookies, both for users and website owners. Since then, many more people are aware of cookies — both because of what we’ve been doing, and other websites taking their own steps to comply. We now consider it’s appropriate for us to rely on a responsible implementation of implied consent, as indeed have many other websites.

Print Styles Talk from WordCamp Buffalo 2013

Back in October I had the pleasure of speaking at Buffalo’s second WordCamp. Unlike the talk I gave at least year’s event, I opted to go for something a bit more technical, something we build into every site we develop at Algonquin Studios and that I have been promoting for years now.

So I crafted a presentation on how to use print styles on a web site. At Algonquin Studios we support many platforms, including our own homegrown content management system (CMS), QuantumCMS. I have also learned that many WordPress developers also work on other platforms, so I opted to discuss print styles independent of the CMS used to power the site.

I focused on the background of print styles and related them to responsive design, I covered best practices and techniques, demonstrated how you can use Google Analytics to track what pages are printed from a site, and touched on the future of print styles.

All of my slides are here along with a video from my talk. Below the embedded content are links to other articles and posts I have written about print styles for those who want to get a deeper dive into some of the aspects.

The Slides

The Video

The video gets cut off before the end, but the key information is still in the slides.

Further Reading

Error Messages Visible During Site Upgrade

During the course of a client web site upgrade today, one of the site’s visitors informed us that the web site was displaying an error and was exposing passwords in the error message.

While a password was in the error message, that password was only valid for the session state database and does not expose any other databases to access, including those with client data.

For those who would like a little more technical detail, the targetFramework error is expected while the site and applications are in transition across the .NET framework boundaries as the site is updated. The presence of the session state password and machine keys was not intended but was a side effect of an issue that has already been addressed. Some of the values are not in use and were commented out, but still displayed in the XML exposed in the error message.

As a result of this exposure, we removed existing accounts and set up new accounts and passwords.

New iPad Browser: Coast by Opera


This post originally appeared yesterday on my blog.

Yesterday Opera announced the release of its newest browser, Coast, built specifically for iOS tablets (I would say just iPads, but if my fridge gets an iOS tablet UI then I’d be wrong and will have paid too much for a fridge).

Background

Recently Opera moved away from Presto as its rendering engine and hitched its future to Blink, the rendering engine born from WebKit that powers Chrome. Now instead of Opera worrying about the rendering engine, it is focusing on the user interface, the place where it can set itself apart from the other browsers.

Essentially Opera is removing the browser chrome (implying to the user that a web page is just an app) and adding gesture support. Given that Opera was the browser that introduced us to mouse gestures well over a decade ago, and given that a touch screen is an inherently gesture-based UI, this seems like a natural fit.

Bits for Developers

Sadly, my office wifi was down and I couldn’t play with the browser immediately (my crusty iPad 2 is wifi only). So instead I took some time to read through the developer notes.

Tablet First

Overall Opera recommends general responsive design current best practices, though it promotes a tablet-first approach. Opera offers some CSS you can use to specifically target iPads Mini, 2, 3 and 4 (Retina and non-Retina), though it leans on vendor prefixes with only a brief note to also use other prefixes and unprefixed rules.

Responsive Images

It’s also clear that Coast supports the new srcset option for responsive images. It even offers a code example: <img src="image.jpg" srcset="retina.jpg 2x">

Note: As Bruce was kind enough to inform me (because I missed it in the dev notes), responsive images will be supported only in iOS7 and up.

Update as of September 20, 2013

According to Opera, iOS7 did not come with a WebKit update. That means Coast cannot support responsive images via the srcset attribute without a polyfill. Nor can Safari, of course.

Tile Speed Dial Web App Image

Instead of “Speed Dial” icons/images, Coast now looks for a “web app image.” If you don’t have one, Coast will first look for a Windows 8 tile image, then an Apple touch icon, then a shortcut image, then just a favicon. You can, however, create your own 228 × 288 pixel image and stuff it into your site with the following HTML:

<link rel="icon" href="$URL" sizes="228x228">

User Agent String

Don’t use this to do any browser sniffing. Browser sniffing bad. This is instead handy for recognizing it in your logs:

Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Coast/1.0.2.62956 Mobile/10B329 Safari/7534.48.3.

General Review

Getting going is pretty easy, just start typing into the only field on the screen. As you type you can see a Google preview on the left, which you can tap at any time to go to Google, or a list of icons on the right which correspond to sites you might mean. The icons start out just displaying the first letter of the site, and then identify the site’s tile or shortcut image.

Screen shot of Opera Coast navigate screen.

Note the handy “.com” and “.net” options that appear above the right end of the text box.

Once you are on a page, you can go back by swiping from the left, forward by swiping from the right, or reload the page by pulling down from the top — but not too far or you get the iOS menu instead.

Vine of me playing with back, forward and reload in Opera Coast.

Opera Coast skips tabs and windows altogether and, frankly, feels a lot more like Internet Explorer for Metro than other current tablet browsers. It’s pretty easy to see the open “tabs,” flip through them, get more details, and discard them. It’s also incredibly easy to forget you have so many tabs open. I regularly found myself littered with tabs because of all the links opening new windows.

Testing Opera Coast window/tab management.

While in that tab view, you can also see how “safe” the page is and can get to options to share it, email it, print it, and so on.

Screen shot of Opera Coast safety and share information.

The arrow on the right gives you all the share options.
Opera Coast print dialog.

I don’t have a printer installed, so I’d love to hear feedback on how Coast honors print styles.

Adding and removing a bookmark, tile, whatever, is pretty easy. It took a few swipe-fails, but I got the hang of it well enough to show the whole process in one uninterrupted Vine:

It takes a little getting used to, but it’s not too hard

Gotchas

There were a few things that threw me off. Perhaps because I am a power user, perhaps because I only played with it for one evening.

Swipe History

The swipe for back/forth is handy, but conflicts with behavior I have already learned. In Chrome for Android, swiping left or right has the infuriating feature of bringing me to the next or previous tab in the stack order. For those rare sites that implement a slide that is swipe-friendly, imprecise swipes will move me back and forth in the history instead.

Web App Images

Using the browser in portrait view, the additional screens of tiles (speed dial icons if you are already familiar with Opera) aren’t immediately apparent. It wasn’t until I turned to landscape that I saw them. The tiny dots under the Coast icon weren’t enough for me to intuit that. They also aren’t nearly large enough to tap to jump to a specific screenful of tiles.

Hit Sizes

The 9-box grid at the center bottom as well as the three rectangles at the bottom right are the only real browser chrome in play as you surf. They are also maddeningly small to tap. And I have dainty, lady-like fingers, so I suspect it may cause consternation for others.

Address Bar

If I am on a site and I want to change the address of the current page (maybe I fat-fingered and got to a 404, or I know a super-secret URL), I could not find a way to bring up the address bar and change it. It also made it impossible to know the current page address at any time. As someone who regularly looks at the URL for familiar addresses, indications of scam sites, quick commitment to memory, and so on, this alone takes it out of the running as an everyday browser for me.

Email a Page

I did not care for the email feature one bit. Not only does it embed a screen shot of the page (with a Coast watermark), the screen shot won’t display on other devices. Outlook blocked the image because the attachment ended in .com (not .png or .jpg). Had it not come from me, I wonder if Outlook would have blocked it as spam. My Android email client couldn’t display it because there was no file extension to give it a clue.

Screen shot of emailing a web page from Opera Coast.

What you see when you choose to email a web page from Opera Coast.
Screen shot of received email from Opera Coast.

Best case scenario of what the email recipient sees, though the attachment was blocked in Outlook and unusable in my Android email client.

Tweet a Page

Tweeting a page left me similarly dissatisfied. By default it includes a Twitpic screen shot of the current page with an Opera Coast watermark. When composing the tweet, I tapped the paperclip icon to see if it would do anything, but nothing happened. I opted not to tweet again.

Screen shot of tweeting a page from Opera Coast.

Tweeting a page from Opera Coast.

The resultant tweet:

[tweet https://twitter.com/aardrian/statuses/377239986220703745]

Wrap-up

Overall, I like the browser. I like what it’s trying to do for consumers. As a power user, however, It’s not a fit for me though I’d be interested in bringing it in front of some other members of my family.

I also didn’t get to try out unsafe sites, printing pages, responsive images (need iOS7), or poorly-built sites. My opinion might change as I continue to play with the browser.

Open Question

There are a lot of Android tablets out there, not just the four screen size offerings from Apple. So how long before we can see Coast on my Nexus 7, if ever?

Updates

I’m adding notes throughout the day as they come up.

Surprising no one, the following reviews from more mainstream sources completely fail to include any screen shots or videos that weren’t pilfered from Opera. I only say that to remind you that by reading this post you have gotten the most in-depth review currently on the web and you should be excited and send me a thank you note and maybe read all my other posts and high-five me on the street.

These articles are, however, worth visiting just to see the comments and how others are reacting to it.

Tips from Bruce:

Update: September 18, 2013

Opera has fielded some questions about Coast and collected them into two posts (so far):

My Presentation Slides: Making Your Site Printable

This post originally appeared on my blog.

On Friday, May 17 I had the pleasure of speaking for the first time at Stir Trek, a one-day conference in Columbus, Ohio, that drew over 1,200 attendees (and I understand sold out in just a few minutes). Apparently the name is a reference to the MIX developer conference, for which they were unable to obtain license to use a variation on the name.

I also had the pleasure of presenting for the first time on best practices for making your web site printable, built from my own professional experience, my PrintShame site, and an article I wrote for .net Magazine, among other resources (also linked in the presentation).

With 40 great speakers across 8 different tracks, there was quite a lot to offer throughout the day. Considering the other presentations held at the same time as mine, I was thrilled to get any audience and more excited to see that those who attended saw value in the topic and asked great questions throughout.

As promised in the session, I have made my slides available online via SlideShare and embedded them here:

Well after the talk I got even more questions and feedback on the session, which I truly appreciated. Since there is no official survey for attendees to give feedback on a speaker, I am hoping any attendees will feel comfortable tweeting about it or leaving a comment here. So far I have gotten one great bit of feedback on Twitter:

(I worked in some accessibility tips during my presentation.)

All other feedback is welcome (including if I was loud enough when the lavalier microphone failed).

While in Columbus I also had the pleasure of having a nice dinner (I arrived too late to make the speaker dinner), visiting the North Market, and, as part of the conference, getting to see a double feature of Iron Man 3 and Star Trek: Into Darkness. All around a good time which I look forward to repeating next year.

Don’t Use Global Browser Stats

This post originally appeared on my blog on May 2, 2013.

When I say “global,” I don’t necessarily mean the whole world, but really any aggregate pile of numbers for browsers that aren’t culled from your own site or project.

With IE6 finally fading (which many developers will claim is a result of their IE6-blocking sites), the ire of developers has turned to Internet Explorer 7. Given that many web developers want to play with the new shiny (and not worry about supporting older browsers) or hate the extra work that sometimes comes with supporting older browsers, it’s no surprise that disdain for IE7 is high.

It is with that experience that I think casually tweeting global stats and calls-to-action can be irresponsible without context, as this one on Friday:

This tweet led to the usual self-congratulatory responses of how it’s a web developer’s responsibility to force users to upgrade, old browser support is just a false assumption from the client (and maybe that client should be fired), money is being thrown at the wrong problem, IT departments are just jerks, and so on. While Paul clarifies in a follow-up tweet that he still thinks the content should be accessible, that point is lost as a tweet response instead of a tweet all his followers will see.

Competing Stats

Some responses were more thoughtful and based on a different source of global stats:

Akamai chart.

Screen capture of Akamai chart with Safari, IE7 and IE10 highlighted.

The Akamai chart shows that IE7 is about on par with IE10 and even fares slightly better than Safari 6. The more discerning viewer might notice that Safari use goes up on weekends just a bit while IE7 use drops off for the same period, suggesting IE7 traffic might be coming from office workers.

Ignore Stats That Aren’t Yours

A few people try to make the point that those numbers don’t apply to their sites, some even try to make the point that this isn’t about browser support at all:

As an example, I have a site I was working on last night that gets 7.3% of its traffic (over the last month) from IE7. That’s about one in 14 users. I know I have to support users on IE7 because I look at the stats for the site, not because I look to Akamai, StatCounter, or anywhere else.

Here’s the takeaway I want everyone to recognize: The only browser statistics that matter are those for the site you’re supporting.

I feel so strongly about that point that I am going to quote myself just one sentence later:

The only browser statistics that matter are those for the site you’re supporting.

This Applies to Other Stats

I’ve seen plenty of people discuss window sizes over the years and make generalizations about what sizes to support — even more common in the era of responsive web design. But global screen sizes are irrelevant. Instead, look at the numbers for the site you’re supporting. Even better, look at the viewport size:

There has been a resurgence in discussion of late on print styles, but nobody seems to have any stats for how often users print pages. In the absence of raw data, developers talk about how they use sites and how their circle of contacts use sites. Instead, track it for your own sites and know when pages are being printed:

There are many other cases where developers look to global stats in lieu of tracking their own, but I haven’t written tutorials for them. Now might be a great time to consider writing some of your own for the data points you want to capture.

Related

My Previous Rants

Going the Wrong Way

While supporting your users, and by extension their browsers, is the best approach, it is possible to get so focused on browsers themselves that instead of cutting edge you end up doing the opposite (even if it takes time to become apparent). Take this example from the UK Department for Work & Pensions:

The service does not work properly with Macs or other Unix-based systems even though you may be able to input information.

You are likely to have problems if you use Internet Explorer 7, 8, 9 and 10, Windows Vista or a smartphone. […]

There is also a high risk that if you use browsers not listed below, including Chrome, Safari or Firefox, the service will not display all the questions you need to answer.

The supported list of browsers and operating systems are combinations of Microsoft Windows 98, Windows ME, Windows 2000, and Windows XP with the browsers Internet Explorer versions 5.0.1, 5.5 and 6.0, Netscape 7.2, Firefox 1.0.3, and Mozilla 1.7.7.

Tracking When Users Print Pages

Originally posted on my blog on March 26, 2013.

A few months ago I had the pleasure of writing a piece for .net Magazine about print styles (Make your website printable with CSS). It was posted to .net’s web site last month and received an overwhelming one comment. That comment, however, summed up something I hear all the time:

Would be interesting to see some statistics on how many people actually print websites.

For years I have argued that the best user statistics are those for the site you are building. In the absence of global numbers for how many users print web pages, in this post I’m going to show you how you can measure how many (and which) pages get printed from your site by using Google Analytics. I am also hoping those who know everything about Analytics can answer some of my questions.

The Concept

While looking around for existing solutions to track printed pages, I found this article: Use Google Analytics to Track When People Print your Web Pages (written exactly one year before I got my own code working). While there doesn’t appear to be anything wrong with this approach (I did not try it), how it both produces the tracking code (JavaScript) and presents the data in Analytics (different than how I report on custom events), doesn’t match my preferred approach.

I want to be able to call the Google Analytics tracking image (__utm.gif) only when the page is going to be printed, skipping unnecessary HTTP calls and the resulting image download (brief though it is). I rely on the CSS @media print declaration to call the image. I also don’t want to write that image call to the page with yet more client-side script when I can assemble it all right on the server.

Since my post Calling QR in Print CSS Only When Needed already outlines the general flow (presuming I only want to support Internet Explorer 8 and greater), I can lean on the CSS syntax there.

To reiterate this technique will not work in versions of Internet Explorer 7 and earlier.

Constructing the Query String

I had a heck of a time finding information on how the Analytics query string needs to be constructed, and when I did find information it didn’t always explain the values in much detail.

Google’s developer site has information on all the query string parameters for the GIF request, but no information on what is required or what all the possible values might be. I did find a list of what may be the required parameters while searching among a thread on tracking emails with Analytics. Through a good deal of experimentation I came up with the following minimum list for my purpose:

Variable Description
utmac Account String. Appears on all requests. This is your UA-#######-# ID.
utmwv Tracking code version. While my standard GA requests use 5.4.0, I opted to use 4.3 for reasons I no longer recall.
utmn Unique ID generated for each GIF request to prevent caching of the GIF image. I just concatenate the current year, month, day, hour, minute and second.
utmhn Host Name of your site, which is a URL-encoded string.
utmr Referral, complete URL. In this case I just insert a dash so it is not blank.
utmp Page request of the current page.
utmt Indicates the type of request, which is one of: event, transaction, item, or a custom variable. If you leave it blank, it defaults to page. Because I am tracking events, I use event.
utme Extensible parameter. This is where you write your event. I use 5(Print*{page address}). See below for why.
utmcc Cookie values. This request parameter sends all the cookies requested from the page. It can get pretty long. It must be URL encoded. It must include __utma and __utmz values.

Because the whole point of this is exercise is to track the event in Google Analytics, it was important to understand how to construct the event for the query string. I struggled a bit.

I still haven’t figured out what the number 5 maps to, but it works. I also found that I need an asterisk as a separator, though I found no documentation explaining it. In the end, the only way a print event tracked as I wanted was when I constructed it as: 5(Print*/Accessibility). In this example, /Accessibility is the address of the page I am tracking.

The other tricky bit is pulling the cookie value and stuffing it into the string. Conveniently I can get to this within our content management system (QuantumCMS, which you should use) on the server side. Many others (if not most or all) have a similar ability. At the very least you have to include the __utma and __utmz values, passed as encoded parameters for utmcc. Without these, my tracking would not fire.

The Completed Query String

For ease of reading, I will break the string to a new line at each &. This represents what is generated when I visit the careers page on the Algonquin Studios site using Opera.

http://www.google-analytics.com/__utm.gif
?utmac=UA-1464893-3
&utmwv=4.3
&utmn=2013326124551
&utmhn=algonquinstudios.com
&utmr=-
&utmp=/Engage/Careers
&utmt=event
&utme=5%28Print*/Engage/Careers%29
&utmcc=__utma%3D267504222.1477743002.1364314722.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29

Constructing the CSS

Now that you have the query string and the Google Analytics tracking image, you just need to call the image when the page is printed. All you need to do is embed a style block at the top of your page with the print media query, and call the image within it:

@media print {
 header::after
  { content: url(http://www.google-analytics.com/__utm.gif?utmac=UA-1464893-3&utmwv=4.3&utmn=2013326124551&utmhn=algonquinstudios.com&utmr=-&utmp=/Engage/Careers&utmt=event&utme=5%28Print*/Engage/Careers%29&utmcc=__utma%3D267504222.1477743002.1364314722.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29); }

If you read my post on embedding QR codes, then this code will be familiar — I use header::before in that example. As such, I use header::after here so you can use them both keyed off the same element (header) without conflict.

If you look closely, you may have noticed that my event parameter looks like 5%28Print*/Engage/Careers%29 instead of 5(Print*/Accessibility). I URL encoded the parentheses on the entire string to make certain that they do not conflict with the parentheses in the CSS. If you don’t do that, the browser will get confused and fail to load the image.

Once you have the CSS in place, I recommend going into HTTP Fox or the Chrome Developer Tools to make sure the image is called when you fire a print preview (save paper!), and then to make sure it has the parameters you expect — particularly the utme value:

Screen shot of Chrome Dev Tools.
Screen shot of Chrome Dev Tools showing the query string parameters for the tracking GIF.

Checking Your Google Analytics Report

Assuming you’ve verified all is working well, you just need to run a report for events in Google Analytics. Bear in mind that Analytics isn’t up-to-the-minute, so you may need to give it some time to capture all the data.

Log into your Analytics account and make sure you set the report date to the time period where you rolled out these changes. Choose “Content” from the “Standard Reports” on the left side. From there, expand “Events” and then select “Top Events.” You should see “Print” as one of the items in the “Event Category” column (you may need to show more rows).

Screen capture from Google Analytics
After you click “Top Events,” you will see all of the events you are tracking (if any other).

Click on the word “Print” in that grid and you will see all the pages that were tracked (ostensibly because you or a user printed the page).

Screen capture from Google Analytics
The report is handy if you know the page addresses, but Analytics doesn’t think of them as such. As a result, clicking the addresses will not take you to the page.

From here you can run a secondary dimension to cross-reference this with more information. In my example, I tested different pages in different browsers so I could quickly verify the cross-browser support. You can run screen resolution, landing page, or any other dimension that you think might be handy to compare.

Screen capture from Google Analytics
An example comparing the printed pages with the browser as a secondary dimension of the report.

Conclusion

I am just adding this to my own site, so I don’t have any numbers to offer as part of this post. However, if you implement this please feel free to let me (and everyone) know how many users you have who print and for what site. I don’t expect the numbers to be high, but I do expect to see it happen here and there.

If you have any additions, corrections or suggestions, please let me know. I am still unclear how all the Google Analytics query string parameters come together and exactly what they all mean, so there may be some optimizations I can work into it.

Related

Related articles on print styles:

Stuff I’ve Written