2a:null 2b:["$","title",null,{"children":"Simple, privacy-friendly web analytics | Christoph Pahmeyer | Observable"}] 30:T707,md`Would you like to know how frequently your notebooks (or websites) are read/visited, but prefer not to use [Google Analytics](https://observablehq.com/d/e334557daf9985b1) or any of the like? Then this notebook is for you! In essence, we are setting up a cloud-hosted database ([IBM Cloudant](https://www.ibm.com/cloud/cloudant)) where a document is stored every time one of our notebooks is visited. As we aren't storing any private info (such as the visitors IP address), nor setting any cookies, the approach is compliant with cookie laws and privacy regulations both in the EU and US. No need for setting up a cookie consent prompt 🍪🇪🇺🤝🇺🇸🎉👯 However, cookieless web analytics comes with a set of drawbacks, such as being unable to identify returning visitors. If you're interested to find out more about the differences between cookie based and cookieless web analytics, [Plausible.io](https://plausible.io/) has a good writeup on their [blog](https://plausible.io/blog/google-analytics-cookies#can-you-get-web-analytics-without-cookies)! ## Usage > **Warning:** When importing the analytics function from this notebook, the number of visitors (of the notebook(s) where you included it) will be stored in a public IBM Cloudant instance. This means that anyone may query the number of pageviews / reads of your notebooks. If you would like to keep this information private, follow the steps outlined in the [How it works](#how_it_works) section in order to create and use your own database instance instead In the notebooks you would like to keep track of, simply include the following two cells: \`\`\`js import { analytics } from '@chrispahm/simple-privacy-friendly-web-analytics' analytics(html\`\`.href) \`\`\` ### Analyzing notebook performance `31:T4e1,{ // use the queryPageviews function without arguments to query the number of hits // for the current notebook const noOfPageViews = await queryPageviews().then(res => res[0]?.value); // the rest of this cell is just the styling const container = html`

You are the ${ordinal_suffix_of( noOfPageViews )} person to visit this notebook!

`; text.style.position = 'absolute'; text.style.left = '0px'; text.style.right = '0px'; text.style.top = '50px'; text.style.margin = 'auto'; text.style.textAlign = 'center'; text.style.width = '100%'; const confettiElement = html`