IE9 and the Pinify magic in action with analytics

In our last post we talked a bit about our strategy for getting DotNetKicks ready to take full advantage of the IE9 pinning goodness. We happen to be avid users of jQuery, and since we last spoke, it’s become significantly easier getting your website to take advantage of these tweaks.

Bye-bye boilerplate

While it’s useful to see the boilerplate code that goes in to making this feature work as the last post describes, it’s even more useful when you see how easy it will be now using the jQuery plugin: Pinify created by Brandon Satrom and Clark Sell to set all this up. The beauty of it being that it’s cross browser safe. These features won’t even be attempted unless the current browser is at least IE9, which takes a heck of a lot of plumbing and error checking code out of your hands, and leaves you with only the decision making necessary to get the features implemented.

Installation – as easy as One, Two, Three!

Firstly, you’ll want to get the Pinify files you need. You can download direct, or do what I did and install as a Nuget package:

And search for Pinify:

Next thing you’ll want to do is add the scripts and css references to your master layout(s):

[sourcecode language="html"]
<link rel="stylesheet" type="text/css" media="screen" href="/css/jquery.pinify.min.css" />
<script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.pinify.js"></script>
[/sourcecode]

Lastly, you need to make a call to the plugin after the page has loaded to kick the whole process off:

[sourcecode language="javascript"]
$(document).ready(function () {
$(‘head’).pinify({
applicationName: ‘DotNetKicks’,
startUrl: ‘http://dotnetkicks.com/default.aspx’,
tooltip: ‘.NET links, community driven’,
navColor: ‘#1C6CB6′,
window: ‘width=1024;height=768′,
tasks: [{
'name': 'Latest',
'action': 'http://dotnetkicks.com/default.aspx',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Upcoming',
'action': 'http://dotnetkicks.com/upcoming',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Submit',
'action': 'http://dotnetkicks.com/submit',
'icon': 'http://static.dotnetkicks.com/images/icons/kickit.ico'
},
{
'name': 'Blog',
'action': 'http://blogs.dotnetkicks.com/blog',
'icon': 'http://static.dotnetkicks.com/images/icons/blog.ico'
},
{
'name': 'Twitter',
'action': 'http://twitter.com/dotnetkicks',
'icon': 'http://static.dotnetkicks.com/images/icons/twitter.ico'
}]
});
});
[/sourcecode]

See how easy it is? Notice that we’ve set up a few ‘jumplist’ items to show the latest and upcoming links as well as a means of quickly getting to the link submission page. Anything is possible here, so let your imagination run wild.

So now we keep quiet about this new feature and only let the most enterprising of users find it themselves right? Right?! No…

Go ahead “Tease” your visitors

There’s no point having an awesome feature and not talking about it! So show it to your IE9 users when they visit the site. There’s huge potential there, why not tell them about it? Luckily, Pinify comes with a few ways of doing this. You can do it in a simple (and unobtrusive) way with a little panel that drops down from the top of the page telling the user what to do:

The default implementation will put this panel right at the top of the page and it will float above the text as you scroll. As you can see from the picture above, we didn’t want it right at the top. Luckily, that’s nothing a little CSS tweak can’t fix. We made a slight modification to ours to get it in a position we wanted.

First you add a simple <div> you can target for this little panel:

[sourcecode language="html"]
<!–snip–>
<asp:ContentPlaceHolder ID="MainBodyHeader" runat="server">….
<div id="pinifyNotify"></div>
<asp:PlaceHolder ID="phWebSiteAlert" runat="server" />…
<!–snip–>
[/sourcecode]

After that, you tweak the CSS slightly. The original CSS looks like this:

[sourcecode language="css"]
.pinify-hanging-container {
padding: 5px;
width: 350px;
height: 20px;
position: fixed;
z-index: 100000;
top: 0px;
left: 80px;
border-radius: 0px 0px 10px 10px;
}
[/sourcecode]

And our modified CSS changed these two values to achieve this:

[sourcecode language="css"]
position: relative;
left: 250px;
[/sourcecode]

Lastly, you add this simple piece of JavaScript to complete the puzzle:

[sourcecode language="javascript"]
$(document).ready(function () {
$(‘#pinifyNotify’).pinify(‘pinTeaser’, {
addStartLink: false,
backgroundColor: ‘#191b1c’,
pinText: ‘Unlock the true potential of DotNetKicks. Drag this to your taskbar!’
});
});
[/sourcecode]

