If you’ve used modern software-as-a-service products – you’ll be familiar with these sorts of solutions, that can include things like:

• Online knowledgebase articles
• Drip-fed email series
• Online product tours

I’ll probably talk about some others another day, but today I’m looking at “Online product tours”. This is where you have pop-up dialogs guide the user through key features of your app. Not sure what I mean, check out the final result, the welcome tour on MyHill.blog.

I looked at a couple of Javascript based open source packages when I was building the tour:

• Shepherd
• Intro.js
• Hopscotch

As you might have guessed from the article title, I finally settled on Hopscotch for my tours. For me, the advantages where the ease with which I could get multi-page tours set up, support for callbacks, and of course the actual user-facing experience.

Shepherd was my first favourite, and I got most of the tour implemented in this initially. However I hit a couple of issues running some code I needed on callbacks – I couldn’t easily get them to run at the right time. The transitions between steps were also a little harsh for my liking, it was easy to get confused jumping between sections of (potentially) long pages. Other than that though it was a solid, good-looking solution.

I really liked the highlighting offered by intro.js, but it didn’t quite work for everything I wanted to do, and the out-of-the-box theming was a little simple for my liking. Other than that though it also seemed fairly nice.

Overall, I think I’d be happy working with any of these three in the future, but Hopscotch was definitely the best match for this project.

The post Product tours with Hopscotch appeared first on Lee Willis.

When you set up a site in the Google Analytics web interface you get a copy and paste snippet of code which gets you going in no time. This snippet links your website to the account you’ve set up in Google Analytics, and tracks each page that’s viewed on your site.

For many people this is everything that’s needed.

However, Google Analytics can be used for so much more. You can use it to track anything you want using event tracking (user clicked on call-to-action button, user downloaded PDF etc.), or by providing richer context about page views (this was a logged in user etc.). Here’s some of the things I’ve used Google Analytics to track in past projects:

• On a site with a multi-field search (E.g. country, market sector, and keyword) track which of the fields were provided for each search, e.g. “Country Search”, “Country & market search”, “Keyword only search” etc.
• Track events according to which adverts users were shown
• Track custom events when people follow certain on-page nav elements

Historically I’ve used custom javascript to do this. Google provide good API documentation and the amount of code required isn’t normally significant.

Being familiar with what you can do with Google Analytics, on my new hill-walk blogging service I had a list of things I wanted to track. One of the things I wanted to track was selected external links. This can always be a bit hit and miss as there’s no guarantee that the tracking will fire before the browser navigates on to the clicked page.

So off I went to do a bit of research on the best way to handle the issue.

Tip: Even if you *know* how to solve a problem, have a quick check. Technology moves fast and there might be a better / easier way today than there was yesterday…

In my travels I came across the “autotrack” library by the Google Analytics team.

The library describes its capabilities (my emphasis):

Provides default tracking for the interactions most people care about, and it provides several convenience features (e.g. declarative event tracking) to make it easier than ever to understand how people are using your site.

The interesting bit for me was the nod to “declarative event tracking”. This basically means that you can have Google Analytics track events without writing and javascript, just by marking up your HTML. Here’s some example markup:

<a href="#" ga-on="click" ga-event-category="AdClick"
   ga-event-action="Ad category 1" ga-event-label="Seller one">
    <img src="https://placehold.it/100x100">
</a>

With the autotrack library installed, this will automatically take care of tracking a click when the link is clicked. The library takes care of using the best API for the visitors browser to maximise the chances of outbound links getting tracked.

Simples…

The even better news is that everything we’ve talked about here is just one of the features available (via the eventTracker plugin for autotrack). The library also includes a variety of other plugins covering tasks such as cleaning up tracked URLS, visibility tracking, media query tracking, and page visibility tracking plus more.

Next time you need custom analytics – be sure to check out the Autotrack library.

The post Autotrack for Google Analytics appeared first on Lee Willis.