Tracking Some Dummy Data

Before we start implementing the lists, let’s track a couple of visits to have some dummy data to work with. Go around the website, view some letters, like a couple of them. Once you’re done, run this code in the browser’s console to end your visit:

DD.tracker.stop();

You won’t need to do that in the production environment, however, forcing a visit to stop will save you a lot of time while you are developing. Otherwise, you would have to wait around 20 minutes for a visit to close due to the lack of activity.

Tip: To see what data was collected in your project, select Tracked Data from the hamburger menu in the top right corner in DD Console.

Now, to the fun part! Let’s read the tracked data to create our lists.

3. The Most-Liked Letters

Reading the data is quite straightforward. Let’s start with getting the most-liked letters. In the index.js file, we need to add the following code:

var getMostLikedLetters = function(){

// create data feed, it has to be named so you can manage it

// in the DD Console var feed = DD.data.feed('The Most-Liked Letters'); // select the last 4 unique values of 'liked' meta event feed.select(

DD.data.datapoints.metaevent('liked'),

DD.data.datapoints.metaevent('liked')

.count().as('likes')

).orderBy(

DD.data.feedColumn('likes').desc()

).limit(4); // read the entire data feed: DD.reader.read(feed, {}, function(response){

addList('#mostLikedLetters', response.results);

});

}

Let’s break the select down. First we select all values (letterIDs) of the liked event:

feed.select(

DD.data.datapoints.metaevent('liked'),

...

and then we count how many times each value was tracked:

feed.select(

DD.data.datapoints.metaevent('liked'),

DD.data.datapoints.metaevent('liked')

.count().as('likes')

Note: if one of the selected columns is using an aggregate function the results are automatically grouped by the remaining columns, in this case by the value of the liked metaevent.

We give this column a friendly alias:

feed.select(

DD.data.datapoints.metaevent('viewed'),

DD.data.datapoints.metaevent('viewed')

.count().as('likes')

so we can easily refer to the column and sort the results in descending order:

feed.select(

DD.data.datapoints.metaevent('liked'),

DD.data.datapoints.metaevent('liked')

.count().as('likes')

).orderBy(

DD.data.feedColumn('likes').desc()

)

Note: the select method accepts datapoints and turns them into feedColumns — when you order the results make sure you use the latter.

Finally, we limit the results to just 4 items:

feed.select(

DD.data.datapoints.metaevent('liked'),

DD.data.datapoints.metaevent('liked')

.count().as('likes')

).orderBy(

DD.data.feedColumn('likes').desc()

).limit(4);

The select itself doesn’t return any data — it only serves as a schema of a data feed. To request the data from the feed you use DD.reader.read — the first argument is our data feed object, the second one is an optional subquery, and the third one is a callback function:

DD.reader.read(feed, {}, function(response){

addList('#mostLikedLetters', response.results);

});

The addList method isn’t part of the DD.js API, but of the site work on. It accepts a selector of an element to which you want to add the list and the data feed results:

DD.reader.read(feed, {}, function(response){

addList('#recentlyLikedLetters',response.results);

})

Now, let’s try it:

getMostLikedLetters();

The first request to read a feed will take longer as the feed needs to be created. The subsequent requests will return data instantly.

Important: a reminder for those who haven’t completed the first part of the tutorial. If you receive the following warning: “This query is trying to access data from a public data feed that doesn’t exist yet” then sign in do DD Console, open the Dev Mode from there and run your query again. This time the feed will be created.

Auto-refeshing Data Feeds

If everything is working correctly, we need to schedule how often the data feed should be refreshed. Depending on your needs you can refresh it “every hour” or “every Monday at 7 am”.

Tip: If you are interested in the real-time access then make sure to follow us on Medium — we’ll write a separate article about it.

Switch the browser tabs to the DD Console — there’s a button that will open the scheduler right above the table with the results. Set up the scheduler to update results every hour.