Go ahead, play around with it, there’s plenty you can do. Also, if you’re a little more interested in controlling the entire experience, you could go for an even more branded approach by utilizing the different “type” values in the Pinify settings:

[sourcecode language="javascript"]
type: ‘topHat’
[/sourcecode]

Which puts the bar all the way across the top of the browser just like many other notification bars we see around the internet today:

[sourcecode language="javascript"]
type: ‘brandedTopHat’
[/sourcecode]

Which gives you more control of the graphics loaded on the inside:

[sourcecode language="javascript"]
type: ‘doubleTopHat’
[/sourcecode]

Which lets you customize the left and right hand sides of the area like so:

Obviously you’ll need to come up with the graphics, but this does give you an idea of how rich you can make the experience.

Sick of static jumplists? Let’s get dynamic…

Adding dynamic ‘jumplist’ items that don’t necessarily point to exact URLs is a piece of cake as well:

[sourcecode language="javascript"]
$.getJSON(‘User/FavTagList’, function (data) {
var tagList = [];

$.each(data, function (key, val) {
var tag = {
‘name’: data[key].tagName,
‘url’: ‘tags/’ + data[key].tagName,
‘icon’: ‘/Content/Images/icon-tag.ico’
};
tagList.push(tag);
});

$.pinify.addJumpList({
title: ‘Favorite Tags’,
items: tagList
});
});
[/sourcecode]

Here we have a ‘jumplist’ item called ‘Favorite Tags’ that makes a simple JSON call to get your favorite tags as a user. Once again I have two words for you: ‘imagination’ and ‘wild’ :)

Well that was nice and all, but how well is it working?

When all is said and done, and you’ve gone to the effort of providing this rich experience for your IE9 users, how can you tell if it’s working and if visitors are even using it? Well it’s simple really.

We use Google Analytics to inspect the traffic on DNK, probably just like most of the civilized world does today. If you’re in the same position, all you really need to do is add some campaign identifiers to the URLs you put into your ‘jumplists’ like this:

[sourcecode language="javascript"]
$(document).ready(function () {
$(‘head’).pinify({
applicationName: ‘DotNetKicks’,
startUrl: ‘http://dotnetkicks.com/default.aspx?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9′,
tooltip: ‘.NET links, community driven’,
navColor: ‘#1C6CB6′,
window: ‘width=1280;height=1024′,
tasks: [{
'name': 'Latest',
'action': 'http://dotnetkicks.com/default.aspx?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Upcoming',
'action': 'http://dotnetkicks.com/upcoming?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Submit',
'action': 'http://dotnetkicks.com/submit?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/kickit.ico'
},
{
'name': 'Blog',
'action': 'http://blogs.dotnetkicks.com/blog?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/blog.ico'
},
{
'name': 'Twitter',
'action': 'http://twitter.com/dotnetkicks',
'icon': 'http://static.dotnetkicks.com/images/icons/twitter.ico'
}]
});
});
[/sourcecode]

Notice the (?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9) tagged on to all the URLs? Google Analytics will recognize this and create a campaign for you when visitors begin using this feature. It’s important to note that these URLs are unique to the pinned version of your site, meaning that the only way they’d hit this is if a user specifically clicked on one of the ‘jumplist’ items.

When users begin pinning your site and start accessing it via the task bar, you’ll notice something in your Google Analytics account:

But what about events that don’t hit particular URLs? How do we track things like that similarly in Google Analytics? Let’s say for example a user wants to “Unfavorite” or “Favorite” a particular tag from the jumplist. This might not hit a particular URL on your site, but rather potentially just send an AJAX instruction to your server which will save that for the user. You might still want to track the feature usage as it happens from the ‘jumplist’ in particular.

For that we have access to a global object exposed by Google Analytics called (_gac). One of the things you can do is push asynchronous events to this object and it will add that data to your campaign. And this is how you would make a call to it:

[sourcecode language="javascript"]
onclick="_gaq.push(['_trackEvent', 'Tag', 'MarkAsFavourite', 'jumplist']);"
[/sourcecode]

That’s a wrap!

I hope that gives you enough information to get cracking on your own site, as well as tracking how well this feature is being adopted by your visitors. With that kind of powerful information at your fingertips, you can very quickly see what is working, and where adjustments need to be made. You can get valuable usability or discoverability issues nailed down before your users start complaining which will hopefully lead to a happier and longer lasting experience for your users on your site.

Don’t forget to check out the useful list of resources we’ve kept track of relating to this technology and if you have any helpful hints and tips that could make it even easier, please drop us a comment below!

Until next time…
RobertTheGrey