Hiding from Google Analytics and saving time

Everyday I learn something new. It’s the nature of working on the web. Here’s something I learned this week…

In my day job, I am concerned with monitoring web traffic for our different marketing efforts. I want to know if students are clicking through on an email that invites them to an event, I want to know which of the emails and which links result in the most action.

I use Google Analytics and the handy URL Builder tool to create campaign tracking URLs. Then through analyzing data, I can see how people came to a certain landing page… was it through an email we sent? Was it through the banner ad we purchased, or a Facebook ad or post? And I can look at the entire event and start to make decisions about what worked, what didn’t, and be a little bit more informed.

The problem though, is that Google uses 30 minute sessions to track a “visit”. And after analyzing traffic for a recent recruiting campaign, I discovered those sessions, also include MY visits to pages not at all connected to the campaign.

I was combing through all of the landing pages for a recent campaign, and started noticing that some URLs were showing up that were NEVER put into a campaign. Deeply embedded pages for an executive education event registration, and a few undergrad pages were being tracked as landing pages even those links were never in the emails for our MBA Recruiting campaign. We’ve tried some IP filtering with Google analytics in the past, but due to some internal set-ups, and needing to track some internal data, we’ve never had luck hiding ourselves from Google. So Google was including pages I visited after testing an email campaign in our analytics.

Until now!

Meet the Google Analytics Opt-Out Add-on (for Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari and Opera… all the browsers). “This add-on instructs the Google Analytics JavaScript (ga.jsanalytics.js, and dc.js) to prohibit sending visit information to Google Analytics.”

So, now my clicks on campaign urls won’t be included in our analytics data. And I don’t have to spend as much time cleaning up our analytics data when I do campaign tracking.

In the future, it would be great to be able to filter this by domain, because I don’t mind lending some data to other domains, just not the ones I’m working on.

Are there google analytics & campaign tracking tips you’ve learned along the way?

Advertisements

#Heweb12

Dumping ground of SlideDecks (Full Schedule)

#AIM1 @brettcpollak

Mobile is so 2011. Make all your campus sites & apps look great on any device.

#AIM2 @cgrymala

WordPress to the nth Degree

#AIM3 @jasondfish

Cloud Computing: Planning for Success

#AIM4 Alex Kingman

Prototyping: Understand First, Solve Later

#AIM5 @starmadilla

A Case Study in Collaboration and Buy-In: How InCommon Federated Login Got Us Unstuck

#AIM6 Peter Angela

Zero to Mobile in 3 weeks flat

#AIM7 @dwightnagy & @myshultz

Mobile Quick Start

#AIM8 @joelgoodman

All in the game: Mobilizing your campus transmedia

#AIM9 @kyledbowen

Mobile Warming: A New approach to student engagement

#AIM10 @zastrow

Pushing Pixels to Cranking Code

#AIM11 David Turnbull

How to build a web unit on cost recovery – a case study

#AIM12 Cornelia Bailey

Again and Again: UChicago Iterative Collaborations on Mobile

#MPD1 @marthagabriel

Education: Impacts and Transformations in the Social Media Era

#MPD2 @LoriPA

The Future of Higher Ed? A Canary In The Coalmine of Online Learning

#MPD3 @Amandaesque

I Don’t Have Your Ph.D. – Working with Faculty and the Web

#MPD4 @kylejames

Inbound School Marketing: Is Your Website Helping the Bottom Line?

#MPD5 @bpmore & @carriehphillips

You Have an iPhone. Now What?

#MPD6 @marleysmom & @aaronrester

There’s Life Beyond the Four-Year University

#MPD7 @Zablocki & @ColB

The Care & Feeding of Your Vendor

#MPD8 @mherzber

Campus Change Agent: Build a Campus Web Community Where There is None

#MPD9 @Prof_Doug

Building a Strategic Plan

#MPD10 @daviddemello

Govern or be Governed! or, How I Learned to Stop Worrying and Love the Mob with Pitchforks

#MPD11 @Prof_Doug

Card Sorting: Research That Every Web Developer Should Use

#MPD12 @stebert

A Conceptual Framework for Effective Web Governance in Higher Education

#MCS1 @donnatalarico

No Such Thing as TMI: How to Create a Culture of Sharing

