When CityEats.com by the Food Network begun it was treated much like a web site. I had inherited the front-end code from a truly talented dev I’d worked with before and respected. But the site had pivoted over the past 2 years into a multi-headed web app. Originally a Groupon competitor, it had gone through several iterations, landing more recently as an OpenTable competitor. It was in sore need of optimization and restructuring to aid desktop and mobile render speeds.

This post describes how I used Rails manifests to approach this restructuring, and reduced the initial homepage CSS foot print by 40% for desktop, and 23% for mobile. For the sake of brevity, I will round up file sizes.

This post also targets the homepage, but similar reduction across the site were experienced.

The Numbers

  • Desktop before: 74 KB, after: 29 KB
  • Mobile before: 496 KB, after: 114 KB

Whatever, show me.

I don’t care, why or what, just show me the code.

The History

There were certain assumptions made when the site was designed. It resembled Apple.com, at the time, in how it loaded it’s CSS and JS:

  • It pulled all of the CSS for the entire site on the homepage.
  • Mobile pulled all of the CSS for the desktop, and then applied mobile styles via media-queries

The latter was done, as it was decided, in tandem with the product owner that:

  • we didn’t want to spend extra time developing a mobile version, and
  • chances are it was faster to apply a bandaid to the original styles than to write mobile styles from scratch, or
  • have a duplicate but similar set of styles that would have to be maintained separately.

It quickly became apparent, that the styles for mobile on a good portion of the pages, were radically different, and when styles changed on the desktop often the product owner wanted mobile to remain the same.  So mobile became bloated with copied sections of old desktop styles, and more effort was put into maintaining a separate look while over-writing the desktop redesign.  Short story – it became a mess.

It also became apparent that the approach of downloading all of the CSS on the initial homepage hit wasn’t necessarily good for mobile speeds, nor the speed of the desktop homepage.  The original focus was to speed up the homepage, and limit that initial file hit. (A separate task involved spriting all images into a single file using Compass – but that’s another post.)  My goals were to try and find a way that we could cache what needed caching and pull only the files needed on the individual pages, and this, potentially would have a trickle down benefit for mobile.  My strategy became to find a way to separate groups of pages, and isolate some of the larger pages in the user flow – so that no one page pulled gobs of CSS that it didn’t use – but that we utilized caching when possible to speed up rendering. Some constraints that we faced:

  • Files were currently split somewhat ambiguously into 3 files. The reason for this was that I found an issue in IE when releasing our switch to Rails 3.0, and the asset pipeline.  Originally when I inherited the site it was making 8 HTTP requests for various CSS files (fonts, reset, global, public, and various vendor stylesheets). When switching to the asset pipeline, we went from 8 HTTP requests to 1 and quickly hit the stylesheet limits in IE 6-9 which basically stops parsing/rendering CSS at a specific selector per sheet (4095) in the CSS.
  • We weren’t going to do a deep redesign or refactoring of the CSS (to say responsive) as there was so much of it and we literally had one sprint to get something in place.

So what I settled on was keeping the 3 HTTP request.  I feel in some ways this could at some point be reduced to two.  But what I settled on was a default-base.css, a default-module.css and a default-page.css.

  • default-base would house reset, fonts, and global styles applied to all pages of the site.
  • default-module would house OOCSS for items used in multiple places (not all) in the site (review form styles, vendor styles)
  • default-page would house page-specific styles. The default would house those styles that applied to the smaller static pages. Everything else would be broken out into specific areas or pages. For example, the user profile area had it’s own file that addressed multiple pages, but the restaurant detail page, would pull CSS just for that page given it had a larger footprint.

This approach allowed us to overwrite the module manifest (this was decided to be overkill, given its footprint was pretty minimal) or page level manifests as needed.  The focus for this iteration was to tackle the page level.  In theory this would allow us to ditch the page-level ID that was applied to the body for each pages’ hook (necessary when the styles are in one file), simplifying CSS parsing – a further advantage.  The cons, we would need to maintain multiple manifest files for various areas/pages of the site.  Currently this meant maintaining separate manifests for each page or area.  I didn’t feel this was a disadvantage. I pitched it to the other 4 members of my front-end department, and my partner on the team and they felt this was a decent tradeoff.

The Code


-# stylesheets
- @base_css ||= "default-base"
- @module_css ||= "default-module"
- @page_css ||= "default-page"

  = stylesheet_link_tag @base_css, :media => 'screen'
  = stylesheet_link_tag @module_css, :media => 'screen'
  = stylesheet_link_tag @page_css, :media => 'screen'


If supplying an over-ride in the view do the following, otherwise default would be pulled.

