My first experience with the Gtmhub’s insight platform

Gtmhub provides a platform to develop custom insights – from the algorithm that crunches the data to the UI (insight widgets we call them). The insight engine is powered by the R language which didn’t mean anything to me until soon. However, I decided to do a test run on our platform to see what could kind of common user do with it. I am a designer, not a developer. I don’t write code. So, my example may look too basic for you but I’ll try to develop this into weekly series with increasing complexity.

Here was my task for the day: Take some raw data, display simple number in simple UI. All this has to have at least some minimal value.

I decided to create a simple widget for myself – displaying number of posts in my blog. My blog is powered by the awesome WordPress, and unfortunately we haven’t included it in the first batch of built-in connectors. Fortunately WordPress is powered by MySQL for which we do have a connector. I know is not the best solution to scratch around directly in the database instead of the API. But! WordPress change their base schema rarely and also I’m just pulling data, not modifying. So, nothing to worry about.

Step 1: Connecting data source

This is easy.

  1. Go to Setup > Data sources > Add data source.
  2. Select MySQL
  3. Enter the credentials
  4. Select wp_post (this is where WordPress keeps all the content types)
  5. Give it a name and save
  6. Sync data

Step 2: Creating the entity

The entities help you to match and structure the input data. In this scenario I need only the total number of the published posts, nothing else. So, the fields in my wordpress posts entity are: post_type, post_status

name: wp_posts
title: WordPress Posts
description: My posts in a custom WP installation
fields: 
 -
 name: post_status
 title: Post status
 type: string
 -
 name: post_type
 title: Type
 type: string

After creating the entity click Connect and map the fields to the MySQL data source: post_status to post_status, post_type to post_type

Step 3: Creating the insight’s algorithm

This is probably the easiest task for every developer. For me… it took me a little while to check it on google and stackoverflow, but everything needed was in our documentation. Here is what I came up with:

posts <- entity("wp_posts")

filteredByType <- filter(posts, post_type == "post")
filteredByStatus <- filter(filteredByType, post_status == "publish")

count <- nrow(filteredByStatus)
out(
 count = count
)

Here is what this code do line by line:

  1. Gets the data from the entity with the blog posts
  2. Filter the content type to only ‘posts’ (because I had pages and some other custom content types like articles and products) and assign it to a filteredByType
  3. Filter filteredByType collection by status ‘published’, because otherwise you will get the number of the drafts included in the total number. Assigns the new collection to filteredByStatus
  4. Count the items inside filteredByStatus
  5. Sends the data to the widget with the name count. This is the name you have to use when designing the insight

Step 4: Creating the insight’s UI

My favourite part. I did a simple widget that adapts depending on its size using only the built-in styles, described in our Developer Styling Framework. It is available in your account. (Login > Click on your avatar in the upper right corner and choose Developer’s styling guide)

 <div class="col-5 x1-col-12">
    <img src="data:image/jpeg;base64" />
 </div>
 <div class="col-7 x1-col-12">
    <div class='title'>Total posts</div>
    <div class='subtle-text pb-2 bb'>in my wordpress blog</div>
    <div class="title-xxlg mt-2">{{ data.count }}</div>
</div>

That’s it. Simple widget developed in no time. Here is how it looks like:

wp

Leave a Reply

Your email address will not be published. Required fields are marked *