Important! This is an advanced topic intended for expert users. Please make sure that you carefully read these instructions as each step must be followed precisely in order to work. Check out the Glossary to familiarize yourself with the terms used to describe Klipfolio Dashboard.

Introduction - Klip Source Code

Welcome to Tips and Tricks #2! In this article, we are going to take our first steps towards editing Klip Source Code. Today's task is going to be to change a Klip's height using the Source Code editor in the Edit Klip workspace.

Each Klip you build has unique Source Code that defines the behaviour and properties of your Klip (Klip style, how the data is presented, and other adjustable properties). When you are working in the Edit Klip workspace using the Properties Editor you are using an interface that writes the code for you. It is possible to edit the Klip Source Code directly to write a Klip or adjust some of its properties, although this type of action is not typically recommended.

There are instances where editing a Klip's Source Code directly can be useful, for instance when changing your Klip's height. It is important to note that you need to be very careful when modifying your Klip's Source Code so as not to introduce errors into your Klip.

Changing your Klip's height

Each Klip type has a default Klip height that can only be modified by directly editing the Klip's Source Code. This feature is useful if you want to have all of your Klips on a dashboard line up (see the image below). In order to control your Klip's height, you will only need to insert a single line of code into the Klip's Source Code.

Whenever you are editing Source Code, you can undo any of your changes by clicking the Cancel button in the Source Code editor. As well, you can save a copy of your Klip and then work on copy of the Klip's Source Code without worrying about losing important data in the original Klip. Just remember to delete the extra Klips as you finish working on them.

Note: Klip's width is determined by the layout of your tab and cannot be modified in the Klip Source Code.

To change your Klip's height:

Note: This set of procedures assumes you are in the Edit Klip workspace either as result of building a new Klip or editing an existing Klip.

1. Click on the Source Code button.
2. Create a space below the "layoutConfig": value.



3. Type "height": ###, in the empty line of code, choosing an appropriate number value.

Note: The ### number value is in pixels and can be modified based on your preferences.



4. Click the Update button.

The Klip's height is changed to 300 pixels

5. Click the Save button.

The changes to your Klip are saved.

6. Check the Klip's appearance on the Dashboard page.

That's it for now, but I'll be back again soon with some more tips and tricks!

Got an idea for a future Tips and Tricks article? Then share your idea in one of these great places:

• Twitter
• Facebook
• Google+
• LinkedIn

Check out previous Tips and Tricks articles!

• Using Google Analytics to build KPIs

Tips & Tricks #1 - Using Google Analytics to build KPIs

I decided that this year I would make a New Year's resolution to start building better KPIs with Klipfolio Dashboard web and mobile. As an added bonus, I thought I would share my work and progress on the KlipBlog and in a new section in our Knowledge Base. I've got lots of great KPIs (key performance indicators) planned for the coming months, so make sure to check back regularly to see what's new.

This week I want to delve into Google Analytics - a topic I am certain we will revisit again (and often) in the future - and see how you can use it build web analytics KPIs in Klipfolio Dashboard. Another important aspect of working with Google Analytics is working with the XML data source to assign data to the Klip.

The topics covered in these tips and tricks articles are designed for intermediate or advanced users. Don't worry if you are still getting the hang of Klipfolio Dashboard web and mobile - I'll provide you with all the resources you need to get up to speed at the beginning of each article and when we encounter tricky parts.

Important how to articles

• How do I use Google Analytics as my data source?
• How do I work with XML to build a Klip?

Preview of the Web Analytic KPI

Building an automated web analytics dashboard

Google Analytics is one of the quintessential tools in the repertoire of the online marketers, especially for users looking to design a web analytics dashboard. Many users are probably already familiar with the Google Analytics reporting UI, which provides lots of great data on site visitors, traffic sources, and site content. Well, in order to plug that data into Klipfolio Dashboard you need to use the Data Feed Query Explorer to craft a query URL.

I guess that isn't entirely true, as you can export that data into CSV format and then plug it into your dashboard directly from your computer. But by doing this you will be missing out on an incredibly cool and important feature: automatic updates. By exporting the Analytics data using the Data Feed Query Explorer, you can use and reuse the query URL to get regular updates of your data. Then, whenever your data is updated, any Klips on your dashboard using that data will be automatically updated as well. That means once you are done building this KPI (assuming you are following along), then you won't need to update it ever again. Very cool, indeed!

Using the Data Feed Query Explorer can be tricky for users accustomed to the UI of the Google Analytics reporter, but it is an essential tool for crafting your URL. This is a topic that I plan to revisit in the future in more detail, but for now, I simply want to introduce the fields that are relevant to this particular KPI.

