- 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. 🎉
- GECKOBOARD_API_KEY - The API key from your Geckoboard account
- METRIC_WHITELIST - (Optional configuration) Eg:
visually-complete,oncontentload(Full list available below).
As of writing, Calibre outputs the following metrics. From time to time, new metrics will become available and this list will be updated.
console-warningsspeed-indexvisually-completefirstrenderlighthouse-best-practices-scorelighthouse-accessibility-scorelighthouse-performance-scorelighthouse-pwa-scorefirst-contentful-paintfirst-meaningful-paintdom-sizeestimated-input-latencyfirst-interactiveconsistently-interactivejson-size-in-bytesimage-size-in-bytesfont-size-in-bytesjs-size-in-bytescss-size-in-byteshtml-size-in-bytespage-wait-timingpage-size-in-bytesasset-countonloadoncontentload
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. 🏆
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)