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.

Klip-screenshot

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 :

https://www.googleapis.com/analytics/v3/data/ga?ids=ga%XXXXXXX&start-date=2017-07-01&end-date=2017-07-31&metrics=ga%3Asessions%2C&dimensions=ga%3Adate

all we have to do is replace the start-date and end-date value with {props.Start_Date} and {props.End_Date} . Expected output :

https://www.googleapis.com/analytics/v3/data/ga?ids=ga%XXXXXXX&start-date={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.