This guide is designed to help developers make gtmhub widgets faster and easier. As we use Twitter Bootstrap as a base front-end framework and minimal amount of AngularJS code developer from all levels would be able to create widgets in no time.

Basic concepts

Here is a list of the basic concepts, components, modules that are used across the system:

  • Metric - the smallest part of an Insight. This could be as smallest as single number.
  • Insight widget - single unit comprising an algorithm (R code) and UI (HTML) displaying one or more metrics in the form of a widget
  • Insightboard - a dashboard showing set of insight widgets

The insightboard grid

Our insighboards uses 6-column grid. Respectively each widget can be adjusted from 1 to 6 column width. In each size the widget receives new css class depending on its size. This is extremely helpful if you want to transform the content inside the widget based on its size.

For example a widget that is 2-column wide will receive a CSS class .x2 Same logic applies for the rows. A widget that is 4 rows in height will get .y4 CSS class This approach is similar to the media queries in CSS3.

And here is a practical example for widget 3-columns wide and 2-rows high:

.title { 
font-size: 1em;
}
.x3.y2 .title {
font-size: 0.7em;
}

The title will be always 1em except when the widget is expanding in 3 columns and 2 rows.

Hello, Widget! markup

Explaining a simple widget with minimal minimal set of components - a title and a metric with some styles applied.

Here is the actual markup of the insight widget above. Let's break it down (the full css reference is available from the sidebar, here we just explain the idea):

<div class="text-right"> 
<div class="title o-5">Acquisition cost</div>
<div class="title-xxlg mt-2 positive">
<metric name="Customer acquisition cost">{{ data.acquisitionCost | currency : $ }}</metric>
</div>
</div>

Set of CSS classes

  • text-right Aligns the text in the element on the right. This is actually a class inherited from Twitter Bootstrap
  • o-5 Sets the element's opacity to 0.5 (semi-transparent)
  • title Applies large font size to the text insde an element
  • title-xxlg Applies super big font size to the text insde an element
  • mt-2 Sets the top margin of the element to 40px (2 multiplied by spacing index, in our case this is 20px)
  • positive Sets the color for the text to green

HTML element/AngularJS directive called <metric>

The metric directive transforms your dynamic numbers to numbers that can be added to a goal. If you hover on the number in the widget above you will see the green '+' sign. That means that you can set Acquisition cost number as a target in a goal.

AngularJS string formatted to display currency { { data.acquisitionCost | currency : $ } }

This is a standard AngularJS filter. In this example the algorithm behind the insight provides you acquisitionCost metric. The | currency : $ part just formats this number as currency.

Also, the metric directive requires the name attribute that will be used when setting a target. It can be a text of your choice.

Did this answer your question?