Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jiacai2050/pageview-worker

Page View backend based on Cloudflare Workers and KV.
https://github.com/jiacai2050/pageview-worker

cloudfare-api cloudflare cloudflare-worker cloudflare-workers pageview

Last synced: about 2 months ago
JSON representation

Page View backend based on Cloudflare Workers and KV.

Awesome Lists containing this project

README

        

#+TITLE: Pageview Worker
#+DATE: 2023-04-05T15:09:21+0800
#+LASTMOD: 2023-04-05T15:09:21+0800
#+AUTHOR: Jiacai Liu
#+OPTIONS: toc:nil num:nil
#+STARTUP: content

Page View backend based on [[https://developers.cloudflare.com/workers/][Cloudflare Workers]] and [[https://developers.cloudflare.com/workers/runtime-apis/kv/][KV]].

[[file:pageview.jpg]]

Live demo:
- https://jiacai2050.github.io/pageview-worker

There are two pages containing [[file:demo/tracking.js]] for this live demo:
- [[https://jiacai2050.github.io/pageview-worker/demo1.html][Demo 1]]
- [[https://jiacai2050.github.io/pageview-worker/demo2.html][Demo 2]]

#+begin_quote
⚠️ Demo pages will collect your IP/Country/City, click at your own risk.
#+end_quote
* Use at you own website
- Setup workers, refer to [[https://developers.cloudflare.com/workers/get-started/quickstarts/][quickstarts]]
- Publish [[file:worker.js]]
- Add KV binding, refer to [[https://developers.cloudflare.com/workers/runtime-apis/kv/][referencing KV from Workers]]
- Binding name is =KV= in this project.
- Add following tracking code to HTML files you want to track, replace =apiEndpoint= with your worker address.
#+begin_src js
const apiEndpoint = 'https://pageview-demo.jiacai2050.workers.dev/write';
const payload = {
'url': document.location.href,
'title': document.title,
'referrer': window.frames.top.document.referrer,
};
fetch(`${apiEndpoint}?${new URLSearchParams(payload)}`, {mode: 'no-cors'})
.catch(console.log);
#+end_src
- Then when visit HTML, following information will be saved to KV via workers:
- URL
- Title
- Referrer
- User-Agent
- IP
- Country
- City
- [[file:demo/index.html]] is provided to view saved pageviews.
- Replace =apiEndpoint= with your worker address.

* Other fun workers project
- [[https://github.com/eidam/cf-workers-status-page][Status page]]
- [[https://github.com/honojs/hono][honojs/hono: Ultrafast web framework for the Edges]]
- [[https://github.com/cloudflare/miniflare][cloudflare/miniflare: Fully-local simulator for Cloudflare Workers]]
* License
[[file:LICENSE][GPL-3]]