Posts Tagged ‘igoogle’

Posted by Matt at 9 December 2008

Category: igoogle gadgets, web

Tags: , , ,

If you are a gadget author, you’re probably interested in knowing how many users have your gadgets installed. There are a few ways to deduce this information, but none are perfect. I’m going to show you one way to generate useful information that is probably something you’re looking for.

Gadget Directory Details

The first approach is to just look at the iGoogle Gadget Directory entry for your gadget. It should show how many users you have. In fact, my Gadget Monitor gadget retrieves its information from here for user counts. Unfortunately, if you look at different internationalized versions of the directory, you’ll see different numbers based on how many of those users have it installed. There is no place to get a single consolidated number.

Analytics

A better approach is to use Google Analytics. In the gadget developer documentation there are instructions on how to use analytics with gadgets. But using it in the default way – recording one hit every time your gadget is loaded – is not all that useful because:

  • Users may load your gadget many times in one day, and this fact isn’t really relevant like page views on a web site are
  • If you record multiple hits per person using your gadget, you still don’t know how many distinct users are using your gadget
  • Even looking at the “unique pageviews” data in Analytics can be misleading, because if the user has multiple sessions in the same day, it still gets counted more than once

New Goals

The approach I use takes advantage of Analytics, but in a different way. The goals are:

  • Get as accurate a count as possible of how many unique users interacted with your gadget in a day
  • Get a count of how many times your gadget was added by new users in a given day

This approach, unfortunately, will not get you any closer to knowing how many people have your gadget on their iGoogle page and didn’t hit it one day, or maybe have it on a tab that they didn’t look at one day.

A Different Approach

I’ll explain this new approach by example.

First, in the ModulePrefs declaration of your gadget, you need to require two features:

<Require feature="analytics"/>
<Require feature="setprefs" />

Second, you need a hidden user preference to store some data:

<UserPref name="today" datatype="hidden" defaultvalue="" />

Finally, some javascript code in your Content section:

