Wednesday, January 23rd, 2013

Well That Was Broken

It was brought to my attention this morning by porschegirl, revered author of the first-ever comment here at 500Benz.com, that the site was so broken on Internet Explorer (above) that she couldn't log in—the content was pushed to the left margin, and the login box didn't show up on the screen at all.

A hot 15 minutes later, I had fixed the problem and pinpointed a possibly misleading passage in the Google Analytics documentation that could trip up newbs like me.

Google Analytics, if you haven't heard, is an amazing service that lets you track pageviews, unique visitors, and stuff like that in a lot of neat ways. All you have to do is drop in a few lines of ready-made code from Google, and you're good to go.

Unless you do it my way, that is, in which case you will catastrophically break your layout in Internet Explorer.

WARNING: Techspeak and only techspeak ahead.

When you sign up for Google Analytics, here's what the initial documentation says for "PHP Implementation" (which is what I need for this site):

The key word here is "Then," because it seems to denote a second step, after you've included that PHP file in each template page. That's why I thought I had to include the file twice, even though it didn't really make sense: first up at the top, where document-wide include files generally go, and again right after the opening "body" tag, as shown in the example.

So this is basically what my code looked like:

And it worked great! I immediately started seeing how many people were on the site (lots), how long they were staying (hours), where they were located (six continents), all that good stuff.

Except I forgot to test the new code on what is surely the most finicky and generally most terrible browser in the history of browsers, Microsoft's Internet Explorer (IE), which is unfortunately still used by about a quarter of non-mobile websurfers as of this writing.

So when porschegirl told me this morning that she couldn't log in with IE, I had to scramble.

And here's what debugging looks like when you don't really know what you're doing:

Yep. Advanced technique. Then you just start clicking on stuff in hopes of finding someone who had—and solved—a similar problem.

In this case, you can see the link I clicked on, and it contained this little nugget of wisdom from a user named "quarterstaff":

Aha! So the problem was that I had put the initial include statement above the DOCTYPE declaration, which is fine when the file just contains PHP...but not fine for IE when it contains JavaScript. And "analyticstracking.php" consists solely of JavaScript—it's just the standard Google Analytics JavaScript code pasted into a separate document.

Now, I'm still not sure why IE doesn't want JavaScript up there. Chrome/Firefox/Safari are cool with it, and I don't have a sufficient conceptual understanding of this stuff yet to take a deeper dive into what's going on. But you know, I've learned that that's just how IE rolls: it's got a lot of quirks.

And I've also learned, by the way, that it's ultimately not Microsoft's fault for building a quirky browser; it's your fault as the programmer for not having bothered to figure out and follow the rules.

Anyway, so I deleted the "include" above the DOCTYPE, and presto—all systems go on IE. Quarterstaff, wherever you are, thanks. Together we saved the day.

Then, because I knew there was a reason I'd done it that wrong way originally, I looked up "PHP implementation" on the Google Analytics support page to see where I went astray.

But there's different documentation there, and it's not misleading at all:

Not only does this documentation clearly specify just one "include" instance, it also says to put that line in the "head" section, not the "body" section! (And for good measure, it adds a closing semicolon after the PHP statement, which is technically unnecessary with a single line of code but considered best practice as I understand it.)

So it's only the initial documentation, the how-to guide you get when you sign up for Google Analytics, that contains those potentially misleading-for-newbs directions.

I now feel free to move on with my life.

posted in: How This Site Works  

2 comments

Login or sign up to comment.

top