Tag Archives: code

Google Analytics for WordPress (version 4.09) trips HTML validation when tracking outbound links

Posted on by
3

When I write HTML, running code through the W3C Validator is part of my process. If the code doesn’t pass the validator, there’s a slim chance I’ll consider that code ready for anything.

So after I upgraded this blog to WordPress 3.01′s Twenty Ten theme, I was mildly irritated to find that I had a few validation errors. I viewed the source code to investigate the offending lines of code, and noted that the code the validator cited was not in the source.

This phantom code led me to suspect that DOM scripting from a plugin caused the errors by inserting more code into the markup. That was it, and this evening I finally took the time to track it down. Here’s the scoop.

First, the phantom code that broke validation

W3C validator error message indicating an empty target attribute

The error indicates an empty target attribute. It turned out, this code was inserted by a plugin.

Honestly, the first time I saw this error message, I didn’t notice the error text that pointed to the target attribute. No, I was first startled by a pattern that looked to me like the tail-end of Javascript code used in an anchor’s href or onclick attribute. I was startled because, having already looked through the code, I thought I would’ve noticed that pattern, since it is one that I avoid.

Where was this code? Well, all 9 errors were in the same area of code: links to other websites (blogroll) in the sidebar. I wanted to see it for myself, so I opened the page and viewed the source code. I used the Find command and pasted in some of the code from the validator error message, but the Find came up empty-handed.

While the offending code was not in the served markup, the validator was certainly picking it up, so I went back to the validator to examine that code in more detail.

Code with an onclick javascript snippet inserted for Google Analytics tracking.

Code with an onclick Javascript snippet inserted for Google Analytics tracking. Note the target attribute.

The value of the onclick attribute was the immediate tell for where this code came from. It was the Google Analytics plugin I’m using.

Investigating the plugin that caused the validation error

Google Analytics for WordPress is a fantastic plugin. It makes integrating Google Analytics easy, and it has some excellent advanced settings.

One setting is to track outbound clicks and downloads as events so they are are viewable in Google Analytics.

Checkbox to track outbound links in WordPress.

Checkbox to track outbound links in WordPress.

To test the theory, I unchecked that box, saved the settings, and revalidated the web page.

It passed with flying colors.

Validation error identified, but I’m actually curious about tracking downloads

For the time being, I’m okay with leaving that feature turned off. I’ll let the plugin author know about it and hope the problem will be resolved soon.

Yes, I lose a feature to get back to valid code. Perhaps there is a support group for this kind of behavior.

But in my defense, this is just a personal site. I don’t make any money on it, and my interest in tracking downloads is just curiosity. I only have a few downloads or outbound links I’m interested in, and I have nothing riding on that knowledge beyond satisfied curiosity.

Still, the entirety of this problem can be laid to rest on a simple, meddlesome, and empty target="" attribute. That’s irritating.

I got to help UXmatters with print styling

Posted on by
2

UXMatters print pageA few months ago I contacted UXmatters online magazine to let them know of a problem I had printing out articles with Firefox. The first page would print, but that was all. I could switch to Safari and print fine, but that just didn’t seem right.

I found out that they were a little shorthanded on specialized web help, so I  volunteered to assist. Pabini Gabriel-Petit, the publisher and editor-in-chief, graciously accepted my offer.

Creating print CSS is usually simpler than web page layouts, because the goal is typically to have the content of the page print out well on standard size paper. Multiple columns and site navigation are usually uncalled for.

My first try was to revise the existing print CSS file. After half an hour at that, I decided it would be simpler to start from scratch. The original print CSS was quite complex, and it seemed I was searching for one issue: why did the pages stop printing after page 1?

So I rewrote the CSS, simplifying the CSS code greatly. I had the layout in good shape, but oddly still had the 1 page issue.

I went back to the main screen CSS file and begin sifting through it, looking for clues. Then on a hunch, I found the issue.