// Get a reference to user preferences
var prefs = new _IG_Prefs();
// Get the user's current date/time
var now = new Date();
// Create a date string of the form yyyy-m-d
var today = (now.getFullYear?now.getFullYear():now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate();
// Get the stored value of the "today" user preference.
var prefs_today = prefs.getString('today');

// If the "today" user preference is blank, then the user has never loaded
// this gadget. They must have just added it!
if (prefs_today=='') {
    _IG_Analytics("UA-0000000-0", "/addgadget/mygadget");
}
// If the generated date string doesn't match the one stored in the
// preferences, then this is the first time the user has loaded the
// gadget today. Record a hit and change the preferernce to be
// today's date string so it won't get recorded again.
if (prefs_today!=today) {
    prefs.set('today',today);
    _IG_Analytics("UA-0000000-0", "/gadget/mygadget");
}

(Note: in the above code, replace UA-0000000-0 with your Analytic account’s unique ID, and ‘mygadget’ with a unique identifier for your specific gadget)

The concept here is simple. Every time the gadget loads, it will get a string representing today’s date. If the date doesn’t match the value stores in the user’s preferences (for example, if the gadget was last loaded yesterday), then record a hit for today and update the preference.

This way, a single user will only record one hit a day to the Analytics counter. You get a pretty accurate count of how many unique users are using your gadget in a single day.

Since the preference gets updated every day the user loads the gadget, if it is blank that means this must be the first time it’s being loaded. That effectively means they have just added it. In that case, record a hit to a separate url starting with /addgadget to separate that from the other url.

An advantage of putting each hit in a “subdirectory” in analytics is so you can effectively use the drill-down report. By looking at the numbers for the entire /addgadget directory you can get a count of gadgets added in a day across all your different gadgets. Looking at the numbers for /gadget as a whole gives you a user count of all your gadgets combined.

I hope this approach proves to be as useful to you as it has been for me!

Posted by Matt at 21 November 2008

Category: igoogle gadgets, web

Tags: , , , , ,


I use iGoogle as my browser’s home page. I have 45 gadgets/feeds on a single tab (many of which are gadgets I’ve written) that pull in information from all around the web and iGoogle presents it to me in a single place. It’s extremely efficient and allows me to monitor a lot of sites and news feeds without navigating through bookmarks or having multiple tabs open.

But with that much information on a single page, doesn’t the screen become unusable? Too crowded and hard to see? No!

I’m going to show you two ways to optimize iGoogle and clean up your cluttered screen. This will allow you to put more content in a single place, and not become overwhelmed with things you have already seen or don’t want to see. We’re going to clean up the iGoogle user interface to make it more efficient and usable for you.

First, take a look at the default iGoogle layout with a bunch of RSS feeds added (click images for a full-sized view):

Optimization #1: Stylish

This Firefox add-on lets you write custom CSS rules that get applied to specified url’s. Since Google took away the ability for gadget authors to inline styles and affect the screen’s layout, there are no longer “skin” gadgets that let you remove the search box, collapse whitespace, etc. The Stylish extension lets you go in and do that the “harder” way. Unfortunately it will only work in Firefox.

To add this add-on and clean up your page, do the following:

  1. Download the Stylish add-on and install it in Firefox
  2. Apply my style by visiting http://userstyles.org/styles/12291 and clicking “Load into Stylish”
  3. Visit iGoogle to view your improved layout

The style’s CSS in Stylish is as follows:

After installing Stylish and applying this style, the screen above now looks like this:

It now easily fits on one page with no scrolling. Much better already!

Optimization #2: RSS Feed Customizer Gadget

Many peoples’ iGoogle pages have a large number of RSS feeds. Unfortunately, the built-in functionality in iGoogle to handle RSS feeds is pretty lame, in my opinion. So I built my RSS Feed Customizer gadget to automatically take all the RSS feeds on your page and make them look better and add more functionality.

Step 1: Install my RSS Feed Customizer gadget

Go here and click “Add it now” to add the gadget to your iGoogle page. Then return to your iGoogle home.

Step 2: Inline it

Once it is installed it will show up on your iGoogle page with the message below. You must click the “OK” link in the text to allow the gadget to interact (aka “fix”) your page.

igoogle05-inlining

Once you have done this, your page will be magically transformed! It already looks better. You get:

  • Icons before stories
  • More readable headlines
  • Highlighting on mouse-over
  • Right-clicking a headline shows you the summary
  • A “refresh” button at the top right of each feed to trigger a reload
  • And more! (we’ll get to that…)

Step 3: Customize General Options

If you go to the “Edit Settings” for your newly-installed RSS Feed Customizer gadget, you’ll see the following options:

igoogle15-options

Here you can customize how your feeds will be display by changing some of the options:

  • Default Item Bullet: The site favicon looks most colorful, but maybe you want a dot or an arrow
  • Link CSS: turns of underlining, etc by default, but you can change it
  • Item Format: defines how each headline will be displayed. If you’re an advanced user, you can tweak this however you wish.
  • Default Refresh Interval: Now you can make your feeds refresh more often!
  • New Window: Self-explanatory, no?
  • Alt Row Bg Color: Set alternating row colors to match your screen or theme
  • Rewrite Google Urls: If your feed comes from Google News, this will make the links go directly to the source of the story rather than the google.com redirect url
  • Message: Leave this blank, it’s kind of a dumb option
  • Disable: Don’t check here or the gadget will be disabled! This is mainly for testing or debugging problems.
  • Hide Feeds With No New Items: This isn’t checked by default, but you’ll probably want to check it after you read a little further…
  • The rest: Don’t change the rest of the options!

Step 4: Minimize the RSS Gadget

Now that the RSS Feed Customizer gadget is loaded and doing its job, you can minimize it and even drag it to the lower right of your page if you wish. Get it out of the way. Unfortunately, it has to stay visible on your page, even if in minimized form. Here’s our screen with the RSS Gadget minimized and moved to the bottom right:

Step 5: Customize Individual Feed Options

In the title bar of each RSS feed, you now have a “?” button. Click it to customize settings for the individual feed:

igoogle08-options

Here you can edit the options that will apply only to a specific RSS feed.

  • Title: Over-ride the default title taken from the feed to something more meaningful for you. Sometimes feeds don’t even have titles, and by default iGoogle leaves the gadget’s title bar empty. Not good!
  • Num Items: Here you can specify how many title to retrieve, from 1-100.
  • Refresh Interval: If you have a feed that updates often, or maybe one that you know updates once a day, you can control the refresh interval here so your data always stays current.
  • Avoid Caching: If set to Yes, a random string will be added to the feed’s url to retrieve. This will avoid the Google Cache and always return you fresh results
  • Item Bullet: Here you can over-ride the default settings for a given gadget

As soon as you change the values and click Close, the changes are saved. You can use the Refresh button at the top of the gadget to see your changes in effect!

igoogle09-improved

After we customize all our gadgets to show more headlines (more input!) we have lots to read and a full screen again!

We obviously need a way to clean up the screen. This is all about optimizing and cleaning up clutter, right?

Step 6: Mark Feeds as Read

Okay, here’s where the fun begins. With the RSS Feed Customizer gadget, you can mark feeds as “read”, meaning you have scanned all the headlines and are done with them. Why continue to display headlines that you’ve already read or don’t want to read? Hide them!

In the title bar of each feed is a “clear” button. Clicking it instantly marks the feed as read, clears the titles, then refreshes the feed to check for new items. If we “clear” every feed on our page, look at what we have left!

Ah, much better! But what happens when a new story comes in? When a feed refreshes and a new item is detected, it will expand itself so you can see the new headline:

So our screen has gone from cluttered to mostly empty. Imagine how many other useful gadgets we could now fit on the screen without having to scroll or switch between tabs!

But can we do better?

Step 7: Hide Feeds With No New Items

Remember the “Hide Feeds With No New Items” option in the RSS Feed Customizer gadget options? When it’s checked, any feed that has no items to read will completely disappear! So it doesn’t take up any screen real estate at all. Especially if you have feeds that don’t update often, you can add 10, 20, 30 feeds and not have them take up any room on your page. Now that is clean and efficient.

Here’s our screen after enabling that option:

Wow! No need to scan the screen for things you haven’t read, because when they come in they will pop their containers open and become visible. No need to scroll your page or switch tabs. No need to worry about having too much information overwhelm you.

Your iGoogle page is optimized, uncluttered, and efficient!

Example: My iGoogle Page

As an example, here is a snapshot of my actual iGoogle screen at a random moment. Like I said earlier, I have over 45 gadgets and RSS feeds on my page. Yet most of the time, it’s mostly blank. As feed items pop in I can take a look and clear it. My goal is usually to keep my screen fairly empty. That frees me up to concentrate on other things, since I don’t have to check web sites or scan 30 boxes of RSS feeds.

Conclusion

I hope this was a clear walk-thru that makes your iGoogle experience more efficient and allows you to start concentrating on the information you want to read rather worrying about the UI you use to retrieve it!

Happy iGoogling!

Posted by Matt at 21 November 2008

Category: igoogle gadgets, web

Tags: ,

I have a black sweatshirt hanging in my closet, sent to my by Google, that says “Gadget API Guru” in big white letters on the back. Jealous? No? Okay, then…

They sent it to me because I am actively involved in the gadget developer’s forum, and I write gadgets for iGoogle. I think they are interesting little bits to develop, and I find them extremely useful on my iGoogle page. So I thought I would link to some of my gadgets here in case someone wants to give them a try.

4 New Quotes of the Day Every Day
Displays 4 new quotes of the day every day with the quotes and authors easily visible. Once you’ve read them, you can clear it so they are hidden until new ones are available!

U.S. Financial Market Summary – Stock Market, Dow Jones, Nasdaq, S&P 500 Ticker
Show a short summary of the US financial market, with current market values for the DOW, Nasdaq, and S&P 500. Info taken from live Google Finance and updated as often as you want!

Super Digg – Links Directly To Stories
A Customizable Digg feed using the Digg API to give you full control and links directly to the story, not to the Digg page. You can also mark all the entries as ‘read’ and clear your list so you only see new items. Very configurable and customizable!

RSS Feed Customizer: Improve the look, layout, and functionality of your iGoogle RSS feeds!
Customize the display of all RSS feeds in your iGoogle page so they take up less room, look better, and have addded functionality.

Google Groups Reader
Google Groups Reader. Read any Google Group via this gadget! Groups by subject, filters, auto-refresh, custom title, many styling options, etc. Makes reading Google Groups via Gadget very easy!

Gadget Monitor – Keep Track Of Your Gadgets
This gadget allows you to monitor up to 10 of your gadgets to check for new users and new comments. If you are a gadget author and want to keep tabs on your users, this gadget will be useful to you.

Latest Viral Videos from ViralVideoChart.com
See the new viral videos hitting the web before your friends and family even send them to you! This gadget uses the feed from ViralVideoChart.com, which monitors videos posted to web sites and blogs to identify those that are becoming popular and ‘going viral’.

Posted by Matt at 18 November 2008

Category: Uncategorized, igoogle gadgets, web

Tags: , , , ,


You know all those videos that people keep talking about that they’ve seen on YouTube or elsewhere… the star wars kid, the evolution of dance, AfroNinja, anything by Will Ferrell. They spread fast, and before you know it someone in a meeting is making a subtle reference to a cat playing the piano and you don’t get the joke. Because you haven’t seen the YouTube video. You laugh along, but inside you’re crying. All because you haven’t seen the funniest video ever and they have.

Well, lucky for you help is on the way!

A site called ViralVideoChart.com tracks popular videos as posted on blogs and web sites. If there is a sudden surge in how much attention a video is getting, it shows up on their charts. If you monitor their feed, you’ll get to see today what everyone will be talking about tomorrow. And what could possibly be more important than that?

I bring all this up because I just released a new iGoogle gadget: Latest Viral Videos from ViralVideoChart.com

It lets you put the latest viral video list on your iGoogle portal page and watch as new ones come in. It embeds the video right there on the page for you and lets you mark them as seen once you’ve watched each one. That way you don’t have to see the same list all the time.

So hopefully the next time you’re in a meeting and someone is joking about that hilarious dog who just couldn’t get that pail off its head, you’ll be able to LOL and say… “I know, isn’t that hilarious? I saw that THREE DAYS AGO, you douche! Oh, SNAP!”