Feat: Add Plausible/Analytics to MVP to track page view/stats

[nelsonic]

Story

As a team of people building an App
we want to track the stats of who is viewing the App and trying it out
so that we know if our efforts are producing fruits.

We are currently exploring using Plausible.io/analytics for tracking our stats, see: dwyl/technology-stack#127

Todo

• Add mvp.fly.dev to plausible

  Note: if that doesn't work, we may need to create a subdomain mvp.dwyl.com and redirect it. 💭

• Add the JS snippet to the root template for the mvp
• Create PR
• Assign PR for quick review
• Deploy the JS snippet
• Track analytics in Plausible dashboard.

Going to work on this now with @seaneady on the call. 👌

[nelsonic]

Direct link: https://plausible.io/mvp.fly.dev

[nelsonic]

PR: #288

[nelsonic]

Going to add documentation for this once it's shipped because want to include some relevant screenshots of the dashboard and graphs. 📈

[nelsonic]

Merge CI in progress: https://github.com/dwyl/mvp/actions/runs/4102786893

Waiting patiently for this to deploy. ⏳

[nelsonic]

Deployed: https://github.com/dwyl/mvp/actions/runs/4102786893

Now for the moment of truth! 🤞

[nelsonic]

Yep: the JS snippet is there: view-source:https://mvp.fly.dev/

Now to check in Plausible.io!

[nelsonic]

Waiting ... https://plausible.io/mvp.fly.dev

[nelsonic]

The snippet is definitely there and we've refreshed the https://mvp.fly.dev page a few times but still "waiting" ... ⏳

[nelsonic]

Looks like we're just going to have to be patient on this ... ⏳

[nelsonic]

You should all have access to the stats at: https://plausible.io/mvp.fly.dev ⌛

[SimonLab]

Plausible script blocked:

Reading https://plausible.io/docs/troubleshoot-integration#keep-seeing-a-blinking-green-dot

Does your site use a Content Security Policy (CSP)? If it does, you need to add plausible.io specifically to the allowed domains. More info here.

[nelsonic]

@SimonLab good catch. that's what I was afraid of. Looks like we're going to have to go down the sub-domain route ...
unless this is an issue that other people have faced using Plausible/analytics ... 💭

[nelsonic]

This is what I see: https://mvp.fly.dev/

Refused to load the script 'https://plausible.io/js/script.js' 
because it violates the following Content Security Policy directive: 
"script-src 'self' https://cdnjs.cloudflare.com 'unsafe-eval' 'unsafe-inline'". 
Note that 'script-src-elem' was not explicitly set, 
so 'script-src' is used as a fallback.

[nelsonic]

Reading: https://stackoverflow.com/questions/34852682/refused-to-load-the-script-because-it-violates-the-following-content-security-po/34853082 👀

[nelsonic]

Reading: https://web.dev/csp ⏳

[nelsonic]

Follow-up PR to add the Content Security Policy: #289 ⏳

[nelsonic]

Patiently waiting for deploy: https://github.com/dwyl/mvp/actions/runs/4103255349

⏳

[nelsonic]

Deployed. 🚀
Checking now .... 🔍

[nelsonic]

https://mvp.fly.dev/

Looks like I made it worse ... 🤦‍♂️ 🤷‍♂️

Refused to load the script 
'https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.2/cdn.js' 
because it violates the following Content Security Policy directive: 
"script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://plausible.io".

mvp.fly.dev/:1 Refused to load the script 'https://plausible.io/js/script.js' 
because it violates the following Content Security Policy directive: 
"script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com".

mvp.fly.dev/:1 Refused to load the script 'https://plausible.io/js/script.js' 
because it violates the following Content Security Policy directive: 
"script-src 'self' https://cdnjs.cloudflare.com 'unsafe-eval' 'unsafe-inline'". 
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Going to look at how to add multiple domains to the same CSP ... 🧑‍💻

[SimonLab]

We can try with only the plausible CSP maybe?

[nelsonic]

Re-opening. Happy to close once this is fully working. 🤞🏼

[SimonLab]

Still failing to load the script:

[nelsonic]

Hmm ... are we at the point where we should open an issue on: https://github.com/plausible/analytics/issues ?

[nelsonic]

https://stackoverflow.com/questions/17789426/whitelist-multiple-domains-in-content-security-policy
Gonna try and list all domains in a single CSP directive. 🧑‍💻

[nelsonic]

Next attempt: #291

[nelsonic]

Is this better? https://mvp.fly.dev/

Refused to load the script 'https://plausible.io/js/script.js' 
because it violates the following Content Security Policy directive: 
"script-src 'self' https://cdnjs.cloudflare.com 'unsafe-eval' 'unsafe-inline'". 
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[nelsonic]

reading: https://csper.io/blog/csp-violates-the-content-security-policy-directive

[nelsonic]

Issue opened: plausible/analytics#2648 🤞

[SimonLab]

Not a lot better unfortunately:

I'll try to understand a bit more the CSP syntax

[nelsonic]

Nope. this broke the whole site! 🤦‍♂️

[nelsonic]

@SimonLab thanks for looking into this. 🤞

[SimonLab]

Fixed with #293

[nelsonic]

Thanks @SimonLab 👌

[nelsonic]

https://plausible.io/mvp.fly.dev

[nelsonic]

you should all have access to the dashboard. please confirm. 🙏

Don't know how useful this data is going to be ... 🤷‍♂️
we aren't publicising the MVP for now. 💭