Das virale Empfehlungsprogramm von Flowrite – Wie wir unsere wöchentlichen Anmeldungen verachtfachten

Veröffentlicht: 2022-03-22

Einführung

Seit unserem ersten Start im Oktober haben wir auf unserer Zielseite E-Mail-Anmeldungen von Menschen gesammelt, die von unserem Produkt begeistert sind. Nachdem ein potenzieller Benutzer unserer Warteliste beigetreten ist, indem er seine E-Mail-Adresse übermittelt hat, erhalten wir eine Bestätigungs-E-Mail.

Im Laufe des Herbstes haben wir unsere Bestätigungs-E-Mail mehrmals wiederholt – in dem Versuch, diejenigen, die sich anmelden, zu ermutigen, ihren Freunden von Flowrite zu erzählen. Wir haben verschiedene Kopien getestet und Links zum Teilen für soziale Medien bereitgestellt, was uns eine ordentliche Menge an Mundpropaganda einbrachte. Was am Ende fehlte, war ein Anreiz für die Leute, das Wort zu verbreiten.

Einige Monate später begannen wir, uns nach handelsüblichen Empfehlungsmarketinglösungen wie Viral Loops, KickoffLabs und Prefinery umzusehen, aber keine davon gab uns wirklich die Flexibilität, die wir suchten. Wir wollten den gesamten Prozess kontrollieren – Anmeldung, Onboarding, Empfehlungen, E-Mails und Prämien. ‍

Also begannen wir mit dem Aufbau unseres eigenen Empfehlungssystems mit No-Code-Tools. Kurz darauf starteten wir eine neue Version des Anmeldeablaufs, die aus einer schön integrierten Onboarding-Umfrage und einem Empfehlungsprogramm bestand und den Menschen die Möglichkeit gab, Belohnungen zu verdienen, indem sie ihre Freunde einluden, sich unserer Warteliste anzuschließen.

Das neue System verursachte einen immensen Anstieg unserer Anmeldungen – über 8x Anstieg in Woche 4 des Jahres 2021 im Vergleich zu den durchschnittlichen wöchentlichen Anmeldungen in den vorangegangenen 6 Wochen. ‍

Dies ist eine praktische Schritt-für-Schritt-Anleitung, wie Sie dasselbe Empfehlungsprogramm in Ihrem Unternehmen implementieren können

Was beinhaltet das Empfehlungsprogramm von Flowrite?

E-Mail-Anmeldung auf flowrite.com
Eindeutiger Empfehlungslink, der jedem Benutzer zugewiesen wird
Prämien für die Anzahl der geworbenen Personen
Schön integrierte Typeform-Umfrage, um weitere Informationen über jeden Benutzer zu sammeln
Möglichkeit für den Benutzer, während der Umfrage einen Freund zu empfehlen
Interne Tabelle zur Verfolgung von Anmeldungen und Empfehlungen
Öffentliche Rangliste für Benutzer, um ihre Empfehlungen zu verfolgen

Was ist erforderlich, um ein ähnliches Programm zu erstellen?

Website, die Sie mit Ihrem eigenen HTML und JavaScript anpassen können (z. B. eine Webflow-Website oder nur eine reine HTML-Website)
Typumfrage (optional)
Google Tabellen oder Airtable
Gmail oder etwas anderes, das E-Mails sendet
Automatisierungsplattform (zB Zapier oder Integromat) zum Zusammenkleben

Auch ein gewisses Maß an JavaScript-Verständnis kann praktisch sein, ist aber keinesfalls erforderlich!

️

Bevor Sie sich darauf einlassen, würde ich empfehlen, unseren Anmeldeprozess selbst zu durchlaufen, um zu sehen, wie alles funktioniert. Klicken Sie einfach auf die Schaltfläche in der Navigationsleiste, geben Sie Ihre E-Mail-Adresse ein, gehen Sie durch unsere Typeform-Umfrage und überprüfen Sie Ihren Posteingang auf eine Bestätigungs-E-Mail.

1. Erstellen eines Empfehlungscodes