- @page_css = "page-restaurant-detail"


*=# BASE
*= require_self
*= require reset
*= require sass/global
*= require_self
*= require sass/unbranded
*= require sass/reviews
*= require sass/pagination
*= require jquery.rating
*= require sass/jquery.tools.scrollable
*= require chosen
*= require sass/vendor-overrides
*=# page level CSS
*= require_self
*= require sass/public

Page level styles

This is an example of what would replace page-default.css as needed.

*= require_self
*= require sass/page-restaurant-detail

The Results

Of course I didn’t record my findings when things were fresh in my browser, so I had to cull together several screenshots I’d taken when I was analyzing the file sizes, and also fire up the current version of the mobile site, to see the current state of the site. Also note, in the two versions of the desktop, one is showing the New York metro, and the other is showing the DC metro. But the styles pulled for both are the same. And I’m not looking at parsing, or render times – just file-size to keep apples and apples here.

File sizes before any optimization was done, but after Rails asset pipeline.

File sizes before any optimization was done, but after Rails asset pipeline.

After refactoring was applied, isolating HP styles, caching global and vendor.

After refactoring was applied, isolating HP styles, caching global and vendor.

This shows the file size pulled in the mobile.css file. It's pulling all of desktop and mobile on the initial HP view.

This shows the file size pulled in the mobile.css file. It’s pulling all of desktop and mobile on the initial HP view.

This shows the CE site today, 3 HTTP requests, but only pulling what's needed and caching globals.

This shows the CE site today, 3 HTTP requests, but only pulling what’s needed and caching globals.

Wow. It seems a cruel joke you had to spend your second month’s birthday getting shot up with vaccines that made you one rather cranky baby. The day of you were smiling and laughing, but then as the day wore on they took their toll and the only laughing you did was when you were falling asleep with exhaustion. And that, I have to say, was one of the sweetest things I’ve ever seen. You literally laughed out loud twice like you were some cosmopolitan twenty year old who just heard a funny joke.

Today we were stuck together like glue, and I literally laid down with you asleep on top of me for about 2 hours just to give my back a break. You were at least for the most part, consolable, although papa and I did have a bit of a go with you tonight.

Nothing will come close to seeing you scream as you got your 3 shots. Unrivaled in the “REALLY? I trusted you assholes and you do this?!” fit department. Papa walked you around the house last night planning your revenge on the nurses. You know papa. Quiet, reserved, incapable of hurting anyone, carrying you around on the usual tour of the living room to “kick” the plants: “We’ll get that bitch. We’ll wait for her, jump her, and then kick her in the brain.” You know, the usual things you’d say to an infant. And continued to discuss the involvement of the Mexican mafia, a baseball bat, something about steel toed boots, and some concrete blocks.

We’re planning a lunch to have some folks over to meet you. So while I held you today (since you refused to be put down), Grandma, Grandpa and papa – we all finally put the decals on your wall that PK so generously gave us at your shower. We’re looking forward to showing off how you can hold up your head, smile, laugh, coo up a blue streak when folks talk to you, and punch and kick the air like nobody’s business.

In our whole new experience together I’ve realized new levels of patience. One of my fears of being a mother is that I have a relatively short temper. I don’t necessarily blow – I just get really annoyed really fast and worried I wouldn’t be able to sustain the level of kindness needed with a baby. But it seems to just come. (Don’t get me wrong, I’ve had frazzled days where I have to call in reinforcements for a break so I don’t lose my sanity.) But unlike any other time, I’m able to just look at you and dig deep – take the deep breaths and remember that you have no idea that you crying at the top of your lungs breaks my heart.

I think you must also be one of the sweetest babies alive. In the mornings sometimes I sleep with you on my chest after the last feeding, and you grunt or growl if I move or even think of getting up. But when your fed and changed, the mornings are some of the best times. You smile incessantly as I chant “sugar pea, sugar pea!” and do the announcements for your welter weight boxing matches. “…and in this corner weighing in at 12 pounds, we have Sugar Pea Montoya!” Sugar Pea is my favorite name for you, although you’ve got many. Papi and I call you “nena”. Momma calls you “widgel” (cross between widget and who knows what else), “noodge” or “noodger” (because you’ll nudge anyone’s face for food), and “ninya” (phonetic spelling as I’m too lazy to find the tilde).

