How to sort lists on your website using helpful stats

Why you should ditch alphabetical order

Anna Su**
Anna Su**
Feb 28, 2019 · 4 min read
Image for post
Image for post

If you work on a blog, or an online shop, you have lots of lists that you need to sort. Posts, products, product filters… You probably sort them from new to old, from cheap to expensive, or alphabetically. Or, your boss tells you “the right” order and you arrange items manually.

However, if you take a look at the website’s stats, you would find out that whatever order you use, it doesn’t match the order of your most-popular or best-converting items. This means that a user has to see/click lots of less relevant items until they stumble upon your blockbuster.

What if, instead of arbitrary sorting, we could crowd-source the order of lists on our websites?

You probably think this is another tutorial about writing machine learning with R or Python, but it’s not. This isn’t a tutorial about databases either, or any other backend tech for that matter. Nope, we’ll talk front-end only aka serverless JavaScript aka DataDrivenJS.

What is serverless JavaScript?

It’s a hosted backend that you can interact with using a JavaScript API.

What is DataDrivenJS?

It’s almost like Google Analytics. It tracks what people do on your website. But it doesn’t show you any pie charts. Instead, DataDrivenJS makes it very easy for front-end devs to read the tracked data back on the site and add — as the name suggests — data-driven features.

Here’s how easy it is.

Sending data

Sign up for free, add the tracking code to your site, and then run code like this to send data to your account every time a user views a post (or: orders a product, clicks a navigation item, etc.):

// track title of a blog post
DD.tracker.trackMetaEvent('viewed post','My Post About DataDrivenJS');

Reading Data

With a couple more lines of JavaScript, you can read that data back (see the docs for reference if the code isn’t self-explanatory):

// prepare public data feed with 
// post titles and number of times each title was tracked
var feed = DD.data.feed('My Blog Posts');
feed.select(
DD.data.datapoints.metaevent('viewed post'),
DD.data.datapoints.metaevent('viewed post').count().as('views')
).orderBy(
DD.data.feedColumn('views').desc()
);

// read the entire data feed
// curious what '{}' is for? I'll tell your later!

DD.reader.read(feed, {}, function(response){
console.log(response.results);
});

The code above will get you a list of all your blog posts sorted by views, from the most to the least viewed:

[
{"viewed post":"My Post About Cats", "views":1000},
{"viewed post":"My Post About DataDrivenJS", "views":50},
{"viewed post":"My Post About Python", "views":10}
]

The data above is enough to sort posts that are already displayed on your page.

Easy? But what if you have hundreds of blog posts and not all of them are loaded at once?

Sending Some More Data

Instead of tracking just the titles, you could track a JSON with all the details:

// track serialized object with blog post detailsDD.tracker.trackMetaEvent('viewed post',JSON.stringify({
"Title":"My Post About DataDrivenJS",
"URL":"https://dev.to/my-post-about-datadrivenjs/",
"Thumbnail":"https://dev.to/images/my-thumbnail.png",
"Category":"JavaScript"
}));

and then you will have enough data to create a list of your blog posts with thumbnail images.

Reading Less Data

Now that we have lots of blog posts with lots of details, we can filter the results instead of loading all of them:

// prepare public data feed (as usual)var feed = DD.data.feed('My Blog Posts');
feed.select(
DD.data.datapoints.metaevent('viewed post'),
DD.data.datapoints.metaevent('viewed post').count().as('views')
).orderBy(
DD.data.feedColumn('views').desc()
);

// read 5 most-viewed posts, but only related to JavaScript
var query = DD.data.feedQuery().select(
DD.data.feedColumn('viewed post')
).where(
DD.data.feedColumn('viewed post').contains('javascript') // case insensitive
).limit(5);
// pass the filtering query as the second argumentDD.reader.read(feed, query, function(response){
console.log(response.results);
});

You may say — “But I could do that without DataDrivenJS — I just need some PHP and MySQL and I’ll be good”. You’re right. With some effort, you can add a column in your database to store views for each item. But what if, after a month, you would like to change how the sorting works, and sort items differently for mobile and desktop users?

Reading Less But More Relevant Data

With DataDrivenJS, all the data you need is already there, you just need to create a separate feed with data from, for example mobile visits, or — to be exact — from small screens:

// prepare public data feed as usual but
// narrow stats to the segment of visits from small screens
var feed = DD.data.feed('My Blog Posts for Mobile');
feed.select(
DD.data.datapoints.metaevent('viewed post'),
DD.data.datapoints.metaevent('viewed post').count().as('views')
).orderBy(
DD.data.feedColumn('views').desc()
).from(
DD.data.segment('Mobile Visits').where(
DD.data.datapoints.property('screenWidth')
.isLessThanOrEqualTo(480),
)
);

Reading Less But Way More Relevant Data

You could argue — quite sensibly — that views is not the best metric. Users may view our blogs posts (or products) and leave without taking any action. What if we use only data from visits in which users took an action — subscribed to our blog or purchased our products?

// prepare public data feed as usual but
//
narrow stats to the segment of visits from small screens
// in which users went to the "thank you" page
var feed = DD.data.feed('My Blog Posts for Mobile');
feed.select(
DD.data.datapoints.metaevent('viewed post'),
DD.data.datapoints.metaevent('viewed post').count().as('views')
).orderBy(
DD.data.feedColumn('views').desc()
).from(
DD.data.segment('Mobile Visits').where(
DD.data.datapoints.property('screenWidth')
.isLessThanOrEqualTo(480),
DD.data.datapoints.metaevent('URL')
.contains("thank-you")
)
);

At this point, you must think — “this girl wrote a tutorial about sorting lists, but she hasn’t actually sorted a single list!”. True, but I’m sure you’ll figure out that part by yourself*!

Well, in case you won’t, here’s a codepen with a working example:
https://codepen.io/anndd/pen/vbxKeV

Note that the tracking script (DD.js) is added to ‘resources’. Its URL contains project specific params telling DD.js where to send data and where to read it from.

freeCodeCamp.org

This is no longer updated.

Anna Su**

Written by

Anna Su**

Yet another girl who codes. All things data. All things cloud. Mostly serverless. JavaScript and Webdev.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Anna Su**

Written by

Anna Su**

Yet another girl who codes. All things data. All things cloud. Mostly serverless. JavaScript and Webdev.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store