#MCS2 @JohnMills

How UW-Milwaukee redesigned for the LAST time

#MCS3 @jptweb

Rethinking the Virtual Tour: An Immersive Experience that’s More Than A Map

#MCS4 @JamieOber

Terrific Teaching Technology Tales: Marketing Via Storytelling

#MCS5 @NickDenardis

Designing for next steps (a forward moving user experience)

#MCS6 @plautmaayan & @mallorywood

Fording the Social Media Channel

#MCS7 @jplucas55 & @nickweaver

#uwrightnow: Integrating your social, web, editorial and marketing networks

#MCS8 Romana Amato

Web Content Strategy: Effectively Pairing Multimedia, Social Media, and Text

#MCS9 Scott Barnett

Location-based “Walking Tour” using TagWhat

#MCS10 @nikkimk & Louise Sharrar

Slidervention: Getting Content from Faculty Experts

#MCS11 @nagmay

ALL THE THINGS

#MCS12 Magen Tracey

Student-Sourcing Your College’s Web Content

#TPR1 @cdchase

DevOps: Making Development, Testing & Production Easier

#TPR2 @svenaas & @jmpmhc

I Can Convert!

#TPR3 @Abuzzahab

Your CMS is the elephant in the room

#TPR4 @ChrisWiegman

Securing the CMS doesn’t take a Dissertation

#TPR5 @DavidDeMello

Get Real! Adventures in real-time web applications

#TPR6 @Kodiak324

Get Your Grubby Hands out of the Database

#TPR7 @woodwardjd

Web Application and Site Mapping with Cucumber and PhantomJS

#TPR8 @JohnVieth