Jeder Person, die sich auf unserer Warteliste anmeldet, wird ein zufälliger 6-stelliger Code aus Zahlen und Buchstaben zugewiesen. Am Ende des Anmeldevorgangs verwenden wir diesen Code auf der Bestätigungsseite, um dem Benutzer Links zum Teilen mit einem Klick für soziale Medien zu geben.

Um einen Empfehlungscode zu erstellen, fügen Sie das folgende Snippet am Ende Ihres <body>-Tags (oder vor dem </body>-Tag) auf jeder Seite ein, auf der sich ein Benutzer anmelden kann. Wenn Sie Webflow oder einen ähnlichen Website-Builder verwenden, können Sie den Code über Ihre Website-Einstellungen global auf jeder Seite einfügen.

  
const referralCode = Math.random().toString(36).substring(2, 8)

Erstellen Sie zweitens eine weitere Variable oder Konstante namens referralUrl, die sich aus der URL Ihrer Homepage und dem gerade generierten Code zusammensetzt. Fügen Sie es unterhalb der Variable referralCode ein.

  
const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode

2. Speichern der URL des Benutzers

Außerdem möchten Sie die aktuelle URL des Benutzers in einer Variablen speichern. Es ist wichtig zu wissen, von welcher URL jede Anmeldung kommt, um die Anzahl der Verweise pro Verweislink zu zählen.

  
const siteUrl = window.location.href

Ihr Code sollte nun so aussehen:

  const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href;
const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href;

3. Das Anmeldeformular

Erstellen von versteckten Eingabefeldern

Zusätzlich zu einem E-Mail-Eingabefeld sollte Ihr Registrierungsformular auch zwei versteckte Eingaben enthalten, denen wir in Kürze die Werte „referralUrl“ und „siteUrl“ aus den vorherigen Schritten zuweisen werden.

Um die Eingabefelder hinzuzufügen, fügen Sie den folgenden Code in Ihr Formularelement ein – direkt neben dem E-Mail-Feld.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>

*Wenn Sie Webflow verwenden, können Sie dies mit einem versteckten HTML-Embed-Element tun.*

Füllen der Eingabefelder

Die Eingänge sind aber noch leer. Sie müssen die Variablen aus den Schritten 1 und 2 Ihren Eingaben zuweisen, damit sie in die Übermittlung aufgenommen werden.

  const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href; document.querySelector('#referralUrl').value=referralUrl; document.querySelector('#siteUrl').value=siteUrl;
const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href; document.querySelector('#referralUrl').value=referralUrl; document.querySelector('#siteUrl').value=siteUrl;

Wenn Sie z. B. die Symbole von Webflow verwenden und mehrere Instanzen desselben Anmeldeformulars auf einer einzelnen Seite Ihrer Website haben, müssen Sie sicherstellen, dass Variablen den richtigen Eingaben zugewiesen werden. Anweisungen dazu finden Sie in unserem Notion-Memo.

Testen Sie es aus

Wenn sich ein Benutzer jetzt auf der Website anmeldet, sollten sowohl die Verweis-URL als auch die URL der Website versteckt in der Übermittlung enthalten sein. Wenn Sie Webflow verwenden, können Sie dies anhand der Bestätigungs-E-Mail überprüfen.

4. Anpassen Ihrer Typeform-Umfrage

Als Teil des Registrierungs- und Empfehlungssystems verwenden wir Typeform, um mehr über jeden Benutzer zu erfahren. Das Ausfüllen der Typeform-Umfrage ist nicht erforderlich, um auf die Warteliste aufgenommen zu werden, da wir die E-Mail-Adressen bereits bei der Erstanmeldung erfassen. Der Prozentsatz der Benutzer, die die Umfrage abschließen, liegt derzeit bei etwa 75 %.

In der Praxis möchten wir den ReferralCode (Schritt 1) und die E-Mail des Benutzers an Typeform liefern und sie während der gesamten Übermittlung „tragen“. Wir tun dies, um:

Verwenden Sie den ReferralCode in Teilen-Links auf Ihrer Bestätigungsseite (Schritt 7)
Ordnen Sie die ersten Anmeldungen auf der Warteliste den entsprechenden Typeform-Antworten zu. Indem wir die E-Mail vom Anmeldeformular zu Typeform bringen, müssen wir den Benutzer nicht zweimal bitten, sie zu senden.