The global CSS file is thick. There’s a ton going on there to defend against various cross browser issues. One particular rule I saw repeatedly was the use of overflow: hidden. That rule is used for a few reasons, but one of them is to force a floated box (div or what have you) to expand when it wants to collapse, vertically. This allows things like backgrounds to show through properly.

One of the selectors that this rule was used on was actually a wrapper for much of the page content. It made sense to me, in a way, that this could confound a browser into hiding paged content that went beyond a page.

So the real key to the much simpler CSS file was to add in an overflow: visible to a large set of selectors to override that overflow: hidden for printed pages.

I sent Pabini the new code, and over the following weeks she tested it and added some details I had missed. About a month ago she deployed the new print CSS code  to the website.

This little evening project was a fun puzzle, and I’m glad I was able to help make such great content on the UXmatters website print out better for more people.

(Back in 2002 or 2003, I forget when, I wrote an article on print styling for web pages.)

Newsweek’s Spring 2010 Website Redesign

Posted on by
2
Home page of Newsweek.com, May 31, 2010

Home page of Newsweek.com, May 31, 2010

I don’t know when it happened, exactly, but Newseek.com was recently redesigned. There is so much to say about it, and it is mostly good.

I’ll start with the most obvious: the design.

In short, the home page is easy to scan. There is a clear visual hierarchy. The lead photos and articles have been spot-on for Memorial Day news items, and the clarity of the layout made certain I couldn’t miss them.

The article pages are easy to read and keep enough of the patterns, like the byline and publication date, that it’s easy to figure out what’s what.

My biggest complaint is one that they no doubt haven’t figured out how to get rid of yet: the banner ads.

There’s more talk about the visuals for the new newsweek.com at nymag.com. I won’t go on about that, myself, other than to say, gee, it looks like a professional blog. Oddly, that’s a compliment.

Now let’s look at the markup.

Code for namespaces on newsweek.com

Newsweek.com's namespaces point to interesting uses of meta data.

I’ve had a penchant for information architecture since the late 1990s, and about the first thing I noticed when glancing at the markup for the home page is the references to the Dublin Core meta data definitions and other meta data sets.

I was suddenly intrigued. Good use of meta data is sadly absent in many large-scale websites, and it’s really great to see an effort to play the game for real.

So, at a quick glance through the markup you’ll notice some unusual pieces, first this:
data-track="{'title':'stories being discussed'}", which is an attribute with a value that looks a bit like JSON.

I admit to being behind the times with studying HTML 5, but that attribute spurred my suspicion that this page was using HTML 5. I stopped wondering a few lines later when I spotted an article element, followed soon thereafter by a header element, and a nav element sporting an attribute of role="navigation". Whoa. Newsweek jumped right in.

So what about the meta data? Well, I can’t really know what they’re actually doing, but here is an observation. In a sidebar, they have a list of quotes. Each quote is marked up as a blockquote with an id attribute. Following each quote is a span with attributes like property="dc:creator" and about="#q1". The about attribute refers to the id of the blockquote in question. The content of that span itself is the name of the quoted person, plus which publication the quote came from.

Pretty cool idea: internal markup references like this can build relationships into the content. It could provide some interesting opportunities for parsing later on. Yeah, that’s right, the semantic web.

The problem with this all is…it’s half-baked!

Newsweek.com meta tags, bad markup

Newsweek.com used "http-equiv" when they needed "name". Oops.

That list of quotes with the ID attributes? All that meta data is duplicated and thereby meaningless! Further, why use a span element when they could have used a cite element? More semantic and those attributes would’ve played as well. Gah!

And back at the top of the markup by those meta data namespace references there is another set of meta tag elements which are sadly marked up incorrectly.

There is a stack of 5 meta elements that use the http-equiv attribute when they should have used the name attribute. I’ll bet whoever coded that knows the difference, but I wonder if they were rushed to get this version out. It feels like a beta.

They are so close to providing some really great examples of meta data use in HTML 5! I hope they release another version soon that gets more precise and cleans up some of this code.