Recently we were asked by a client if traffic from their test site was being posted to a Google Analytics (GA) account. It turns out it is. Not only that, so is any version of the site hosted on their development and test servers, and any developer’s local site.

We tested this by placing several pages on various websites and subdomains. For example pages were placed on www.popart.com, test.popart.com, and blogs.popart.com as well as www.clientsite.com and test.clientsite.com all with the same GATC.

Data was collected under that profile for each of these pages in Google Analytics regardless of domain or subdomain.

How Can We Eliminate Development Traffic From Our Statistics?

Removing the GATC from all but the live site was one option, but having two sets of files would require us to remember to insert this code when pages go live raising the concern of releasing a page without a GATC and losing data.

Also this solution would not address the possibility that someone could accidentally or intentionally copy our code to their site, meaning we’d be collecting stats from their site as well.

Instead by using filters we can target and collect only the site traffic we’re interested in. Moving forward when creating a GA website profile, in addition, we will create a second GA web profile to which we can apply our filters. This allows one profile to be untouched with all of our master data, and one that only collects data from our target domains.

Creating a Second Web Profile

  1. Select Create New Website Profile, and then choose Add a Profile for an existing domain.
  2. Select the Domain from the drop down for http://www.mysite.com and give a profile name that suggests it’s the filtered version of your data.
  3. Select continue.
By creating a filter we only collect data from our specific domains.

By creating a filter we only collect data from our specific domains.

This sets up a second profile that uses your original GATC – not a new one. So any data collected moving forward will collect in BOTH of your profiles.

If you are doing this to a site profile that already contains data – be aware that the second profile does NOT pull the historical data. While it is a profile that uses the same GATC it is not a duplicate. Any previous filters, reports or goals are NOT included in this second profile – you’d need to add those manually.

The filter works only on stats collected moving forward. So the goal for this second profile is to only include web traffic from http://www.mysite.com, and http://mysite.com. What we want to exclude is everything else. Excluding the chaff from development environments and different domains was easy – subdomains prove a bit trickier. But we found a filter that seems to work for these purposes.

Adding a Filter

  1. From the home view that allows you to see your Web profiles listed, you’ll want to select Edit.
  2. Scroll down to Filters Applied to Profile and click Add Filter. Give the filter an intuitive name such as “Only www.mysite.com traffic” or some such. Under filter type select Custom Filter, Include.
  3. Under Filter Field select Hostname.
  4. Under Filter Pattern we’ve used the following reg ex: ^mysite\.com|www\.mysite\.com The caret tells analytics to ignore subdomains, then we add an ‘or’ that adds back www.mysite.com.
  5. Now note if there are any other subdomains that you WANT to include in this profile such as blogs.mysite.com, you would want to add that at the end after a | (pipe). So any additional subdomains you WANT to track should make the pattern look like this.^mysite\.com|www\.mysite\.com|nameosubdomain\.mysite\.com“What kind of special characters can I use?” gives a more in depth explanation of the characters used and other filter options.
  6. Case Sensitive – No.
  7. Save Changes.
By creating a second web profile we have a safe place to apply filters that won't effect your data.

By creating a second web profile we have a safe place to apply filters that won't effect your data.

It takes at least 24 hours for this profile to show data, however it begins collecting data immediately. Depending on the speed of setting up the filter, you might get some traffic from other domains. But the majority should be just from the domains you specified.

This is Great But What About My Historical Data?

GA does allow you to view your data by Hostname and it also allows you to create custom reporting. While this may not solve all of your problems it can give you insight to specific questions. In the scenario presented by our client they had numbers on one of their goal pages that was higher than the number of completed e-commerce transactions. By doing the following they should be able to view the page and exclude numbers from different domains.