I’m really thankful that I get to spend every moment with you. I’m with you constantly it seems, and when I’m away from you for even an hour I think about you and how you’re doing. Papa and I went to a movie – and it was the first time I felt comfortable leaving you with Grandpa and Grandma (not that they’re dubious caretakers, it was just a big step to leave a bottle and go off.) And Papa and I went to the Living Room theaters and watched Alice in Wonderland in 3D. It was one of the first sunny days (I tried to talk Papa into a hike or a bike ride – but you know how he loves his movies), and a friday – so we had the theater all to ourselves! We ordered food, drank cokes and ate Swedish fish. It was an awesome time. And partway through the movie I wondered if the day could get better. And then I remembered I would get to go home to you after, and I literally felt giddy.

Your first few months have had a lot of outings. Other than completely losing it when I tried to meet Annie for coffee (this set us back in the outing dept. for a while), you went with me and Grandpa to McMenamin’s Edgefield for a burger and “beer”. You were amazingly good, I couldn’t believe it. You sat on momma’s lap while I hooved a burger and had a sip of grandpas beer, tolerated a diaper change, and then rode around in your stroller while we looked at the gardens. I think we might be able to win some kind of award for being in all of the McMenamins’ by the age of 3 months, as the next major outing was to see Green Zone at the Kennedy School Momma matinee with Grandma and Grandpa. We ordered pizza, and you slept through war scenes in Iraq and the sound of gunfire. Only to stir when two twins couldn’t stop crying. You growled at them like “Shut your yaps, you babies. I’m trying to sleep over here.” Meanwhile, land to air missiles are being fired, and Matt Damon is shouting commands to his troop at the top of his lungs. You woke up, ate, got a change and slept all the way home. It was madness.

I keep meaning to write about your birth. But these things still ring true now. When I look at you sometimes my heart literally aches. I can’t think of a time I’ve ever loved or cared for someone more. The first few weeks I kept thinking how they just hand these kids out to anyone – the proof of it being you! And how it would seem there should be some more complicated/qualifying test you have to pass before you’re allowed to have a child. It blows my mind that I have this person – this new person we made – that depends on me to care for them, and the weight of that makes me truly want to rise to the occasion more than I’ve done for anything else before.

When we were in the hospital, I was recovering from the c-section and the blood loss, and daddy was up with you, taking care of you while I slept. He’d wake me every two hours to feed you. For the first 3-4 days of your life, papa learned how to change your diapers, swaddle you best, comfort you and ultimately cared for you when I couldn’t. Your care was the most important thing to me. I cared only for my own health in that I wanted to get better so I could feed you, and give you the love and contact you needed. (The anemia meant I might have/and did have difficulty with milk coming in and the thought of you not getting what you needed was a stress that was really tough to bear.) Other than for a few hours at night when daddy could get you to sleep, you were held pretty much nonstop since you were born thanks to momma, papa, grandma, grandpa, and Phoebe and Tyler. Sometimes I’d look at you and cry with joy (and an overload of hormones coursing through my insane new mother body) that we’d all made it through everything ok, and that you were happy and healthy and with us. Finally.

Well it feels like the first day on the new job. I’d like to say that I don’t normally wake up at 2:30 a.m. but that seems to be more the norm these days, not the exception. The difference, however, isn’t waking up thinking about CSS, or what task I need to do tomorrow on a particular website. This time, it’s with this feeling of “What is tomorrow going to bring?” It is unofficially my first dedicated day on the new job, and as spaceninja says – this new employer doesn’t really give you time off.

I’m still trying to wrap my head around not having a job. Since I can remember I’ve always had a full-time job. Not to piss off stay at home moms out there – I do understand it doesn’t get any fuller or full-time than being a mom. But identity-wise for me, I’ve always worked as a front-end developer. And now after 10+ years that’s not the main thing on my business card. I’ve worried about how it will feel to not have that as my main identity. Which is weird because it’s not like I was a huge evangelist, or a particularly active voice in the web community. But at my core, that’s really what I’ve been the longest. So this new role is a tad daunting, to say the least! And frankly I don’t know how I feel about it yet. I think I’ll really miss it. The last two years working surrounded by developers has been a treat and made me realize that I need that. I enjoy being around them almost as much as I’ve enjoyed having seriously top-notch designers handing me comps. The environment of collaboration around a technical and aesthetically enjoyable task is one I think I will seriously miss.

I didn’t realize this until I took briefly, prior to Pop Art, a job where I was the sole web/technical person. The people were wonderful, but I felt lonely! I missed the challenges, commraderie and problem solving you only get when working on a project that requires more than just you to pull it off. So there’s a part of me that’s a smidge worried about this new horizon. Especially since, as a shock this may be to everyone, I haven’t quite embraced myself as a mom yet.