My Favorite Drupal Modules (Sung to the tune of “My Favorite Things,” as performed by Julie Andrews

#TPR9 @bpanulla

Retiling your Web Maps

#TPR10 @dwightnagy

Websites Featuring User-Created Content in Drupal

#TPR11 @cgrymala & @jesselavery & @ericjuden

WordPress as a CMS

#TPR12 @lacytite

WordPress FUNctions

#UAD1 Jonathan Davis

Guerrilla Usability: Implementing user experience testing with little (no)budget

#UAD2 @Dmolsen

Everything you know isn’t the same anymore

#UAD3 Emily Looney

Achieving Iterative Redesign: Online Content’s Only Constant Is Change

#UAD4 @aaronrester

Reach Out and Touch Someone: Marshall McLuhan and the Tactile Web

#UAD5 @mryand

Responsive Design: One Site, Many Devices

#UAD6 Leigh Shoemaker, Lili’a Uili Neville

Embracing Your Top-Level Website Redesign: Challenges, Collaborations, Creations and Chorizo

#UAD7 smeranda

The New (Responsive) World Order: Lessons from a 500,000 page Responsive Design

#UAD8 @TerrillThompson

Web Accessibility: 30 Tips in 45 Minutes

#UAD9 @NathanGerber

One Site To Rule Them All – Mobile & Traditional Sites Come Together

#UAD10  @alanariley

Give ’em some social media love: The right people using the right tools for the right reasons

#UAD11 @erunyon

Rebuilding a University Homepage to be “Responsive.” Twice. In Less than a Year.

#UAD12 – Jon Gunderson

Open Source Tools for Inspecting and Evaluating Web Sites for WCAG 2.0 Compliance

#COR5

Apps your students love

#COR8

Location based services, where are we going?

Digital Signage – Live Test!

I was finally able to test out the Drupal+Signage system on a screen today. We still have a little ways to go. The computer driving the sign has little memory, and is having problems with the jquery transitions. It’s slated to be replaced within the week or so. Hopefully that means a new video card which will support HD (1920×1080). Right now, we’re stuck using 1024×768. And if we end up having to use something with a 4:3 aspect ratio, I’ll get rid of the scroll bars. But I’m hoping we’ll be able to go wide screen when we go live.

Meanwhile, here are a couple of photos…

Image

Image

School starts in 3 weeks. Hopefully we will be rolling live by then.

Meanwhile, I’m working on reducing the amount of text in the larger slide area, increasing the font-size (although everything is easily read by the passer-by) and adding some better back-end functions for our signage moderator.

The moderator has the ability to maintain two areas on the screen: the larger  ‘slide’ area on the left, and the scrolling events on the bottom right. The moderator can upload an image (exported from powerpoint, provided by a designer or another department) or insert text for an announcement. To add events to the scrolling event calendar, the moderator, as well as several other department assistants can add events to our college calendar. There is an option in our calendar module that asks, “Add to digital signage?”, if they choose this option, the date, event title, time and location will appear on the digital sign.

The spot above the scrolling calendar is a static ‘Ad’ or Announcement that I’ll change out periodically. Eventually, the moderator will be able to manage this section as well.

There are two horizontal scrollers at the bottom of the screen, one is a list of headlines of business news from Dow Jones, and the second line is a stock ticker, built with JQuery, Javascript and Yahoo! Stock Quotes.

The signage loads in the full-screen, kiosk mode of Chrome.

Once I’m happy with how this is working, I’ll detail the drupal side of things.

Designers & Developers

I wonder if being a Designer or Developer is a bit like a game of Dungeons and Dragons. We have our guilds, our loyalties, our secret powers and the narratives we tell each other to get to the goal that we want. Now, we could be on the same team, working in the same company, trying to reach the same goals. But sometimes, it hardly feels like that. Marketing asks me to design something, I hand it off to the developers and in the end it looks nothing like the photoshop file I handed off to them. They didn’t meet my goals of a clear navigation, visual hierarchy, color theory, rounded corners, stunning typography, etc. And to them, my design seemed too complicated, too simplistic (or redundant). They wanted fast, lean code, and coded the web page to match their standards and goals.

But why would I expect their code match my photoshop file to begin with?

Photoshop is a static reality, made for static end results. We send finished (flattened usually) files to printers, or flat jpgs of our kids birthday party to the web. Even if we could, I’m not sure we’d share our layered image files on the web.

The web is this dynamic, changing reality. From July 2011-July 2012, 10% of our college website visits came from mobile devices, that’s a 380% jump from the year before. I expect next year that at least 25% of our visits will be from mobile devices. You can’t design for static realities anymore (unless you’re working in print only).

I live in this really interesting in-between world. I’ve spent a large majority of my professional life in print marketing. But, I’ve always been that one person on the team that was asked to make a web page, or to talk to the Developer team, because I understood the web. I got into design via the web in college, but quickly made the jump to print. And, I think I ‘get’ geeks. I think about how to communicate Marketing’s goals to IT departments, how to communicate IT limitations, ideas, and goals back to Marketing, and have worked as a translater between the two.

On twitter this morning, @Brad_Frost tweeted a link to @StephenHay ‘s talk on Responsive Design Workflow. And it is fantastic. I think it could be called, more generically, “Web Team Workflow” as it’s not just about Responsive design, but how Designers & Developers can work together. The talk seemed to be aimed mostly at designers who aren’t in a one-man-shop, but there’s still great stuff for the entire team in the talk.

The two big things I walked away from in the talk were:

1) People who design for the web, should create prototypes in HTML/CSS, not as static photoshop files.

2) Design from content out.

Photoshop and web prototypes

Stephen Hay suggests that in print design there are tons technicals specs that designers have to know.. we have to understand trapping, dot gain, paper differences, and why a one-color job is printed differently than a four-color job. We don’t have to know how to run the printing press, but we do have to know how to set up our deliverables differently, based on the end result.

Hay then compares this to a designer designing for the web… When we hand off a project to a developer, we should understand how it’s going to work in a browser, what the limitations and opportunities are.. and we should set up our projects in a similar way that we do for print. That is, using the right tools/deliverables for the right medium. He suggests that if designers can understand the print specs… they should be able to learn basic html and css.

(An aside… personally, I’m not sure if every designer can do this, or should do this. But if you’re a web designer (front-end), it makes sense that you should stop using photoshop. Photoshop can be a great place for experimentation, and thinking through how things might be visually set up, but what I hand to a developer (or even show a client) should begin to be HTML based. He gives a few tools and links to things that will help with this process, and I’ll include them below.)

Content Out

Hay’s Workflow is summed up in ten steps

  1. Content inventory
  2. Content reference wireframes
  3. Design in text (structured content)
  4. Linear design
  5. Breakpoint graph
  6. Design for various breakpoints
  7. HTML design prototype
  8. Present prototype screenshots
  9. Present prototype after revision
  10. Document for production