Viewing by Hostname

  1. In your original profile that contains all data (including historical data) navigate the following in the sidebar:
    Visitors/Network Properties/Hostnames/
  2. In this case we’re interested in the numbers of unique visitors to our goal page from both www.mysite.com and mysite.com.
  3. Select www.mysite.com to view the details.
  4. After clicking the domain, use the dropdown next to Dimension to select Landing Page, locate the name of the goal page under the listed pages. You can narrow the time frame to only select the days you’re interested in.
  5. You’d need to do this again under mysite.com, and then add the two numbers to get an overall view of the goal page data.

Another way to do this that might be helpful should you need to refer to this data again in the future is to create a report.

Creating a Custom Report

  1. Click Custom Reporting in the sidebar, then in the upper right of that page, select Create new Custom report.
  2. The one I created I titled “Pageviews by hostname, page and day”. Give it a title that means something to you.
  3. Then under Metrics, select Content – I chose Unique Pageviews but select the metric you are interested in tracking. Drag it over to the blue box.
  4. Under Dimensions you’ll choose three:
    1. Systems/Hostname – drag over to first subdimension box,
      Content/Page – drag to second subdimensions box
      Visitors/Day – drag to third

    I’m not sure the importance of order here, I think it allows you the drilldown so if it makes more sense for you to pick the day before the page then you’d probably want to switch the order on this.

  5. Save the report and then you should be able to click on this under your Custom Reporting anytime in the future. You will still need to add the two numbers together from your two domains, but this shows you a day by day break out as you click to drill down into the numbers.
Custom reporting doesn't permanently affect your data.

Custom reporting doesn't permanently affect your data.

This may be useful to you in case you don’t want to add the filter, or you find this is a better way to view historical data for comparison. You could essentially do both – since the filtered profile is separate from this one.

While I looked into a good portion of this on my own, the idea of creating a second website profile and applying a filter that just pulls traffic from your site was only one example from a chapter called “Best Practices Configuration Guide” from Advanced Web Metrics with Google Analytics by Brian Clifton. I would highly recommend this book to anyone who wants a more thorough understanding of what GA can offer.

Note:
This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

Going to conferences, if they are good, fills me with moments of euphoria. And at the recent AEA in San Francisco, I had that experience while listening to a talk by Liz Danzico. I’ve always been fascinated with the idea of emergent properties. For all that you can say about Web 2.0, the API libraries and frameworks have provided the catalyst for this wave of individual innovation: Be it something as simple (from a user’s perspective) as co-opting your Twitter feed to post to your Facebook account, or some other “mash-up” utilized by a developer on a published site.

In Liz Danzico’s talk, she used the analogy of Miles Davis’ innovation of modal jazz and its use of musical modes as its framework. Some would say agreement on any framework is the important part (be it chord progression or modal sketches) but some frameworks allow for greater innovation, or as Davis put it “creative instability”. In her discussion she focused on websites as frameworks (not the more literal translation of Ruby on Rails, Django or CSS frameworks). We as web developers provide the user, a framework for innovation. In our shift to user created content we’re providing the playground for interaction, not static environments. This requires the use of smart defaults to encourage participation. Her example of the discrepancy between organ donation adoption in the US vs. Europe “ being that while both countries support the concept, Europe’s adoption of close to 95% (and ours of around 10%) – is due to an opt-in versus opt-out default.

Danzico went on to compare smart defaults to the “Yes, and” context of Improv. In the one painful improv class I took, I learned quickly how difficult it is to perpetuate the flow of dialogue. You have to always respond in the positive or innovation is shut down, and the sketch grinds to a halt. In this move from static content to dialogues between users, we are seeing (what Danzico quoting Alex Wright’s observation in Glut) “a resurgence to a kind of oral tradition.’ While we’re publishing blogs or tweets, we’re less publishing and more talking. She went on to discuss the importance of paying attention to your users and their expectations. The use of Crazy Egg and other eyetracking studies are web versions of “desire paths”. We’re observing where users want there to be interaction or result.

User-centered & participatory design are too focused on design – not on design in use.
-Liz Danzico, AEA SF 2008