1. Data Feed URI - As you build your query, this URL in this field will change to represent that query. You will copy and paste this link into Klipfolio Dashboard once you are done crafting the query.
2. ids field - This is where you select which of your manage sites you want to retrieve your Analytics data.
3. Dimensions field - A Dimension is best thought of as a type or category of data. For instance, a dimension is a ga:visitorType such as New or Returning (versus a metric such as # of visitors).
4. Metrics field - A Metric is best though of as the count or metric associated with a dimension. For instance, a metric is the number of vistors (versus a dimension such as visitorType).
5. Date Field - The start and end-date determines the time period that the data is retrieved. However, it is important to note that once in Klipfolio Dashboard, you can modify these dates to provide up-to-date information (this will be explained below).

Crafting the URL

Using the Data Feed Query Explorer you will craft your URL to query the data you want from Google Analytics. Following these instructions, you will retrieve the following information: date of visit, total visitors, new visits, percentage of visits that are unique. Before starting these steps, refer to the Google Analytics how to article.

To craft the URL query

1. Select the website to monitor from the ids field.
2. Select the ga:date dimension from the dimensions field.
3. Select the ga:visitors, ga:newVisits, and ga:percentNewVisits from the metrics field.
4. Select appropriate start and end dates from dates field.

Note: The dates are going to be modified in Klipfolio Dashboard.

5. Click the Get Date button.
6. Confirm that the data retrieved is correct.
7. Copy the URL from the Data Feed URI field.

Note: You will be pasting this URL into Klipfolio Dashboard in a few moments, so don't lose it off your clipboard.

Refining the date parameters

Remember what I said about the automating the data retrieval so all your Klips using that data source will be automatically updated? Refining the date parameters is the critical step in setting this up, as it will allow you to change the data set from a historic metric to a moving or rolling metric (check out this article to learn more about time frames and comparative metrics). By modifying the date parameters of the URL, you will be able to retrieve fresh data from your Google Analytics at a predetermined refresh rate. Again, if you find yourself lost in the progression of these steps, please refer to the Google Analytics how to article.

To refine the date parameters

1. Paste the query URL into Klipfolio Dashboard.
2. Select the start-date field in the URL.

Note: It is formatted as YYYYMMDD.

3. Change the start-date to this exact phrase {date.last30Days}.
4. Select the end-date field in the URL.

Note: It is formatted as YYYYMMDD.

5. Change the end-date to this exact phrase {date.today}.
6. Click the Get Resource button.
7. Move on to the Edit Klip Workspace.

If you followed these instructions precisely, then the data source will now return a rolling metric that will always display the last 30 days worth of data up to the current date. If you are getting an error when you click the Get Resource, make sure to check the URL for any typos you may have accidently inserted.

Working with XML to assign data to your Klip

When you use the Google Analytics explorer, the data will be exported as an XML document. XML simplifies the distribution of data and makes working with large data sets easy - that is once you get the hang of XML. I recommend that you check out the how to article on XML for more information on how to work with this data format.

Once you have your URL plugged into Klipfolio Dashboard and have created a data source, then you can begin assigning that data to a Klip. In this example, I am going to use a Table Klip because I want to see my numbers as they coincide with each day in the reporting period (see preview above).

I want to start with first column of the table, the one that will display the dates in the reporting period. This is the most challenging step in completing this Klip, because we need to change the date format so that rather than reading a string of numbers such as 20111112, it will read as Dec 12, 2011. Follow these steps closely to get set up the date formatting.

To change the date formatting

1. Select the value node from the dxp:dimension parent node.

2. Click the Function Wrap button on the formula bar.
3. Select the Date and Time function category.
4. Select the DATE function.

Note: This will return a numeric epoch date, which will then be returned as a formatted date at steps 11-14.

5. Click the Format link in the formula editor.
6. Click the Insert Literal string button on the formula bar.
7. Type yyyyMMdd in the text field.
8. Click the Apply button.


Note: This will return an epoch date or a string of numbers. Don't worry, this will be addressed in the following steps.

9. Click directly on the DATE text in the formula editor.
10. Click the Function Wrap button on the formula bar.
11. Select the DATEVALUE function (from the Date and Time category).
12. Select the Properties tab in the Properties Editor.
13. Change the Format As to Date/Time.
14. Select the MMM dd, yyyy option from the Date Format menu.


The date is properly formatted and will appear in descending order with the last date of the reporting period at the top of the table.

The next step is to start assigning the actual numbers to the remaining three columns. Each of the metrics we will use (ga:visitors, ga:newVisits, and ga:percentNewVisits) are assigned to columns in precisely the same way, so I will only detail these steps once, and then you can reapply them as necessary. I will start with the ga:visitors metrics.

To assign XML metrics to the Klip

1. Select the @ value metric below the ga:visitors node.

Note: This will be a numerical value and each node associated with that path will be assigned to the table as an array, eg, in ordered rows in a single column.

2. Click the lock icon beside the dxp:metric path at the top of the Properties Editor.

This will tell Klipfolio Dashboard to only assign information associated with that specific node, eg., the one that contains the ga:visitors metric. Otherwise, each metric associated with @ value will be assigned to that column.

Repeat these steps for the remaining columns, looking instead for the ga:newVisits and ga:percentNewVisits specific @ value. Don't forget to lock the path down to return the metrics that are relevant to your query.

Conclusion

Once you've finished adding all the metrics to the Table Klip, you can save the Klip and add it to your Dashboard. As I stated earlier, the cool thing about this Klip is that it will automatically update to provide you with latest set of data. As well, you can use the same techniques for working with XML to create any number of Klips using this data source now that it is formatted and saved in your Library. A Sparkline or Bar chart Klip immediately comes to mind.

That's it for now, but I'll be back again soon with some more tips and tricks!

Got an idea for a future Tips and Tricks article? Then share your idea in one of these great places:

• Twitter
• Facebook
• Google+
• LinkedIn

Screen space is a precious commodity. As a KPI dashboard vendor, we understand that.  We are always thinking about how to design for density without compromising usability, experience, and value. So what happens when you are working with very large numbers in tight spaces? All those zeros are just not adding real value. You use an "undocumented feature" called abbreviation (abbr) in your Klip CSS. Here is an example of how you apply it a column of numbers in the style block of your Klip:

<style> revenue {
type: number;
format: "abbr"; }
</style>

This will display values as sortable numbers while automatically displaying "magnitude" as a suffix.

200.5 / 200.5
1500 / 1.5k
2500000 / 2.5M
3500000000 / 3.5G
4500000000000 / 4.5T
5500000000000000 / 5.5P
6500000000000000000 / 6.5E
7500000000000000000000 / 7.5Z
8500000000000000000000000 / 8.5Y

Just a quick caution: This feature is being shared with no additional documentation and ahead of conclusive testing.

School was a long time ago, and as with most things that history puts in the spin cycle, I have remembered only the brightest and darkest memories. The word play “I know what I like: I like what I know” was one of these memories that continues to help me understand how people approach new ideas, products, and constructs.

I was sitting in on a new customer kick-off meeting last week. In the back-and-forth dialog, it became apparent that they were focused on a particular type of visualization – one their users had become familiar with. There is value in familiarity; tremendous value, in fact. The energy needed to change user behaviour can be quite a hurdle.

However, the use cases that they were sharing with us did not support their chosen visualization. Here is a brief synopsis of their situation:

• Sizeable and geographically distributed sales organization
• Three levels of hierarchy, from VP to sales reps
• Requirement 1: Visualize “performance to plan” and “month over month trend”
• Requirement 2: Group regions and offer visibility into underlying data
• Requirement 3: Easily compare regions and reps by performance and trend

They were familiar with line charts, and as such had managed to plot monthly bookings compared to quota on a monthly basis. This does satisfy requirement 1, and to some extent, number 2 as well. However, this visualization choice does not easily allow users to explore the underlying data, or compare regions and reps.

We showed them an alternative solution; a drill-down Klip, where the data was aggregated first by region, then by rep. The individual regions or reps can be visually compared and sorted against one another with calculated sums and averages. We had opened their eyes to a new way of presenting their sales metrics.

The original question, however, has more to do with influencing behaviour. Our customer could proceed and offer their users only the new Klip. But why not also include the old visualization, as a separate Klip? Each would provide different value and complement one another, after all. And this way the dashboard would be less likely to be perceived as a threat to the familiar, the status quo. Give users something familiar, as well as something new.

As for me, both visualizations have their place on my KPI dashboard.

It's been a busy week of meeting with clients and prospects here. These meetings are always interesting, and often we end up talking about the same sorts of things - getting data using ODBC being one of the most common.

If you are connecting to a Microsoft SQL Server database through ODBC, you are likely familiar with the unusual "z:row" attribute based formatting of the response. (Or even worse if your column names have spaces or other symbols in them.)

It can be challenging to pick that response apart and get your data into a useful form.

Here is a little known trick that will simplify your Klip building process significantly. By using the Transact-SQL "FOR XML PATH" command, you can have your database return very cleanly formatted XML. This makes it a breeze to write effective CSS.

More details can be found in the MSDN article: What's New in FOR XML in Microsoft SQL Server 2005

Here is an example: Using the AdventureWorks DB sample, add "FOR XML PATH" to the end of the Sales.vSalesPerson view's query and you'll get back XML like this:

<row>
  <SalesPersonID>268</SalesPersonID>
  <FirstName>Stephen</FirstName>
  <MiddleName>Y</MiddleName>
  <LastName>Jiang</LastName>
  <JobTitle>North American Sales Manager</JobTitle>
  <Phone>238-555-0197</Phone>
  <EmailAddress>stephen0@adventure-works.com</EmailAddress>
  <EmailPromotion>0</EmailPromotion>
  <AddressLine1>2427 Notre Dame Ave.</AddressLine1>
  <City>Redmond</City>
  <StateProvinceName>Washington</StateProvinceName>
  <PostalCode>98052</PostalCode>
  <CountryRegionName>United States</CountryRegionName>
  <SalesYTD>677558.4653</SalesYTD>
  <SalesLastYear>0.0000</SalesLastYear>
</row>

<row>
  <SalesPersonID>275</SalesPersonID>
  <FirstName>Michael</FirstName>
  <MiddleName>G</MiddleName>
  <LastName>Blythe</LastName>
  <JobTitle>Sales Representative</JobTitle>
  <Phone>257-555-0154</Phone>
  <EmailAddress>michael9@adventure-works.com</EmailAddress>
  <EmailPromotion>1</EmailPromotion>
  <AddressLine1>8154 Via Mexico</AddressLine1>
  <City>Detroit</City>
  <StateProvinceName>Michigan</StateProvinceName>
  <PostalCode>48226</PostalCode>
  <CountryRegionName>United States</CountryRegionName>
  <TerritoryName>Northeast</TerritoryName>
  <TerritoryGroup>North America</TerritoryGroup>
  <SalesQuota>300000.0000</SalesQuota>
  <SalesYTD>4557045.0459</SalesYTD>
  <SalesLastYear>1750406.4785</SalesLastYear>
</row>

Which is trivial to take apart with Klipfolio Dashboard's CSS processing:

<style>
  SalesPersonID { type: text; itemcol: 1; }
  FirstName { type: text; itemcol: 2; }
  LastName { type: text; itemcol: 4; }
  SalesLastYear { type: number; format: "currency"; itemcol: 5; }
  SalesYTD { type: number; format: "currency"; itemcol: 6; }
  SalesQuota { type: number; format: "currency"; itemcol: 7; }
  row { type: item; definition: all; }
</style>

For reference, here is the new query:

USE AdventureWorks
SELECT  s.SalesPersonID, c.Title, c.FirstName, c.MiddleName, c.LastName, c.Suffix,
        e.Title AS JobTitle, c.Phone, c.EmailAddress, c.EmailPromotion,
        a.AddressLine1, a.AddressLine2, a.City, sp.Name AS StateProvinceName, a.PostalCode, cr.Name AS CountryRegionName, st.Name AS TerritoryName,
        st.[Group] AS TerritoryGroup, s.SalesQuota, s.SalesYTD, s.SalesLastYear
FROM    Sales.SalesPerson AS s INNER JOIN
        HumanResources.Employee AS e ON e.EmployeeID = s.SalesPersonID LEFT OUTER JOIN
        Sales.SalesTerritory AS st ON st.TerritoryID = s.TerritoryID INNER JOIN
        Person.Contact AS c ON c.ContactID = e.ContactID INNER JOIN
        HumanResources.EmployeeAddress AS ea ON e.EmployeeID = ea.EmployeeID INNER JOIN
        Person.Address AS a ON ea.AddressID = a.AddressID INNER JOIN
        Person.StateProvince AS sp ON sp.StateProvinceID = a.StateProvinceID INNER JOIN
        Person.CountryRegion AS cr ON cr.CountryRegionCode = sp.CountryRegionCode
FOR XML PATH

What are your thoughts? Do you have a better way to get at your data? Share it with us, and we'll share it with the community.

First of all let me share with you two recent musings about KlipFolio. NoHeat.com sticks it to the big boys in an article entitled Klipfolio takes on Microsoft and Google with a solid sidebar, and Simon Dickson at BT Broadband Office calls us the "dark horse" among sidebars (a title we take as quite the compliment) in this article called Enhance your Productivity with a Bit on the Side.

Also, in an effort to continually improve the KlipFolio.com experience, and to add features that will drive Klip downloads for authors, here are two recent additions to KlipFolio.com:

1. Klip Localization. Klip authors can set the language, country and now even your Klip's specific location. Doing this will make sure your Klips are being seen by the right people.

2. Klip Screenshots. Check out the Tagesschau.de and the KlipFolio Forum Klips to see this in action. Authors can now upload up to 3 screenshots of their Klip. Klips with screenshots get more downloads, so don't delay.

If you are a Klip author, you likely got an e-mail from us yesterday. And if you'd like, you'll get an email next month also, and every month thereafter. It contains summarized statistics of all your live Klips for the previous month. Why are we doing this? Well, we hope that the information will be of use to Klip authors who may not have the time to keep a close eye on their Klip’s performance. We also wanted to bring attention to the some of the stats that authors have access to that they might not know about.

One of the lesser known features that we rolled out with the new version of KlipFolio.com last year is the enhanced usage statistics that are now available to all users (previously you had to pay to get access to them). These stats show you:

• how many times your Klip was installed (added to a user’s KlipFolio)
• the number of daily users who were using your Klip
• how many clicks your Klip received
  

By default your Klips won’t be reporting these statistics. To enable them, all you need to do is add
report true /report to your setup block in your .klip file and re-upload it to KlipFolio.com. It's that easy to turn on advanced stats.

Now, if you'd rather not receive monthly stats via e-mail, you can change your subscription settings by logging in to your KlipFolio.com account and clicking on "Modify Account". There you'll find options to unsubscribe from all of KlipFolio.com's newsletters.

• uploaded Klips should now appear properly on KlipFolio.com
• users can enter tags using any characters they like
• site comments, user profiles, and other form-driven data appear properly

You can use the link below to easily add KlipFolio to the list of RSS readers in Firefox 2. We got the idea from a blog post at NetVibes.

To get started: 

Click here to add KlipFolio as the default RSS Reader for FireFox 2

When you click the above, you'll get a dialog box:

Click 'Yes' and now KlipFolio appears in the list of applications to read a feed.

When you subscribe to a feed in KlipFolio, KlipFolio automatically loads the URL into the Feed Viewer.

Just press the "Add Feed" button and you're all set to monitor the feed on your desktop using a Klip. Firefox 2 rocks!

Time for another sneak peek at KlipFolio 4.0! This week we've got system monitors for you. With 4.0 you'll be able to monitor your CPU and memory usage as well as the strength of the WiFi signal of the access point you're connected to.

One of the key things here is that Klips will no longer have to refresh to do stuff. It's a new timer event. It opens up the door to lots of new Klip presentation capabilities.

There's lots more 4.0 on the way. Stay tuned!

 PS. Check out the new Flickr Klip on KlipFolio.com

Then, to make it easier to track the performance of all of your Klips, we've also just launched the Klip Tracker for Klip Providers Klip. Even though it's quite the workhorse, this Klip is super fast. Also, there is an extra gift included in the Klip - a popularity chart which is not available anywhere else right now.

Enjoy

Allan

We're working on a new suite of Klips for KlipFolio.com, including:

- New & Updated Klips on KlipFolio.com (now with language and adult content filtering)
- Klip Tracker (to monitor downloads, comments, ratings, etc. for specific Klips and sets)
- KlipBlog (updated to the new system and already released)
- Klip Statistics (to monitor detailed stats for a specific Klip--you'll have to log in with this one)

Time permitting, we're also looking at Klips for most popular tags and/or most popular sets.

For Klip developers who want to play around with their own KlipFolio.com Klips, we've built RSS feeds for every Klip. They can be accessed through:

http://www.klipfolio.com/phplib/scripts/rss/klip_rss.php?kid=####
(Where #### is the Klip's ID number)

Also, you can retrieve information about multiple Klips by comma-seperating IDs, like so:
http://www.klipfolio.com/phplib/scripts/rss/klip_rss.php?kid=####,####,####,#### ...

We'll be using this feed sepcifically in the Klip Tracker, due soon.

Just in time for the World Cup 2006, we've uploaded 3 very cool Klips to keep you on top of the action - World Cup News, Groups & Standings and Photos. What's really nice about these three Klips is that they are very configurable; choose your teams, choose your language for news etc ... You've likely already seen them if you visit KlipFolio.com regularily as they have shot up to the most popular spots.

Keep in mind there are many other Klips that will also have World Cup news - just do a search for worldcup , weltmeisterschaft , fifa or fussball and you'll get a good list.