PixelMe Alternative - Own URL Shortener For Free

URL shorteners have been existing for decades. Yet, recently another one called PixelMe raised a considerable amount of venture capital to allow marketers to fire retargeting pixels when redirecting the user. The typical use case? You want to advertise your products which are sold on a 3rd-party platform, i.e. Amazon, on social media. You drop your product links everywhere. A good first step. But then it would be nice to step up your game by playing remarketing campaigns for all users that clicked on such a link, right? That’s why you want to build a cookie pool from all users that you redirect, to reach that users via Google, Facebook, or LinkedIn ads and that’s the use case.

Of course, PixelMe is a fully-fledged SaaS with a lot of features, something we cannot rebuild overnight. But, the basic functionality of URL shortening incl. the firing of Google Analytics (and endless other retargeting pixels if you extend the work below) is easily deployable on a high-performance infrastructure — almost for free and, so to speak, serverless as we won’t need to rent hosting or setup a web-server. Below a certain scale all used systems can be used on the free tier, the only one thing that we need to pay for is a Cloudflare Workers subscription of $5 per month. Actually the only other needed system is Google Firebase as database.

I recommend you to think about the usage of Cloudflare as a CDN in general because the Workers product is great in any marketing tech stack. Read about other examples in this blog, e.g. about deploying Tag Manager on Medium blogs.

In this article I will explain and provide the JavaScript code to get up running with the URL shortening itself and the provision of an API to create new short URLs. Unless you want to create new short URLs with, for example, Postman, you will also need to create a small web-app for yourself which will work with this API.

For myself I quickly built a very small static-generated Nuxt app which I deployed on Netlify and which can be found at https://ahref.to (not intended for public use). Going on, I will also reference this URL shortening project by the name Ahref.to. With Netlify I remain within free tier usage for this project, so even when putting a beautiful web front-end into the scope.

I will take a couple of seconds more to briefly describe how PixelMe works and then we will directly jump into the step-by-step guide to get your own URL shortener running. Please excuse that many of the steps are just mentioned without detailed explanations. Most likely these are generic steps which are covered in many other blogs or documentations.

How PixelMe Works

The technology behind this kind of redirecting is very simple. Usually, if you open a shortened URL all that happens is the server responding with a 301 or 302 status code, accompanied by a Location header which contains the actual long URL. The browser picks up this Location header and opens the URL from the header.

In our case, which is dropping retargeting pixels while redirecting, this is not possible. Instead, when opening a PixelMe or Ahref.to link, the browser will get a regular html document and a 200 status code. However, this html document will just contain a very basic html structure. This HTML document does not contain any visible content but, most importantly, our retargeting pixels and Google Analytics code just like you would find it in any normal website. Moreover, the document contains a simple JavaScript which instructs the browser to open the actual URL via window.location after a setTimeout().

Very simple, I know. One thing has to be considered, though. We also want link previews to work. You will know from your experience that when you post links on social media or even on Slack the respective provider will start a quick crawling to provide a link preview which usually contains the page title and an image. We want this for our shortener, too, but such a crawl wouldn’t listen to the JavaScript instructions within our HTML code to end up at the actual destination. That’s why we need to return 301 redirects for bot crawlers as well, just like a regular URL shortener does in general.

Getting started with Ahref.to

If not at hand, register a domain for your project
Add your domain to Cloudflare and activate a Workers subscription
Create a new Google Firebase project incl. real-time database and obtain the database secret
Create a new Google Analytics property that you want to use for receiving stats

Installation / working with code

To create the Short IDs we will work with a very handy third-party npm package called shortid. It allows us to generate tons of non-sequential IDs for our short URLs. Accordingly, we will write our Workers script locally and have Webpack do bundling before we upload the final code, just as advised by Cloudflare. Since I’ve already created the small repo for that you can just proceed as follows:

git clone https://github.com/dustinrecko/ahrefto-pub.git

Change directory to ahrefto-pub and install dependencies via

npm install

Open the file index.js and fill in your config data

    const FB_URL = 'https://yourproject-xxxxx.firebaseio.com/';
    const FB_KEY = 'YourFirebaseDatabaseSecret';
    // Default Google Analytics ID
    const UA_ID = 'UA-123456789-1';

Do Webpack magic via npm run build

Finally, open dist/main.js and copy all its content to the Workers editor. Hit Deploy.

It’s done, you’ve just launched a private URL shortener which exposes the following functionality (I use ahref.to for URLs but in your case it will be your own URL):

Creating a new Short URL

Sending a request to ahref.to/c/ will make the script check for the following GET parameters:

q = Expects a long URL to shorten / required
c = Expects a name for this campaign/link to be used as page title in your Google Analytics / optional
t = Google Analytics ID if different from the default / optional

The script will then generate a new Short ID and subsequently PUT a new entry into the Firebase database. Such an entry looks like this:

    {
      "analyticsId" : "UA-123456789-1",
      "campaign" : "My Campaign Name",
      "createdAt" : 1547928206927,
      "longUrl" : "https://www.google.com",
      "shortId" : "9Mi6MrSR8"
    }

If successful, our Cloudflare Worker will return all the details above

Opening a shortened URL

When we now open ahref.to/9Mi6MrSR8, the Worker script will look up the ID in the database, obtain the details, and fill in our main HTML template which is then returned. It looks like this:

    <!doctype html><html lang="en"><head><meta charset="utf-8"><title>You're being redirected...</title>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script src="[https://www.googletagmanager.com/gtag/js?id=UA-](https://www.googletagmanager.com/gtag/js?id=UA-132535118-1)123456789[-1](https://www.googletagmanager.com/gtag/js?id=UA-132535118-1)"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

    gtag('config', 'UA-123456789-1', { 'anonymize_ip': true, 'transport_type': 'beacon' , 'page_title': 'My Campaign Name' });
          </script>
    <script>
              var timer = setTimeout(function() {
                window.location='[https://www.google.com'](https://www.google.com') 
              }, 750);
          </script>
    </head>
    <body>
        <noscript>
            Redirecting to 
            <a href="[https://www.google.com](https://www.google.com)">[https://www.google.com](https://www.google.com)</a>
        </noscript>
    </body>
    </html>

For bots the Worker script will just return the 301 redirect to www.google.com as explained in the beginning of this article.

Resolving other requests

For other requests such as just the root domain ahref.to/ the Worker will try to retrieve the content from the server as configured in the DNS A record. That’s handy if you also want to provide a small front-end app under the same domain as I did with ahref.to where a Nuxt app is hosted on Netlify to make it easier to create new short URLs.

Final words

I think this is a solid foundation for having your own URL shortener if you’re a tech marketer and able to extend the provided script with a lot more functionality as per your requirements. Forget about the times where it would have required to set up a server and maybe having a PHP script do the job. It’s time to go serverless :)

If you want to see the shortener in action you can check out my personal front-end https://ahref.to. It’s not intended for general use, though.