This came as a bit of a surprise to some of my birthing class cohorts, as I sat there with my belly protruding out into the middle of the room. One woman said that she felt like a mom from day one because she had to now think of another person before she ate or drank something, or did something as simple as cross the street. And I get that – I have that now too. I had this weird moment the other day on my way home – new bus stop that means my short cut for getting home is crossing active train tracks. After a really long night, I got there just as a train stopped on the tracks in front of me – barring my way. I could have easily walked behind it – and my unpregnant stupid daredevil self would have just booked it. But thinking, wow how stupid would it be for me to get backed over by a train after 36 weeks of not eating rare meat or nitrates? I turned around and walked a seriously long way out of my way to get home.

So I get the thinking of another being thing. But I couldn’t help but note – this was said by a woman who was going to keep her job. And while that definitely has it’s own sacrifices and challenges that I completely respect, I think it still allows you this piece or facet of who you are to remain. That said, choosing to eat better, exercise and make choices for an unborn child, for me is slightly different than having a new helpless person in the world who is solely dependent on you. Being pregnant is a package deal. Yes you make choices that effect another, but in a way you don’t have a choice. It’s not like you can put it down and walk away. It’s always with you. As a mother – as a parent – I think you make choices everyday. You prioritize your life in a certain way that’s different than when a child is a part of you. And that’s the great unknown for me.

I’m not sure I’m really expressing the weird fight in my head over my identity. Work has really always defined me, for better or worse. It doesn’t mean I’m particularly good at it! It just means that’s the one constant I’ve had in my life that has been a part of who I am. And I know that I don’t have to stop that. I can continue being active in something that I enjoy – that’s a part of me. But I’m realizing that I’m laying down that mantle a bit and picking up this unknown definition of who I’ll be. That feels as foreign to me as ice fishing. I’ve fished before = I’ve held babies before. So I should be alright, right? Uh huh.

Not that I’m mortified. I’m somewhat ready. And excited. I’ve fed fantasies about this life for literally years. And honestly – I didn’t think I’d be lucky enough to stay home with my kid. It was a recent realization that we might be able to pull it off – with some sacrifices of course. And that was something I’ve always wanted. From the time I knew I wanted to have a kid, I knew I wanted to stay home (not to say I’ll want that in another 3-6 months! I honestly don’t know if I’ll be able to hack it) and be the one to witness it from the get go. But the reality of life – at times being the bigger bread winner – seemed to mean I wouldn’t necessarily get the choice to stay home, and that if I chose to have a child it would be with that big compromise. Which was really a hard choice for me. But as my child bearing years began to wane, it seemed worth any compromise, and we jumped in with both feet just hoping it would turn out!

Things of course have changed. I’m no longer the primary bread winner. While we have counted on both of our salaries, Papi is taking on more so that I can stay home. It’s a decision we’ve both made, but I have to say I slightly worry about how much he’s going to have to work, and how much I’m going to have to take care of household things. Kind of blows my mind how I’m looking at a June Cleaver life. I know it doesn’t have to be that, and unless June dropped a lot of f-bombs, I’m sure it won’t be. But it’s sure different from agency life and a bevvy of deadlines.

The one thing procrastination and cramming prepared me for in college, seemed to be life in an agency. The self imposed turnaround times seemed to jive completely with the “Wait for it.. wait for it… ok… now GO!” mentality of last minute pull-it-off-ness that sometimes defines work at an agency. I’m not sure I’ll miss that! However it doesn’t mean that I’ve solved my procrastination streak, and I wonder how this will serve me in my new role. “Sorry kid, we’re walking home from the hospital because I didn’t get the car seat installed in time. Yeah, I know we live in Milwaukie.”

That said, in theory I have another 2 weeks to prepare for her impending arrival. I hope to fill it with walks, naps, reducing my cankles with legs-up-the-wall yoga poses, preparing the baby’s room – even though for the first few months at least – her room will be our room, and the otherwise general preparing of laundry washing, car-seat installing, purchasing last minute unglamorous items that no one will give you at a shower – like diaper pails and breast pumps.

I don’t know that this will turn into a “mommy-blog” but I do think it funny that the first time I really write about being a mom – is the first day I’m not something else. And the floundering feeling that’s left me. I left work today thinking about how I moved to Portland with a goal to some day work for an agency. And now that I have, and it’s been this crazy whirlwind of job-getting-changing, house selling-buying, remodeling and now pregnancy – I had this weird anti-climactic feeling of “Oh god, now what?”

And then I smiled really big because I don’t have to go to work on Monday, I don’t have a newborn yet, which means we can still go out to dinner! So Papi and I packed it off to try a new place as we’ve been doing these days. Whooping it up, if you will, before we’re struck with a demanding infant. We tried Papa Hadyn. Papi insisting on the risotto. His quest to find one that rivals one he had at a restaurant we wish we could remember the name of, in of all places, Scottsdale, AZ that someone had given us a gift certificate to. It had turned out to be one of the best things we’ve ever put in our mouths. Being his first and only risotto, the bar was cast unusually high, and he’s been looking to recreate that experience ever since.

