(A backlogged entry I wrote back in March but kept overlooking to post.)

One of the difficulties of picking up a project is figuring out the tangled logic of how it all got put together. Especially when it was done by another consultant a few years ago (and subsequently hasn’t been touched–until now) and was only briefly reviewed by FTEs of the team (also a few years ago). Of course, the task of making changes to it falls on me. Good thing I’ve had experience muddling through already-written code.

(note: TL;DR at end)

Oh, did I mention some files in the project weren’t added to source control? That was fun to figure out, but at least it wasn’t as bad as trying to get the project references in order, fiddling around with web.config and .csproj files, and getting it to compile and run.

Anyway. This project is a mobile site version of a main desktop website. One of my tasks was to add Google Analytics code to the project. A simple procedure, right? Add a block of code to the [correct] template file and it should properly track the pages. Simple, quick, do it, eyeball some tests, call it done.

Nope.

Playing around with Fiddler – my favorite new toy/tool and Chrome’s developer tools, I noticed the pages weren’t firing off the Google Analytics code. Although, a couple were. Upon inspection, I found some odd and old (read: deprecated in today’s version of the library) script blocks dealing with the pageshow event, where I finally figure out this is related to the jQuery Mobile library. (The jQuery Mobile JS files were buried in a subdirectory separate from the other jQuery files.)

Several Google searches later and I’m left wondering why no one else has encountered this issue or if I had missed some intro to jQuery Mobile and Google Analytics write up (turns out I sorta did). I did finally stumble upon this SO post. Included in the question is a reference to a jQuery Mobile and Google Analytics best practice. Although the code in that best practice is outdated, it does mention that:

Analytics tracking in jquery mobile is a little bit different then on a normal page-by-page site. You no longer track pages views based off of real page views, instead you have to trigger them on the “pageshow” event. Also, the URL that shows up in the address bar might not actually be the real file that was pulled from the server. What you’ll actually want to track is the attribute “data-url” on the active page. —Roughly Brilliant

In short, an extra event handler is needed on the pageshow event to trigger the Google Analytics code.

Going back, I realized I could have arrived at the solution sooner if I hadn’t immediately dismissed the code using the old GA script. People have encountered the issue, but my personal filter worked against me by tossing out “outdated” code without realizing it was still relevant. But, I wouldn’t have found the defining quote from above which really adds the context so I understand why it’s beng done.

TL;DR: in addition to the standard GA script block, jQuery Mobile has a pageshowevent where Google Analytics should be triggered. Using the data-url attribute will return the real file from the server and not the URL that shows.