On a recent redesign that I worked on, we were armed with the data from Crazy Egg, and were able to see that most users click on the large images of products, even if they weren’t tied to a product description. The desire to just go there and see that, even if I don’t know what it is – was strong. We proceeded to build that into the site, making even those images that are more visual decoration, links to the actual product it’s a picture of. Danzico stated that user-centred and participatory design, involve the user in the design process but it still differs from their actual use.

In reading a recent article in Wired on the English language, it discussed the fact that

By 2020, native speakers will make up only 15 percent of the estimated 2 billion people who will be using or learning the language.

-Michael Erard, in Wired

It reminded me that while as developers we’re creators of a website framework – we can’t always control the syntax used within our mediums. We provide ways cross-purposed content can be cited. Such as the “posted via” an API, source when listed in an application other than it’s origin. (It will be interesting what these items will say when we achieve “ubiquitous computing” ) “ I hope to god locations stay vague and we won’t have examples of my tweets being “posted via BathroomWall”.) And while the Twitter Facebook app won’t post your @username replies from Twitter, it will post your mentions of friends @username in the body – a context specific syntax that has ventured out of it’s intended venue.

You can see the change history of the application in reviewer’s posts on the Twitter Facebook application reviews.  One example is that the way a tweet is viewed on facebook changed from [Name] “is Twittering” to [Name] followed by update. User’s have noticed some of the things that work and don’t work due to the cross-over sytnax. Some of the comments taken from the Twitter reviews:

Different purposes, different syntax
Twitter allows me to post freeform commentary. It’s more of a personal narrative. Facebook status is more rigid and defined syntactically, i.e. User is [Tweet]. When my tweet comes over it reads [User][Tweet] and it doesn’t parse correctly. One way from Facebook to Twitter would be great.
-by Paul Fu Jr at 8:20am on August 31st, 2008

Didn’t meet my needs
I wanted an application that would pass all my Facebook updates to Twitter, but not the reverse. The reasoning behind this is that: 1) All my Facebook updates are suitable for Twitter audience, but not the reverse. 2) Twitter replies are out of context and look awkward in Facebook, especially for FB users who haven’t even heard of Twitter.
-by David Soul at 12:40am on August 26th, 2008

I wonder how long before we see a Facebook to Twitter post, and what developers/designers create to further meet the needs of their “cross-platform” users. Or what syntax will evolve in the next few months, much like the English language over the next decade, as users’ take matters into their own hands and create their own cross-application syntax as messages widen past their mediums.

I’ve always been asked, “How best do you learn?” And it’s such a tricky question. I’ve gone through times when I can pick up a book and (I’d like to say burn right through it gleaning all of the famously pertinent information, and devouring it from cover to cover!) – actually it’s more like, I devour it rapidly for the first 40 pages. And then my interest peders out, and chances are good, I rarely if ever venture to use what I’ve learned other than the few samples attempted as coded in the book. The other venues for learning – the ones that happen daily – are more of an “I can’t get this shit to work”, variety – and is a sloppy combo of trying something, it not working, and seeing who else has run into it, trying more things, till I invariably learn something and/or fix it, not necessarily both as is sometimes the case with CSS and browser specific issues.

The other times I’ve felt truly engaged in learning has been in class. I’m not talking about the classes I drug myself to as a 20 something undergraduate. There were quite a few of those that had value. That I will never forget. For one the Belgian TA who taught me how to write. And I had always gotten A’s in English – written well – but this woman took the gloves off and truly taught me a lot about writing. None of it evident here, of course. I’m sure she’d thank her lucky stars that I can’t remember her name. But the classes, strangely, that I always loved, were math. In grade school, I moved from New Mexico, which must have been one of the crappier schools in the region to attend Notre Dame catholic school in California. My math skills were abysmal and I had to bust ass just to get up to speed. But it seemed like with the struggle came the fascination. I started spending my time in the math room at lunch. Don’t get me wrong – I could have done other things! I actually CHOSE to be a social parriah. Or so I tell myself. But I enjoyed going into Ms. Williams’ class at lunch. Then Mrs. Anderson’s. And later in my second round of college (post-bachelor’s dalliance with returning for a computer science degree – that I never got!) I found myself in the office hours of my calculus professors.