After a mediocre mixed green salad and riding the heels of his disappointment in a lumpy, dry and possibly undercooked risotto, I had to hold back rubbing it in too much by visibly enjoying my Muscovy duck. My own stab at a description – seared duck over wine infused chard and trumpet mushrooms lying on some of the softest gnocchi pillows I’ve ever put in my mouth. Now granted – I’m a pregnant lady – who dined on warm Coffee Plant pastries (yes, note that’s plural: molasses ginger cookie AND blueberry coffee cake) at 10:30 a.m. this morning – which served as lunch as well. So I could have swallowed a small piglet in one gulp, not chewed and claimed it the best thing to ever put in my gullet. But seriously how do you go wrong with a form of crispy duck skin. How?

However the real, and most likely only reason, we were there – other than it’s nearby and we’ve never been – is that Papi is a dessert hound, says the woman who ate confection as a meal not 8 hours previous. (Just an aside, I do feel slightly bad for pointing at my swollen ankles this morning when the midwife raised her eyebrow at my most recent weight gain. Ok, maybe it’s not ALL water weight. But if you’re going to have to suffer sudden onset of cankles, there should be some perk, right?) He ordered the Cassata a “Kahlua and espresso-soaked sponge cake with bittersweet chocolate-ricotta filling”. It was served with raspberry puree and chocolate. Thankfully we split it. And it was the cherry on my day.

Papi and I have never been the romantic dinner couple. But tonight and our recent night out to Ken’s Artisan Pizza, have kind of ignited that for us. So I waddled out of there on a cloud as a pensive mother to be, no longer gainfully employed front-end web developer glad to have someone I love to take me out to eat.

What is a user story?

Stemming from agile software development, user stories are used by the customer to concisely convey what they need in their site or software. In only a sentence or two in the language of the everyday user, a user story describes a solution requirement. While they can be a by product of in-depth requirements gathering process, their use can replace extensive documents on smaller projects.

No really, what is a user story exactly?

While there has been some discussion of how user stories should be structured, we here at Pop Art derived a pattern similar to this one that states:

To <achieve some value>
As a <role>
I want <some feature>.

In this version the value of the story is placed first, and yields a bit more importance than the role or the feature. The object of a user story is to state in simple terms specifically what the product needs to provide, without branching out into how it should be designed, what the user interface should look like or in what language it should be developed.

Recently we wanted to better streamline our QA process here at Pop Art and create a piece of software that would better help us list and track the completion of all the needed tasks to assure we deliver a high quality solution. Some of the user stories written for the development were:

  1. To avoid overlooking common but important tasks on large projects, as an employee, I want a centralized checklist of our collective knowledge.
  2. To identify the amount of remaining checklist items for a given project, as an employee, I want a view of the entire project checklist display the status of each checklist item.
  3. To improve the value of the checklist items over time, as an employee, I want to insert, update or delete checklist items at any time.

These user stories don’t describe how the user clicks here, or on which area of the site they do what. From this document it is actually difficult to tell that the solution is to be a piece of software. The focus is placed on the value needed and the business tasks that need to be achieved.

How are user stories used?

When I worked off-site on a large software project that spanned several months, user stories were written on small 3×5 cards. I suspect the process of arriving at these small nuggets of information was tedious. It took several stakeholders, pouring over gathered requirements from all of the various areas this product would touch – business/marketing, legal – and the various types of end users.

From large amounts of data, they were able to work with a developer/project manager to determine which user stories would be worked in which order throughout this large agile project. Once priority and time-line was established, each user story was then broken out into a series of tasks for various areas, like design, programming, and front-end development. Each of these tasks would span a short two-week period or a “sprint”. This allowed each of us to focus on what we were to accomplish without losing the larger focus of our overall goal. At the end of two weeks, the stakeholders would then test and view pieces of the software assuring that the requirements for that particular story had been met.

What can user stories do for me?

Be it on large or small projects, user stories are used to slice requirements into manageable sections and pieces that can be digested and completed in a quick manner. They are often coupled with a way for the customer to test and validate that the user story requirement has been completed successfully. The key behind this kind of development process is a strong interaction between the stakeholders and the project team. In this way a project can be jump-started and the conversation begun around what the perceived function and value a system or site should embody. Often user stories go through quite a few iterations which communicates a lot of information in a short time, making development time and cost estimation more effective.

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.

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