twitter youtube

How to create dynamic date range selector in Klipfolio with Google Analytics API.

I recently had to create a dynamic date range selector for a Klipfolio dashboard. It took me more time than I would expect to complete this task and  I couldn’t really find any great resources to guide me. Therefore, here is my own tutorial.

The first part of this tutorial is divided in three steps :

1 – Creating two new variables.

2 – Creating a new klip.

3 – Creating a new source.

First of all, we’re going to create two new variables : Start_Date and End_Date. Then we will create a new klip with two Date Pickers as Input Selector. Each one of the variables will be assigned to a Date picker. Finally, we will simply build a Google Analytics query with our two variables, each depending on the value of the Date Picker.

1 – Creating two new variable.

Creating a new variable in Klipfolio is only possible from a dedicated menu accessible from the Klip Editor. Though the variable you will create won’t necessarily have something to do with this Klip. So you just have to build a new empty Klip or used an old one. Then you can access the advanced tools drop-down menu and click “Create a new variable.” In this tutorial we will name our two variables Start_Date and End_Date. Note that you don’t have to fill the Klip Editor value field. Here is a short video on how to do all this :

2 – Creating a new klip.

We are now going to create a new Klip with two User Input Control. In this tutorial, one will be called Start Date, the other End Date. One user control will be associated with the Start_Date variable while the other will be associated with the End_Date variable.To association a variable with a User Input Control, you just have to use the “Use variable” drop-down menu in your klip properties. Most of all, It’s important to associate each User Input Control to the corresponding variable regarding your own naming convention.


Therefore, each time you will select a date with a date picker it will fill the corresponding variable with the selected date. If you are selecting 01/01/2016 with the Start Date Date Picker the Start_Date variable will be equal to 01/01/2016.

3 – Creating a new source in Klipfolio

Finally, we will build a new advanced Google Analytics source. Regarding this step I strongly advise you to carefully read the following page on the Klipfolio support.. It might exceed the scope of this tutorial but It’s always better to have a deeper understanding of this kind of manipulation. To build your query I also strongly advise you to use the Google Analytics Query Explorer if you don’t already know it. So for example let say we have the following query :

all we have to do is replace the start-date and end-date value with {props.Start_Date} and {props.End_Date} . Expected output :{props.Startdate}&end-date={props.enddate}&metrics=ga%3Asessions%2C&dimensions=ga%3Adate

In other words, here is the structure you should always follow where adding a variable to a query {props.YourVariableHere}

This Google Analytics source should now automatically update each time you select a new date range with the associated Date pickers.