Versteckte Felder

Um dies zu erreichen, müssen Sie die Hidden Fields-Funktion von Typeform verwenden. Die Einstellungen finden Sie unter Logik → Erweitert.

Sie müssen zwei versteckte Felder festlegen: @email und @code. Sobald dies erledigt ist, können Sie diese Werte am Ende Ihres Typeform-Links einfügen und sie zusammen mit den anderen Antworten Ihres Typeform übermitteln:

5. Integrieren des Typeform in Ihre Website

Typeform bietet Ihnen mehrere Alternativen zum Einbetten einer Umfrage auf Ihrer Seite. Wenn Sie keine Einbettung verwenden möchten, können Sie Ihre Benutzer einfach auf den Typeform.com-Link umleiten.

Wir verwenden die „Popup“-Alternative, wobei die Popup-Größe auf „Groß“ eingestellt ist.

Wenn Sie sich für eine der Einbettungen entscheiden, müssen Sie den Einbettungscode von Typeform abrufen und in den HTML-Code Ihrer Seite einfügen.

Bei einem Popup spielt es keine Rolle, wo Sie den Typeform-Code platzieren. Wir haben unsere oben in der Seitenhierarchie.

Das Popup enthält auch ein <a>-Element, das im Wesentlichen eine „Launch me“-Schaltfläche ist. Seine Funktion besteht darin, das Umfrage-Popup zu öffnen, wenn darauf geklickt wird. Da Sie jedoch möchten, dass das Popup automatisch geöffnet wird, wenn ein Benutzer das Anmeldeformular absendet, benötigen Sie einen Code, der dies für Sie erledigt.

Sie möchten auch, dass dieser Code die gesendete E-Mail (von einem Eingabeelement mit der auf „email“ gesetzten ID) nimmt, sie einer Variablen zuweist und sie zusammen mit dem referralCode am Ende Ihres Typeform-Links einfügt. Dies werden die versteckten Felder sein, die wir zuvor eingerichtet haben

  const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href; document.querySelector('#referralUrl').value=referralUrl; document.querySelector('#siteUrl').value=siteUrl; $('#waitlist-form').submit(() => { email = document.querySelector('#email').value; $('.typeform-share').attr('href', 'https://form.typeform.com/to/c74dZXPe?typeform-medium=embed-snippet#email=' + email + '&code=' + referralCode); $('.typeform-share').click(); });
const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href; document.querySelector('#referralUrl').value=referralUrl; document.querySelector('#siteUrl').value=siteUrl; $('#waitlist-form').submit(() => { email = document.querySelector('#email').value; $('.typeform-share').attr('href', 'https://form.typeform.com/to/c74dZXPe?typeform-medium=embed-snippet#email=' + email + '&code=' + referralCode); $('.typeform-share').click(); });

Setzen Sie zuletzt die Sichtbarkeit des <a>-Elements auf „none“, um den „Launch me“-Button auszublenden.

Wenn Sie Webflow verwenden, können Sie einfach die gesamte HTML-Einbettung ausblenden.

6. Typeform-Umleitung

Mit Typeform können Sie Benutzer nach Abschluss der Umfrage zu benutzerdefinierten URLs umleiten. Die URLs können sowohl mit den Umfragedaten als auch mit versteckten Feldern angepasst werden.

Unsere Weiterleitungslinks enthalten sowohl den Empfehlungscode (ein verstecktes Feld) als auch den Vornamen des Benutzers aus der Umfrage.

Wenn der „Code“ beispielsweise auf 123456 gesetzt wurde und der Vorname des Benutzers Aaro lautet , lautet die Weiterleitungs-URL:

7. Bestätigungsseite

Auf unserer Bestätigungsseite wollten wir den Benutzern einfache Möglichkeiten bieten, ihren persönlichen Empfehlungslink zu teilen und sie über die Prämien zu informieren, die sie verdienen können.

Anreize