There is no real design aspects to this workflow until step four at the earliest (which is where most web designers want to start). Unless you work on a large team, most web designers are also responsible for site-maps, prototypes, design, and making sure the developer executes what we want.

Hay quotes Bryan Reiger

essentially what is the message that needs to be communicated if I was ONLY able to provide the user with unstyled HTML?

This should our starting point for our web design projects (and the beginning of content strategy as well). And, Hay goes onto suggest that this is the first step in design. Organizing the content, establishing hierarchies, and allowing the client to understand the priority of good content are the first steps to web design. Anything we add beyond this point could have a negative impact on how that content is understood, received, or responded to.

This isn’t to say that design has gone to the wayside on the web. I think it’s simply saying that designing for the web is more than just creating graphics and adding colors. Web designers have to be artists (creating something that is visually appealing to look at, while supporting a company’s brand), psychologists (understanding how people think), and manipulators (providing environments where users will have experiences, or make certain choices to meet a certain end-goal).

So what’s next?

I could go on and on about this topic. Living in this in-between world is challenging sometimes, and it’s great to hear a similar perspective from someone who is there with me. And, the wheel I’ve been inventing for myself, isn’t that re-invented. Just yesterday I drew some wireframe sketches showing the order of content groups for mobile vs desktop… I just drew boxes, numbered their order, and identified the groups.. who knew that process had a name, “Content Reference Wireframes”.

Personally, I need to start working on prototypes in HTML, and creating style guides in HTML showing how web content is stylized. Hay listed a few tools that help with that, none of these I’ve tried, so I just list them below as a starting point.

Oh, and about that D&D game I referenced earlier… it really does help when we’re on the same team, to have a similar goal in mind. I can learn from developers about version control, html, css, and test suites, and developers can learn from me about human psychology, the importance of design, and how form can really influence function.

And in the end, the users will win.

New tools for a new trade

Stephen Hay’s talk on Responsive Work Flow – http://vimeo.com/45915667
Watch it. Make it a team event. Seriously. Go watch it now, the links will still be here when you get back.

Dexy – http://www.dexy.it/
Flexible Documentation Tool

Knyle Style Sheets – http://warpspire.com/kss/
Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember.

Bringing a Knife to a Gunfight – https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
Andy Clarke’s talk about designers on the web from An Event Apart, Austin 2012

Style Tiles – http://styletil.es
(He didn’t mention these, but I’ve already been looking at this idea for awhile)

And you?

What tools are you using? How do you, as designers and developers, work together on your teams?

Woa. Underwater.

Okay, starting some major drupal theming, and I realize I have a lot to learn.

