Bitly links replacement

Quick re-router to analyse traffic to your site to replace Bitly analytics

Bitly are now showing a nasty looking ad page for 3 seconds before redirecting when using their free plan. If you were using Bitly to analyse links clicked then this might have seemed an okish method (I don’t agree, but have seen it used). From now-on if you need to add credibility and build trust for your brand then using bitly links in free tier mode will put an end to that.

Other services exist (TinyURL, etc) but who’s to say they’ll not follow the same path as Bitly to generate revenue.

If you trust your brand to free tier plans then you need to expect difficulties right?

So why not build your own quick dynamic link tracker with Cloudflare Workers and Pages for the shear sake of having nothing better to do for 10 minutes?

It’s quick and dirty and a bit shit so don’t go using it in production unless you test and improve it obviously, but it’s quite good fun to have a tinker around with Cloudflare product offerings which I’ve not been able to do for a while. Oh, and it’s free tier but Cloudflare have a payment plan and their free plan is pretty generous!

Example links

Our router service domain is at https://test.workers.dev It takes a route query param that takes a URL as a value. route=https://michaelwatts.me/posts/javascript-array-at-method/ Which is then redirected to via the worker code (see below).

Plaintext example:

https://test.workers.dev&route=https://example.com/posts/post1/
https://test.workers.dev&route=https://example.com/posts/post2/

Worker JS:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
 
async function handleRequest(request) {
  const url = new URL(request.url)
  const redirectUrl = url.searchParams.get('route')
 
  // If no route parameter exists, return basic instructions
  if (!redirectUrl) {
    return new Response(
      'Add ?route=URL parameter to redirect\nExample: ?route=https://example.com',
      { status: 200, headers: { 'Content-Type': 'text/plain' } }
    )
  }
 
  // Create HTML with both redirect meta and visible link
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="refresh" content="5; url=${redirectUrl}">
      <title>Redirecting...</title>
    </head>
    <body>
      <p>Redirecting to: <a href="${redirectUrl}">${redirectUrl}</a></p>
      <script>
        window.location.href = "${redirectUrl}";
      </script>
    </body>
    </html>
  `
 
  return new Response(html, {
    status: 200,
    headers: {
      'Content-Type': 'text/html',
      'Cache-Control': 'no-cache, no-store, must-revalidate'
    }
  })
}

Observability

One way to quickly gather together some metrics might be to use Cloudflare’s Observability product.

Visit the Observability Query Builder page: dashboard workers-and-pages > observability > queries and build a query to count the total fetch amounts:

Visualization can be Count as Event Count.
Filter = $metadata.message Includes GET https://reroute.watts.workers.dev/?route= to filter any traffic coming into this route.
Add a second filter on the ingested data e.g. Filter Includes javascript-array-at-method so that this can changed easily as it’s a bit clearer to read.
Group By $workers.eventType if you wish.

Example result table:

$workers.eventType	Event Count
`fetch`	4

Workers Free tier allowance:

Product	Allowance
Worker Requests*	100,000 requests per day
Observability events**	200,000 events per day

* The Free plan combines requests for Workers and Pages Functions. Requests to static assets on Workers & Pages will continue to be free and unlimited. Learn more ☍.

** Aggregated observability events across all Workers.

You might blast through the Worker Requests and Observability events allowance quite quickly unless you somehow minimise requests, but for handling a small number of requests it might be OK. There is a payment plan so you could expand this to handle a larger number of requests.

Another way might be to send data through to a KV store, which I’ll explore another time…

Conclusion

This was a fun little project to play around with Cloudflare Workers and Pages. It’s not production ready by any means but it’s a fun way to learn about the Cloudflare product offerings and see how it works.