Unsere Art, die Benutzer anzuregen, besteht darin, Flowrite-Markenware und kostenlosen Zugang zum Produkt anzubieten. Bei Merch empfehlen wir, Artikel auszuwählen, die in einen Brief passen. Wir haben kürzlich festgestellt, dass der Versand von Paketen in die ganze Welt etwas teuer werden kann.

Wenn Sie tiefer in die Auswahl von Prämien und Anreizen für Empfehlungsprogramme einsteigen möchten, sehen Sie sich den Leitfaden von Referral Rock zu diesem Thema an.

Anpassen der Bestätigungsseite

Mit dieser benutzerdefinierten Umleitungs-URL von Typeform können Sie Ihre Bestätigungsseite für jeden Benutzer anpassen. Beispielsweise verwendet die Bestätigungsseite von Flowrite den „Vornamen“-Wert der URL, um die Seite etwas persönlicher zu gestalten:

Um dasselbe zu tun, beginnen Sie damit, den Teil des Absatzes, den Sie anpassen möchten, in eine Spanne einzuschließen. Setzen Sie dann die ID der Spanne auf "Vorname".

Fügen Sie abschließend das folgende Snippet am Ende des <body>-Tags Ihrer Bestätigungsseite ein.

  const firstname = siteUrl.substring(siteUrl.indexOf('firstname=') + 10); document.getElementById('firstname').innerHTML = firstname;
const firstname = siteUrl.substring(siteUrl.indexOf('firstname=') + 10); document.getElementById('firstname').innerHTML = firstname;

Neben dem Vornamen können Sie auch den „Code“-Wert der URL verwenden, um Links zum Teilen für soziale Medien anzupassen. Um einen Twitter-Link zu erstellen, setzen Sie zunächst die ID Ihres Twitter-Share-Buttons auf „tweet“.

Fügen Sie dann den folgenden Code am Ende des <body>-Tags Ihrer Bestätigungsseite ein.

  const code = siteUrl.substring(siteUrl.lastIndexOf('code=') + 5, siteUrl.lastIndexOf('&f')); const twitterlink = 'https://twitter.com/intent/tweet?url=https://www.flowrite.com/?ref=' + code + '&text=Example'; document.getElementById('tweet').setAttribute('href', twitterlink);
const code = siteUrl.substring(siteUrl.lastIndexOf('code=') + 5, siteUrl.lastIndexOf('&f')); const twitterlink = 'https://twitter.com/intent/tweet?url=https://www.flowrite.com/?ref=' + code + '&text=Example'; document.getElementById('tweet').setAttribute('href', twitterlink);

Nutzen Sie Ihre Kreativität, um die Texte und Links auf Ihrer Bestätigungsseite nach Ihren Wünschen anzupassen. Sie können auch unsere Benchmarks erstellen.

8. Bestätigungs-E-Mail

Nach der erstmaligen Anmeldung auf unserer Website senden wir eine Bestätigungs-E-Mail an die angegebene E-Mail-Adresse. Natürlich möchten wir die ReferralUrl aus Schritt 3 in jedem Freigabelink dieser E-Mail verwenden.

Unabhängig davon, ob Sie Zapier oder Integromat verwenden, um die Bestätigungs-E-Mail zu automatisieren, möchten Sie die Übermittlung des Anmeldeformulars als Auslöser verwenden und es mit Ihrem E-Mail-Konto verbinden, um die Bestätigungs-E-Mail basierend auf den übermittelten Daten – E-Mail-Adresse und Referral-URL – zu senden Schritt 3.

Wir haben uns für Google Mail entschieden, da wir damit E-Mails versenden können, die am persönlichsten aussehen und sich anfühlen. Die täglichen Sendebeschränkungen von Gmail haben uns jedoch einige Probleme bereitet, wenn das Volumen 1500 E-Mails/Tag überschritten hat. Wenn Ihr Anmeldevolumen ständig höher ist, sollten Sie andere Alternativen wie SendGrid oder Mailchimp in Betracht ziehen.

Um dynamische Links und andere Inhalte außer Text (z. B. Bilder) einzubinden, sollten Sie die HTML-Option in Zapier wählen. In Integromat ist HTML standardmäßig aktiviert.