> Disable all CSS files native to drupal, I need just 1 css file to load. Not needing the load bloat of 12+ style sheets for possibilities that will not exist in this digital signage environment (https://gist.github.com/2727330 & http://www.grahamgilchrist.com/blog/25 were very helpful)

> I’ve got the template now in drupal — but I don’t have content connected to it. How do I rotate through different content options to build a slide show (look for drupal slide show modules that can work with content, rss feeds, and images, and have multiple instances on one page) all from /signage.

> go ahead and add the static module parts of the page. Time, weather.

> Need to start creating the news source in drupal.

> create signage view

wow.

Little, by little, I’ll get there.

Digital Signage

I’m starting a big new project at work. Trying to take our digital signage from an archaic powerpoint slide presentation to something that is driven by dynamic content, visually pleasing, and pulling content from a CMS. As I start to move forward with this I’m realizing that there’s much more involved than just “Hey! Make a system that we can use Drupal + mac mini’s + tv screens to show announcements for the college!” Voila!

This is my brain dump trying to sort through it and get a game plan.

Existing: Powerpoint slides given to URC, updated at least twice a week, no real deadlines given to contributors, no campus-wide events, only B&E-sponsored/involved.

Givens: Drupal, mac mini hardware, 3 existing-screens (at least 2 more to hopefully come that will be tailored to departments)

Needs:

  • Policy
  • Submission Form (to include start/stop dates, constrained image upload, etc)
  • Content types: Academics, Events, Ads, Faculty/Student Spotlight
  • Drupal Template + views + http://drupal.org/node/812294
  • RSS Feed? Twitter? Time? Weather? NASDAQ Ticker?

Other options: There are lots of out of the box options that come with screens + hardware + software. Due to budget constraints, we’re having to find the cheapest (free) option available. Which has lead us to stick with Drupal. However, I’ve recently discovered Rise Vision and am a little intrigued by what I see. I logged in to check it out, but it seems to involve just as much development as working with Drupal.

So, in I go. Building a few wireframes, learning drupal. I think I’ll do a few Style Tiles while I’m at it.

P.S. Also grateful for a boss that encourages me to experiment and learn on the job.

P.P.S. Also grateful for the shop-talk-chat I had with @NickDenardis from Wayne State about their Digital Signage solution.

Making Statements?

A few days ago Andy sent me a few links with articles that takes Tina Fey’s Improv Rules (from her book “Bossypants“) and applies them to work life. You can read them here and here. Then, he wrote a post applying the same Improv Rules to Open Source Development, “Open Source is improv, so say “Yes, and.

In all of these commentaries two things have stuck out to me.

One: Self-censorship is not allowed. The internal editor needs to die. You know, that voice that edits your own thoughts, keeping you from being spontaneous, incorrect, and sometimes even right because you’re afraid of a number of things (responses, what people will think, failure, etc).

Two: Confidence is required. At some point, I need to turn my questions into statements. And be bold enough to support them. Here’s a quote from “Tina Fey’s Rules For Improv…And the Workplace“:

Rule #3 — Make Statements

This is a positive way of saying “Don’t ask questions all the time.” If we’re in a scene and I say, “Who are you? Where are we? What are we doing here? What’s in that box?” I’m putting pressure on you to come up with all the answers

We’ve all worked with that person. That person is a drag. It’s usually the same person around the office who says things like “There’s no calories in it if you eat it standing up!” and “I felt menaced when Terry raised her voice.

Lesson: Don’t Ask Questions All the Time

Statements are about confidence. Asking nothing but questions is draining. It’s excluding yourself from being part of the solution, it’s building obstacles instead of bridges, it’s throwing the ox in the mire and stealing the plow to get him out.

In order to find my voice, I need to be able to make statements. Otherwise, I’m not adding any new content, I’m leaving all the work to someone else. Sure, while asking questions is a good thing, it shouldn’t stop there. Asking questions, collecting data, and researching topics will only move the conversations forward if something can be said about the data—and maybe even more importantly, something can be created in response to the data.

So, I have another post already mulling in my head. One in which I’ll make a statement… something about the connection between good data and awesome customer service.

Stay tuned.

Finding my voice

If I don’t speak, I’ll never know what my voice sounds like.

If I don’t flex my muscles, I’ll never know how strong I might be.

This year, in my profession, I’d like to find my voice. If I’m doing any work that is worthwhile, it should hopefully also be worth talking about. And to take it a step further, in the next two years I’d like to even present at a conference.

But as a jack of all trades, master of none, or a generalist…. I find that it’s hard to focus in on One. Thing. And maybe I don’t have to. But I have to write, think, speak, flex my creative muscles to even find out what is there.

So here’s what I do know (at least right now in this short time that I have to write):

1. I work in marketing doing design AND code. I sit between IT and Marketing and I feel like I’m able to help translate between the two. (Thinking about a future post: What designers wish programmers understood, what programmers wish designers understood) (Right now, as a web designer coming from print, I wish I had a better sense of version control/git and wish I could get into the habit of incorporating it into my workflow.)

2. This isn’t a 1999 internet anymore, yet higher-ed seems so behind. (I feel so behind). To move forward in public institutions seems to take so long because of red-tape, budgets, personell, and personalities. How can we move forward while still being tied down to process?

3. Mobile first? How to go from static HTML to CMS to Mobile first (responsive) design? or is that even the right way to go?

4. Conversion to a CMS (Drupal). Working slowly now to convert an asp, home-grown CMS to a larger, robust CMS. (Decision process, server, software, personell, training)

5. Higher-Ed: Whose story are we telling, and who are we telling it to?

But for now, off to brainstorm/justify a new navigation scheme.

Twitter