There was something about being in a group pouring over the problems that didn’t quite make sense, or sharing what you’d figured out – that made the environment – one that some would consider a punishment – fun. Recently, at work, I’ve rediscovered this environment. It’s not quite as fun as the few programming classes I took in college. We don’t do anything that in depth, and it’s not as nerdy as a daily math commune in the lunchroom. But we’ve started, as a group, reading Jquery in Action. Simple sliver of a book. (Note to self, one way to finish a book is to pick smaller ones. Brilliant!) Jam packed with relevant doo-dads. I’m only on Chapter 4. Been doing a chapter a week, which would seem penny-ante. But that’s more than I would have read solo. And I’m actually applying it. Simple stuff like adding classes, adding event listeners, etc. Which I could have done with a simple getElementById, onmouseover etc. But it’s so much simpler. I have to know so much less, to do so much more. It’s really powerful.

So the technical book group is my new best friend as far as learning tools go. I’d really recommend it.

Well this was actually what the “What I’ve Been Up To” post started out as, but it felt weird posting a reading list after being gone for so long. So… I was going to update my links section and realized, I’d been reading a lot lately, but couldn’t figure out what. I’ve been reading on line as needed to solve problems: inDesign tutorials, the occasional visit to Veerle’s blog to see what new shennanigans she can show me in Illustrator, or trying to figure out how to keep from getting this one error when experimenting in ActionScript 3.0 (very small and unexciting experiments – hoping to go into more detail when I actually GET somewhere!) But the majority of my reading lately has been in… get this: Books.

I finally gave myself the ok to spend money on books. I used to have them at my old job – resources that belonged there that I got used to having, or just the new book on a certain thing we were learning. I never owned them myself. Or if I needed, I could order them from the university library – ahh…. the things we take for granted!

And upon moving here, I’ve been pretty limited since Felipe needs the car for work. So my adventures are relatively limited. I’ve been riding my bike to work and not venturing too far into social or geographical newness. But I do have one place I absolutely love. I’ve frankly, been geeking out by going to my safe place: Powell’s Technical Books.

It’s akin to IKEA, Home Depot or Costco in that there must be some unwritten law that assures you don’t get out of any of those places for less than $100 per visit. By the way, I think it important to add, that while I’m in dire need of a haircut, I’m reluctant because it will be so expensive – and here I go and blow… well you get the point.

So since I’ve been here I’ve picked up:

The first buys were Bulletproof Ajax and Transcending CSS: The Fine Art of Web Design. I had borrowed a friends Transcending CSS and it was a must have. Although it later led to buying CSS the Definitive Guide 3rd Edition. I had the 2nd edition, but there were some references in Transcending CSS that I didn’t get the point of: some of the attribute selectors that I’d not used before, and didn’t at first understand the uses for. My initial thoughts when I saw something akin to p[class="rant"] was why you didn’t just have p.rant and do whatever the hell you wanted. But then realized that the rant class could apply to anything, applying one type of style, while a paragraph of that attribute could be styled upon even further. And div[id=content_main"] vs. just #content_main allows that you could in one page (given IDs should always be one per page) you could use < p id="content_main" > but in the pages where that style is applied to a div, it behaves in a specific way.

Not sure anyone cares, but in the new world of touching pages that I didn’t write and don’t always know how a certain class is used throughout the site, these might afford me some power.

The ‘new’ job, I shudder, as it’s been 6 mos already! Has pushed my envelope in the marketing areas. Who knew I was a fount of inspiraitonal copy? I made a web banner the other day. One of my first. It had to be an animated gif! So it was almost as though I had to go through the evolution of the web in my learning process. I think I’d made maybe 1 animated gif in my life. And was right proud of that fact. Flashing things unless they are useful in specific ways tend to piss me off. But I think I managed to make a relatively tasteful one here (especially since I’m catering to some with a predilection for flashy). Not going to win any design awards soon, but at least I was able to work in Fireworks more than I have in my life. And it wasn’t the last time.

I’ve also been pulled to make some print work. Which I’ve really enjoyed. They spent a large sum on a postcard campaign targeting interested students and alumni. I was called on kind of last minute to do the design. So I got to learn inDesign in a rather rudimentary fashion. (Shout out to Noah who I made sit me down briefly before I left ASU and show me a few tricks.) I hope to get some screen shots into the portfolio soon.

I was also called to work on the catalog. To redo the cover. I literally did it in 4 hours. And honestly, I wish I could just redo the entire thing over and from scratch. But I have a deadline fast approaching for something else, and oh yeah, I have this other part of my job I seem to never have time for: curriculum design for the Master Program!

But that should explain all of the inDesign purchases!

So much for a quick entry on what I’m reading! Needless to say I’ve read a few chapters in about each of these. So Jill of all trades and master of NONE! But it’s fun, and while more expensive than a haircut, ponytail holders are cheap.

Oh and when not reading this, I’m trying to finally finish: A Confederacy of Dunces, which I always vowed to read because the title was brilliant.

In a nutshell:

The past few days have been filled with intermittent attempts to focus on “the art course.” It’s been a busy transition from Spring to Summer session. I’ve been working on getting the nav panel on the right to use innerHTML to embed the Quicktime movie (there are over 70 of them) that comprise the professor’s lecture and various slides. As an aside and a bravo to my co-worker, the slides/movies are beautiful. The sound is high quality, and the images brilliant. And you don’t even notice this because the lectures, frankly, are THAT good. I literally intend to take advantage of my position and listen to everyone.

Here’s what this might end up looking like:

Quicktime

How it’s coming together

I say “might” because I will most likely change the image used to link to the iPod Video. I was looking for something that was “standard” but it bothers me that the icon suggests some type of rss feed, or cast. And that’s not what this is. Eventhough I took this from a site that specifically made icons for such a thing. I will most likely make a little mini Icon of an iPod. Assuming that’s legal!

Other than that. It was quite a struggle getting the JavaScript functions to work. Mostly because at first I was trying to make it too difficult. Using the code suggested by Apple that takes parameters and then on a trigger generates the code in the current area that embeds the movie. This would be fine, but I wanted to place the movie in a div other than where the javascript trigger was occurring. And I wanted it to happen without reloading the page. This added to the complexity.

First I tried using onclick of the link in the navpanel on the right and use innerHTML to insert the function into the div to the left. The function would execute passing the parameters and generating the embedded Quicktime object. But JavaScript functions are not executed with innerHTML. So back to it.

I tried looking at rewriting some of the Apple functions, but decided that given none of the parameters for the movies were changing – I could just work on using innerHTML to write the code directly and bypass the functions that account for a myriad of possible parameters. Simple enough. So I’ve got that working. However, thinking that the script was small enough to include in the header of the page, I placed it there. Then realized that it HAD to be in an external .js file thanks to the issue with ActiveX now requiring a user to hit OK to authorize it’s use. So external .js it is. I’m currently experiencing a strange flicker when the movie is loaded in IE. Doesn’t occur in Firefox on PC, nor on the Mac anywhere I can see. I may try to use DOM manipulation to see if that somehow solves the issue.

The other issue I’m having is with the navpanel. I’m using the Rico library and their accordian affect for the drop down menus. However when the browser is being taxed (usually in the playing of a movie) if a user clicks on another header, it moves very slowly. Not sure this is acceptable. It’s not HORRIBLE, but it occasionally annoys me, so am guessing it could have a similar affect on at least a few of the students. I have to try it from home or in the labs. The other issue is manipulating the height of the pane. According to documentation you can pass the variable. I’m having no luck. Tried altering it directly in the library function as well. Will try looking on the forums tomorrow, and if that yields no results may just opt for a different scenario.
I think that’s all the news that’s fit to print!