Plausible Analytics iOS widget for top pages with Scriptable

Scriptable is a nifty iOS app which lets you use scripts to create iOS widgets to feature on your home screen. Inspired by the Scriptable iOS widget created by Fabrizio Rinaldi that shows current visitors and daily pageviews from your Plausible Analytics, I wanted a widget that would display the top pages over a specified time period. So, I decided to make one.

I’m not a very adept coder so I struggled over every portion of this but I managed through trial and error.

Using the Scriptable app and the following code, you’ll want to replace the text in bold. Make sure to replace the $ too when you input your info.

BASE_URL = the URL of your Plausible instance. If you use the cloud version it will be plausible.io or if it’s self-hosted, you’ll use that URL.

SITE_ID = the site ID in your Plausible account. In my case it’s becausebirds.com.

APITOKEN = the API token you create in your account. User>Settings>API Keys

day = adjust the time period for your stats. I have mine set for the current day.

You can customize the header, colors, fonts, and text size by modifying the code.

1const url = 'https://$BASE_URL/api/v1/stats/breakdown?site_id=$SITE_ID&period=day&property=event:page&limit=3'
2
3let req = await new Request(url)
4
5req.headers = {"Authorization":"Bearer $APITOKEN"}
6
7var result = await req.loadJSON()
8
9// Create widget
10let w = new ListWidget()
11w.backgroundColor = new Color("#8e7cc3");
12
13// #Title
14
15t1 = w.addText("Blog Posts of The Day");
16t1.font = Font.boldSystemFont(24);
17t1.textColor  = Color.yellow();
18
19w.addSpacer()
20
21// #1
22
23if (result.results[0] == undefined){
24 
25t2 = w.addText("No views today..." );
26t2.font = Font.boldSystemFont(14);
27t2.textColor  = Color.white(); 
28   
29}
30
31else {
32  const page1 = (result.results[0].page);
33const visitors1 = (result.results[0].visitors);
34
35  t2 = w.addText("1. " + page1), t2a = w.addText(visitors1 + " views " );
36t2.font = Font.boldSystemFont(14);
37t2.textColor  = Color.white();
38t2a.font = Font.systemFont(11);
39t2a.textColor  = Color.yellow();
40
41}
42
43// #2
44
45if (result.results[1] == undefined){
46  
47w.addText("");
48
49}
50
51
52else {
53
54const page2 = (result.results[1].page);
55const visitors2 = (result.results[1].visitors);
56
57t3 = w.addText("2. " + page2), t3a = w.addText(visitors2 + " views " )
58t3.font = Font.boldSystemFont(14);
59t3.textColor  = Color.white();
60t3a.font = Font.systemFont(11);
61t3a.textColor  = Color.yellow();
62}
63
64//3
65
66if (result.results[2] == undefined){
67  
68w.addText("");
69  
70}
71
72else {
73  
74const page3 = (result.results[2].page);
75const visitors3 = (result.results[2].visitors);
76  
77t4 = w.addText("3. " + page3), t4a = w.addText(visitors3 + " views " )
78t4.font = Font.boldSystemFont(14);
79t4.textColor  = Color.white();
80t4a.font = Font.systemFont(11);
81t4a.textColor  = Color.yellow();
82
83	}
84
85// wrap up
86
87if (config.runsInWidget) {
88  Script.setWidget(w)
89} else {
90  w.presentMedium()
91}
92Script.complete()

Check out the widget on my iPad. It’s simple but does the trick.

Plausible Analytics iOS widget for top pages using Scriptable

Comments from the community

Leave a comment