PixelMe Alternative - Eigener URL-Shortener kostenlos

URL-Shortener gibt es seit Jahrzehnten. Kürzlich hat jedoch ein anderer namens PixelMe eine beträchtliche Menge an Risikokapital eingesammelt, um es Vermarktern zu ermöglichen, bei der Umleitung des Benutzers Retargeting-Pixel abzufeuern. Der typische Anwendungsfall? Sie möchten Ihre Produkte, die auf einer 3rd-Party-Plattform, z.B. Amazon, verkauft werden, in sozialen Medien bewerben. Sie platzieren Ihre Produktlinks überall im Internet. Ein guter erster Schritt. Aber dann wäre es doch nett, wenn Sie Ihr Spiel intensivieren könnten, indem Sie Remarketing-Kampagnen für alle Benutzer durchführen, die auf einen solchen Link geklickt haben, oder? Deshalb möchten Sie einen Cookie-Pool aus allen Nutzern, die Sie umleiten, aufbauen, um diese Nutzer über Google-, Facebook- oder LinkedIn-Anzeigen zu erreichen, und genau das ist der Anwendungsfall.

Natürlich ist PixelMe ein vollwertiges SaaS mit vielen Funktionen, etwas, das wir nicht von heute auf morgen kopieren können ;) Aber die Grundfunktionalität der URL-Kürzung einschließlich des Auslösens von Google Analytics (und endloser anderer Retargeting-Pixel, wenn Sie die Arbeit weiter unten erweitern) lässt sich leicht auf einer Hochleistungsinfrastruktur implementieren - fast kostenlos und sozusagen serverlos, da wir kein Hosting mieten oder einen Webserver einrichten müssen. Unterhalb einer bestimmten Größenordnung können alle verwendeten Systeme auf der kostenlosen Ebene genutzt werden, das einzige, wofür wir zahlen müssen, ist ein Cloudflare Workers-Abonnement von 5 Dollar pro Monat. Eigentlich ist das einzige andere benötigte System eine Google Firebase Datenbank.

Ich empfehle Ihnen, über die Nutzung von Cloudflare als CDN im Allgemeinen nachzudenken, da das Workers-Produkt in jedem Marketing-Tech-Stack großartig ist. Lesen Sie über andere Beispiele in diesem Blog, z.B. über Einsatz des Tag Managers auf Medium-Blogs.

In diesem Artikel werde ich den JavaScript-Code erklären und zur Verfügung stellen, um mit der URL-Kürzung selbst und der Bereitstellung einer API zur Erstellung neuer Kurz-URLs in Gang zu kommen. Wenn Sie keine neuen Kurz-URLs z.B. mit Postman erstellen möchten, müssen Sie auch eine kleine Web-Anwendung für sich selbst erstellen, die mit dieser API funktioniert.

Für mich selbst habe ich schnell eine sehr kleine statisch generierte Nuxt-App erstellt, die ich auf Netlify deployed habe und die unter https://ahref.to zu finden ist (nicht für die Öffentlichkeit bestimmt). Im weiteren Verlauf werde ich dieses URL-Kürzungsprojekt auch mit dem Namen Ahref.to referenzieren. Mit Netlify bleibe ich innerhalb der freien Nutzungsmöglichkeiten für dieses Projekt, also auch dann, wenn ich ein schönes Web-Frontend in den Anwendungsbereich einfüge.

Ich nehme mir noch ein paar Sekunden Zeit, um kurz zu beschreiben, wie PixelMe funktioniert, und dann springen wir direkt in die Schritt-für-Schritt-Anleitung, um Ihren eigenen URL-Shortener zum Laufen zu bringen. Bitte entschuldigen Sie, dass viele der Schritte nur ohne detaillierte Erklärungen erwähnt werden. Höchstwahrscheinlich handelt es sich dabei um allgemeine Schritte, die in vielen anderen Blogs oder Dokumentationen behandelt werden.

Wie PixelMe funktioniert

Die Technologie hinter dieser Art der Umleitung ist sehr einfach. Wenn Sie eine Short URL öffnen, antwortet der Server in der Regel nur mit einem 301- oder 302-Statuscode, begleitet von einem Location-Header, der die eigentliche lange URL enthält. Der Browser greift diesen Location-Header auf und öffnet die URL aus dem Header.

In unserem Fall, in dem Retargeting-Pixel bei der Umleitung weggelassen werden, ist dies nicht möglich. Stattdessen erhält der Browser beim Öffnen eines PixelMe- oder Ahref.to-Links ein reguläres html-Dokument und einen 200-Statuscode. Dieses html-Dokument wird jedoch nur eine sehr grundlegende html-Struktur enthalten. Dieses HTML-Dokument enthält keinen sichtbaren Inhalt, sondern, was am wichtigsten ist, unsere Retargeting-Pixel und den Google Analytics-Code, wie Sie ihn auf jeder normalen Website finden würden. Darüber hinaus enthält das Dokument ein einfaches JavaScript, das den Browser anweist, die eigentliche URL über window.location nach einem setTimeout() zu öffnen.

