Calibre Metrics on a Geckoboard Dashboard 📈

📚 Follow the step by step setup guide

🏫 Watch the 1:30 video step by step setup guide

Tldr; setup guide

Get your Geckoboard API key
Deploy this app to Heroku
Visit the url of the heroku app you just deployed to find the webhook url (<your-deployed-app>.herokuapp.com/webhook)
For each site that you want to report metrics from, create a new webhook (Calibre→Site→Settings→Integrations) and paste in the webhook URL
You‘re done. Time to make the web fast. 🎉

Settings

GECKOBOARD_API_KEY - The API key from your Geckoboard account
METRIC_WHITELIST - (Optional configuration) Eg: visually-complete,oncontentload (Full list available below).

Metrics Calibre outputs

As of writing, Calibre outputs the following metrics. From time to time, new metrics will become available and this list will be updated.

console-warnings
speed-index
visually-complete
firstrender
lighthouse-best-practices-score
lighthouse-accessibility-score
lighthouse-performance-score
lighthouse-pwa-score
first-contentful-paint
first-meaningful-paint
dom-size
estimated-input-latency
first-interactive
consistently-interactive
json-size-in-bytes
image-size-in-bytes
font-size-in-bytes
js-size-in-bytes
css-size-in-bytes
html-size-in-bytes
page-wait-timing
page-size-in-bytes
asset-count
onload
oncontentload

Step by step walk through

All the links and reference that you need are available at the top of this README.

Visit the Geckoboard account details page, copy your API Key.

Click this deploy button:

Name the application, something like yourcompany-calibre-geckoboard.

Paste in your Geckoboard API Key.

Optional step - Add a comma separated list of metrics that you’d like sent to Geckoboard. (Leaving this blank means that Calibre will deliver ALL of the metrics that it records to Geckoboard)

Click Deploy.

Once the app has been deployed, click the view button.

Copy the '/webhook' URL.

Go to your Calibre account.

For each site that you want to report metrics from, create a new webhook (Calibre → Site → Settings → Integrations) and paste in the webhook URL

Check "Snapshot", and save the notification.

At the end of every snapshot Calibre will send the collected metrics to this app using the webhook you just set up. This app will format those metrics for Geckoboard and send it using the Geckoboard API key.

Once a snapshot has been completed, visit your Geckoboard account and click 'Add widget'.

Choose 'datasets' as the source. You should now see Calibre metrics 👍

For timeseries charts, it can be valuable to 'split' metrics by 'Device profile'. In the screenshot example below, you’ll notice that we have two profiles "Chrome Desktop" and "iPhone 6, 3G connection".

You did it! Great work. 🏆

Troubleshooting

If you’ve set everything up, run some snapshots and there appears to be no new Calibre datasets in your Geckoboard account, try running heroku logs --tail --app YOUR_APP_NAME_HERE to get a log from the deployed application.

If you think you’ve discovered a bug, issue or have ideas for how to improve calibre-geckoboard, please file an issue or raise a PR. (ps, We’ll send stickers and eternal 👏 for PRs)

calibreapp/geckoboard