How to build a stats-driven widget to share your blog posts

Here is my demo blog — I’m tracking which posts are viewed there.

There’s also a blog of my imaginary friend who was kind enough to embed the widget to promote my posts.

1.

Set up DataDrivenJS ProjectFirst, you need an account.

Go to the DataDrivenJS website and sign up for free.

Once logged in, create a new project.

Each project is a separate workspace to track and access your data.

After a couple of seconds you will get a unique tracking code containing your project name and key:Copy the URL to DD.

js from the script’s src — you will need it in a moment.

2.

Customise the Tracking ScriptI’ve prepared a custom tracking code for you which automatically tracks the necessary blog post details:This script captures the URL, title and image URL of every visited blog post on your blog and calls the tracking API to send the data to DataDrivenJS as a metaevent named “article”.

For more details on DD.

js tracking mechanism and APIs, refer to the documentation.

Paste the script into an editor and replace the following placeholders:<YOUR UNIQUE TRACKING CODE URL> — Replace it with the URL you got upon setting up the project (see Step 1).

<YOUR POST TITLE SELECTOR> — This is the selector of the title element of a post.

If you are using WordPress, replace it with .

entry-title.

Otherwise, try h1 .

<YOUR POST IMAGE SELECTOR> — This is the selector for the post’s main image which will be used as a thumbnail in our widget.

If you are using WP, replace it with .

wp-post-image , otherwise you will need to find a selector matching your thumbnail image.

Once you have replaced the placeholders, your tracking script is ready to be placed on your blog.

3.

Add the Tracking Script to Your BlogYou can inject the tracking script to your blog using a tag manager or directly to your theme.

If you know how, add the script only to blog posts and not to other pages.

4.

Use Dev Mode to Check If the Tracking WorksNow that you’ve added the tracking script, how do you know that the data is being tracked correctly?Switch back to DataDriven (DD) Console.

If you are still at the tracking script screen, then click [continue].

At this point you might be greeted with a “No data yet” message, but don’t worry just yet, the data comes with a delay.

You can test if and what data is tracked using the Dev Mode.

To enable it, choose “Dev Mode” on the DD Console, it is placed in the top right corner, next to the hamburger menu:Image borrowed from this tutorial about social proofs and sorting list by dataEnter the URL of any of your blog posts and click “Open”, the post will open in a new browser tab.

Check out your browser’s console to see the tracked events via DataDrivenJS.

DataDrivenJS will initially capture some standard data points for every page where tracking is activated.

If you scroll all the way down, you should see the tracked metaevent named “blogpost” containing your post title, URL and image URL:The last item in the console shows the tracked event with necessary blogpost detailsIf you do, it means that you correctly implemented the tracking.

5.

View Tracked DataYou will need to wait until your session (visit) expires, before any data tracked during that session becomes available in DD Console.

A session expires automatically due to user’s inactivity, but if you don’t want to wait, run:DD.

tracker.

stop()from your browser’s console to stop the session immediately.

After about a minute, your data will be available.

To see all the data tracked so far in your project, go back to DD Console and select the “Tracked Data” from the menu.

Make sure to select the “CUSTOM” option from the filters, to quickly find the “article” metaevent.

You can quickly preview the event’s stats from there:If you select “custom” filter you will see all the data points that you have implemented by yourself.

6.

The WidgetNow, that we have the data, we can use it to show our top posts.

The snippet below shows your top five blog posts on three lists: This Week, This Month and All Time — the last one shows the data since the day you started the tracking, not the day you started your blog :)Copy the above snippet and update the following placeholders:set the <YOUR CONTAINER SELECTOR> placeholder to the actual selector of the HTML element on a page where you want to inject your widgetreplace <YOUR UNIQUE TRACKING CODE URL> with the URL you got upon setting up the project (see Step 1) — it’s the same URL you used in the tracking snippet.

You may also want to update the styleDef to set styles to match the website’s look.

Of course, you can set the styles in your stylesheets instead.

Now, before you share the widget with anyone, you need to authorise the public access to the data.

7.

Authorise Public Access to Your DataAll the data you track with DataDrivenJS is private by default and only you can access it.

To make some of your data publicly accessible — in this case your top five posts — you need to read it first in the Dev Mode.

Open the Dev Mode from DD Console, but this time enter the URL of a page to which you want to add the widget.

Click continue and you will land on that page.

If you haven’t added the widget to the page, paste the widget snippet into your browser’s console and run the code from there.

At this point, a public data data feed with the top blog posts ‘This Week’ will be created.

The first query takes about 20 seconds, but don’t worry, the subsequent requests will be very fast.

Switch back to the DD Console.

It will show you the contents of the created feed.

8.

Schedule Data Feed UpdatesNow, you need to decide how often you want the feed to be updated.

Since the feed contains the data from the running week it will be enough to refresh it just once or twice a day.

Image borrowed from this tutorial about social proofs and sorting list by dataClick the calendar icon (right above the table with the results) to open the scheduler.

You may want to enter your email to the list of the top articles directly into your mailbox every time the feed is refreshed.

You can also manually refresh the feed at any time by clicking the icon with the circling arrows (next to the calendar icon).

9.

Removing DD.

js Dependency from The WidgetThis step is optional, but recommended.

The widget’s code dynamically loads the DD.

js library to build a query that will create and read the data feeds with the stats.

However, once the feeds are created, we can ditch DD.

js and use “vanilla” JavaScript to read the data.

This will save users from loading extra kilobytes.

All you need to do is copy the public data feed key from the DD Console and use it to replace<YOUR DATA FEED PUBLIC KEY> placeholder in the widget snippet.

10.

Prepare Data Feeds for “This Month” and “All Time” listsSo far we have prepared the data feeds for the “This Week” list and need two more.

Go back to the page with the embedded widget — you must still be in the Dev Mode — and click “This Month”.

Moments later the feed will be created.

Repeat the steps 8.

and 9.

as described above.

Then click “All Time” in the widget and again, repeat the steps 8.

and 9.

11.

Share Your PostsThe widget is ready and you can embed it anywhere you won’t.

I hope you will find it useful in promoting your content.

You can easily modify the widget to make more advanced lists.

You can also create separate lists for mobile and desktop or filter the lists by author, category or keywords.

If you would like to make any customisations then let me know in the comments — I’ll try to help.

Thanks!.. More details

Leave a Reply