Sehr einfach, ich weiß. Eine Sache muss allerdings beachtet werden. Wir wollen auch, dass die Link-Vorschau funktioniert. Sie werden aus Ihrer Erfahrung wissen, dass bei der Veröffentlichung von Links in sozialen Medien oder sogar auf Slack der jeweilige Anbieter ein schnelles Crawling startet, um eine Link-Vorschau bereitzustellen, die normalerweise den Seitentitel und ein Bild enthält. Das wollen wir auch für unseren Shortener, aber ein solches Crawling würde nicht auf die JavaScript-Anweisungen innerhalb unseres HTML-Codes hören, um am eigentlichen Ziel zu landen. Aus diesem Grund müssen wir auch für Bot-Crawler 301 Umleitungen zurückgeben, genau wie es ein normaler URL-Shortener im Allgemeinen tut.

Erste Schritte mit Ahref.to

Falls nicht zur Hand, registrieren Sie eine Domain für Ihr Projekt
Fügen Sie Ihre Domain zu Cloudflare hinzu und aktivieren Sie ein Workers-Abonnement
Erstellen Sie ein neues Google Firebase Projekt inkl. Echtzeit-Datenbank und erhalten Sie das Datenbankgeheimnis
Erstellen Sie eine neue Google Analytics-Eigenschaft, die Sie für den Empfang von Statistiken verwenden möchten

Installation / Arbeiten mit Code

Zur Erstellung der Kurz-IDs werden wir mit einem sehr praktischen npm-Paket eines Drittanbieters namens shortid arbeiten. Es erlaubt uns, Tonnen von nicht-sequentiellen IDs für unsere Kurz-URLs zu erzeugen. Dementsprechend werden wir unser Workers-Skript lokal schreiben und Webpack das Bundling vornehmen lassen, bevor wir den endgültigen Code hochladen, genau wie von Cloudflare empfohlen. Da ich das kleine Repo dafür bereits erstellt habe, können Sie einfach wie folgt vorgehen:

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

Ändern Sie das Verzeichnis zu ahrefto-pub und installieren Sie Abhängigkeiten über

npm install

Öffnen Sie die Datei index.js und tragen Sie Ihre Konfigurationsdaten ein

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

Webpack Magic via npm run build

Öffnen Sie schließlich dist/main.js und kopieren Sie den gesamten Inhalt in den Workers Editor. Klicken Sie auf Bereitstellen.

Fertig, Sie haben soeben einen privaten URL-Shortener gestartet, der die folgende Funktionalität bereitstellt (ich verwende ahref.to für URLs, aber in Ihrem Fall wird es Ihre eigene URL sein):

Erstellen einer neuen Kurz-URL

Beim Senden einer Anfrage an ahref.to/c/ wird das Skript auf die folgenden GET-Parameter geprüft:

q = Erwartet, dass eine lange URL gekürzt wird / erforderlich
c = Erwartet, dass ein Name für diese Kampagne/Link als Seitentitel in Ihrem Google Analytics verwendet wird / optional
t = Google Analytics-ID, falls abweichend von der Standardeinstellung / optional

Das Skript wird dann eine neue Kurz-ID generieren und anschließend einen neuen Eintrag in die Firebase-Datenbank PUTEN. Ein solcher Eintrag sieht wie folgt aus:

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

Bei Erfolg wird unser Cloudflare Worker alle oben genannten Details zurücksenden.

Öffnen einer verkürzten URL

Wenn wir nun ahref.to/9Mi6MrSR8 öffnen, wird das Worker-Skript die ID in der Datenbank nachschlagen, die Details abrufen und unsere Haupt-HTML-Vorlage ausfüllen, die dann zurückgegeben wird. Sie sieht wie folgt aus:

    <!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>

Bei Bots gibt das Worker-Skript einfach die 301-Umleitung an www.google.com zurück, wie am Anfang dieses Artikels erklärt wird.

Andere Anfragen auflösen

Bei anderen Anfragen wie z.B. nur der Root-Domain ahref.to/ versucht der Worker, den Inhalt vom Server abzurufen, wie im DNS A-Eintrag konfiguriert. Das ist praktisch, wenn Sie auch eine kleine Front-End-Anwendung unter derselben Domäne wie ich mit ahref.to bereitstellen möchten, wo eine Nuxt-Anwendung auf Netlify gehostet wird, um die Erstellung neuer Kurz-URLs zu erleichtern.

Letzte Worte

Ich denke, dies ist eine solide Grundlage für einen eigenen URL-Shortener, wenn Sie ein Tech-Marketer sind und in der Lage sind, das bereitgestellte Skript mit viel mehr Funktionalität gemäß Ihren Anforderungen zu erweitern. Vergessen Sie die Zeiten, in denen es notwendig gewesen wäre, einen Server einzurichten und vielleicht ein PHP-Skript die Arbeit erledigen zu lassen. Es ist an der Zeit, "ohne Server" auszukommen :)

Wenn Sie den Shortener in Aktion sehen wollen, können Sie sich mein persönliches Front-End ansehen https://ahref.to. Es ist allerdings nicht für den allgemeinen Gebrauch gedacht.