Nachfolgend finden Sie eine Beispielstruktur, die Sie verwenden können, um Ihre Bestätigungs-E-Mail mit HTML zu erstellen. Verwenden Sie die Daten aus der Formularübermittlung, um die ReferralUrl anzupassen.

  Hello <br><br> This is a demo email <br><br> <a href=https://twitter.com/intent/tweet?url=[referralUrl]&text=Example>Share on Twitter</a> <br><br> <img src="imagelink" width="400" height="300"> <br><br> Cheers
Hello <br><br> This is a demo email <br><br> <a href=https://twitter.com/intent/tweet?url=[referralUrl]&text=Example>Share on Twitter</a> <br><br> <img src="imagelink" width="400" height="300"> <br><br> Cheers

9. Verfolgungssystem

Interne Nachverfolgung

Schließlich müssen Sie die Anmeldedaten von Ihrer Website und die Typeform-Übermittlungen an ein einziges Ziel übermitteln, wo Sie die Anzahl der Anmeldungen, entsprechenden Typeform-Übermittlungen und Verweise verfolgen können. Wir verwenden Google Sheets, aber Sie können gerne Airtable oder etwas anderes verwenden, mit dem Sie sich wohl fühlen.

Damit Daten in Echtzeit zu Ihrem Sheet fließen können, müssen Sie es mit Ihrer Website und Typeform über Zapier/Integromat/etc verbinden. Sie benötigen zwei Trigger:

Wartelistenanmeldung → E- Mail senden und eine neue Tabellenzeile erstellen (dies ist die Zeile, die wir im vorherigen Schritt besprochen haben)
Geben Sie das Formular ein → Erstellen Sie eine neue Tabellenzeile

Sowohl Zapier als auch Integromat haben umfassende Anweisungen, wie diese Integrationen durchgeführt werden können.

Für das Tracking-System haben wir eine einfache Vorlage erstellt, die Sie duplizieren und als Grundlage für Ihr eigenes Tracking-System verwenden können:

Zusätzlich zu den vier Arbeitsblättern, die in der Vorlage enthalten sind, haben wir auch verschiedene andere Tabellen erstellt, wie z. Aber das überlassen wir Ihnen

Extern

Um Benutzern zu helfen, die Anzahl der Verweise mit ihrem eindeutigen Link zu verfolgen, haben wir eine öffentliche Rangliste erstellt – auch mit Google Sheets.

+ 10. Zusätzliche Verweise mit Typeform

Eine Möglichkeit, Ihre Empfehlungsrate zu erhöhen, besteht darin, Ihre Benutzer zu bitten, die E-Mail-Adresse ihres Freundes oder Kollegen einzugeben. Dies könnte eine der Fragen in Ihrer Typeform-Umfrage oder ein Formular auf Ihrer Bestätigungsseite sein.

Wir haben die Empfehlungsfrage am Ende unserer Typeform-Umfrage eingefügt.

So sieht es auf Zapier aus:

Wichtig ist die Filteroperation vor dem Versenden der E-Mail. Sie möchten Folgendes sicherstellen:

Der Wert ist eigentlich eine E-Mail (Typeform ist nicht perfekt, um dies zu identifizieren)
Der Wert ist nicht leer
Der Referrer verweist nicht auf sich selbst

Zu guter Letzt fügen wir den Referrer in das CC-Feld der Empfehlungs-E-Mail ein, um das Erlebnis besonders persönlich zu gestalten

Das ist es

Ihr Empfehlungsprogramm ist jetzt startbereit. Herzlichen Glückwunsch!

Falls Sie unterwegs auf Probleme gestoßen sind, zögern Sie nicht, mir eine E-Mail zu senden – oder noch besser, kommentieren Sie auf Twitter / LinkedIn, damit jeder davon Notiz nehmen kann.

Ich würde auch gerne wissen, ob Sie dieses System letztendlich verwenden, also pingen Sie mich bitte an, wenn Sie dies getan haben, und teilen Sie den Beitrag mit jemand anderem, der davon profitieren könnte ️