Programma di referral virale di Flowrite: come abbiamo moltiplicato le nostre iscrizioni settimanali

Pubblicato: 2022-03-22

introduzione

Sin dal nostro primo lancio in ottobre, abbiamo raccolto iscrizioni e-mail sulla nostra pagina di destinazione da persone entusiaste del nostro prodotto. Dopo che un potenziale utente si è unito alla nostra lista d'attesa inviando il proprio indirizzo e-mail, avremmo seguito con un'e-mail di conferma.

Durante tutto l'autunno, abbiamo ripetuto numerose volte la nostra e-mail di conferma, cercando di incoraggiare coloro che si iscrivevano a condividere informazioni su Flowrite con i loro amici. Abbiamo testato diverse copie e fornito link di condivisione per i social media, il che ci ha procurato un discreto passaparola. Alla fine, ciò che mancava era un incentivo per le persone a spargere la voce.

Alcuni mesi dopo, abbiamo iniziato a cercare soluzioni di marketing di riferimento pronte all'uso come Viral Loops, KickoffLabs e Prefinery, ma nessuna di queste ci ha davvero dato la flessibilità che stavamo cercando. Volevamo essere proprietari dell'intero processo: registrazione, onboarding, referral, e-mail e premi. ‍

Quindi, abbiamo iniziato a creare il nostro sistema di referral utilizzando strumenti senza codice. Subito dopo, abbiamo lanciato una nuova versione del flusso di iscrizione che consiste in un sondaggio di iscrizione magnificamente integrato e un programma di riferimento, che offre alle persone la possibilità di guadagnare premi invitando i loro amici a unirsi alla nostra lista d'attesa.

Il nuovo sistema ha causato un picco immenso nelle nostre iscrizioni: un aumento di oltre 8 volte rispetto alla settimana 4 del 2021 rispetto alle iscrizioni settimanali medie durante le 6 settimane precedenti. ‍

Questa è una pratica istruzione passo dopo passo su come implementare lo stesso programma di riferimento nella tua azienda

Cosa include il programma di riferimento di Flowrite?

Iscrizione via e-mail su flowite.com
Link di riferimento univoco assegnato a ogni utente
Premi per # di persone segnalate
Sondaggio Typeform splendidamente integrato per raccogliere ulteriori informazioni su ciascun utente
Possibilità per l'utente di segnalare un amico durante il sondaggio
Foglio di calcolo interno per tenere traccia delle iscrizioni e dei referral
Classifica pubblica per consentire agli utenti di monitorare i propri referral

Cosa è necessario per creare un programma simile?

Sito Web che puoi personalizzare con il tuo HTML e JavaScript (ad esempio un sito Webflow o semplicemente un sito Web HTML puro)
Tipologia di sondaggio (opzionale)
Fogli Google o Airtable
Gmail o qualcos'altro che invia email
Piattaforma di automazione (es. Zapier o Integromat) per incollare le cose insieme

Inoltre, avere un certo livello di comprensione di JavaScript può diventare utile ma non è assolutamente essenziale!

️

Prima di entrare nel merito, ti consiglio di seguire tu stesso il nostro processo di registrazione per vedere come funziona tutto. Basta premere il pulsante nella barra di navigazione, inserire la tua e-mail, passare attraverso il nostro sondaggio Typeform e controllare la tua casella di posta per un'e-mail di conferma.

1. Creazione di un codice di riferimento

Ad ogni persona che si iscrive alla nostra lista d'attesa viene assegnato un codice casuale di 6 caratteri composto da numeri e lettere. Al termine del processo di registrazione, utilizziamo questo codice nella pagina di conferma per fornire all'utente collegamenti di condivisione con un clic per i social media.

Per creare un codice di riferimento, inserisci il seguente snippet alla fine del tag <body> (o prima del tag </body>) in ogni pagina in cui un utente può registrarsi. Se stai utilizzando Webflow o un costruttore di siti Web simile, puoi inserire il codice globalmente in ogni pagina dalle impostazioni del tuo sito.

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

In secondo luogo, crea un'altra variabile o costante chiamata referralUrl, che è composta dall'URL della tua home page e dal codice che abbiamo appena generato. Inseriscilo sotto la variabile referralCode.

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

2. Memorizzazione dell'URL dell'utente

Vuoi anche memorizzare l'URL corrente dell'utente in una variabile. È essenziale sapere da quale URL proviene ogni iscrizione per contare il n. di referral per ciascun link di referral.

  
const siteUrl = window.location.href

Il tuo codice ora dovrebbe assomigliare a questo:

  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. Il modulo di iscrizione

Creazione di campi di input nascosti

Oltre a un campo di immissione e-mail, il modulo di registrazione dovrebbe contenere anche due input nascosti a cui presto assegneremo i valori referralUrl e siteUrl dei passaggi precedenti.

Per aggiungere i campi di input, inserisci il codice seguente all'interno dell'elemento del modulo, proprio accanto al campo dell'e-mail.

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

*Se stai usando Webflow, puoi farlo con un elemento Embed HTML nascosto.*

Compilazione dei campi di input

Gli input sono ancora vuoti, però. Devi assegnare le variabili dei passaggi 1 e 2 ai tuoi input in modo che vengano incluse nell'invio.

  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;

Se stai usando, ad esempio, i simboli di Webflow e hai più istanze dello stesso modulo di registrazione su una singola pagina del tuo sito web, devi assicurarti che le variabili vengano assegnate agli input corretti. Controlla il nostro promemoria Notion per istruzioni al riguardo.

Testandolo

Ora, quando un utente si iscrive al sito Web, sia l'URL di riferimento che l'URL del sito devono essere nascosti nell'invio. Se stai utilizzando Webflow, puoi verificarlo dall'e-mail di conferma.

4. Personalizzazione del tuo sondaggio Typeform

Come parte del sistema di registrazione e referral, utilizziamo Typeform per saperne di più su ciascun utente. Non è necessario completare il sondaggio Typeform per entrare in lista d'attesa perché raccogliamo gli indirizzi email già durante la registrazione iniziale. La percentuale di utenti che procede a completare il sondaggio è attualmente di circa il 75%.

In pratica, vogliamo consegnare il referralCode (passaggio 1) e l'e-mail dell'utente in Typeform e "portarli" durante l'invio. Lo facciamo per:

Usa il referralCode nei link di condivisione nella pagina di conferma (passaggio 7)
Abbina le iscrizioni iniziali alla lista d'attesa con le risposte Typeform corrispondenti. Portando l'e-mail dal modulo di registrazione a Typeform, non è necessario chiedere all'utente di inviarla due volte.

Campi nascosti

Per fare in modo che ciò accada, è necessario utilizzare la funzione Campi nascosti di Typeform. Puoi trovare le impostazioni in Logica → Avanzate.

Devi impostare due campi nascosti: @email e @codice. Una volta fatto, puoi inserire quei valori alla fine del tuo collegamento Typeform e farli inviare insieme alle altre risposte del tuo Typeform:

5. Integrazione del Typeform nel tuo sito

Typeform ti offre diverse alternative su come incorporare un sondaggio nella tua pagina. Se non desideri utilizzare un incorporamento, puoi semplicemente reindirizzare i tuoi utenti al collegamento Typeform.com.

Usiamo l'alternativa "Popup" con la dimensione del Popup impostata su "Grande"

Se scegli di utilizzare uno qualsiasi degli incorporamenti, devi prendere il codice di incorporamento di Typeform e inserirlo nell'HTML della tua pagina.

Con un popup, non importa dove metti il codice Typeform. Abbiamo il nostro in cima alla gerarchia delle pagine.

Il popup include anche un elemento <a>, che è essenzialmente un pulsante "Avviami". La sua funzione è quella di aprire il popup del sondaggio quando viene cliccato. Tuttavia, poiché desideri che il popup si apra automaticamente quando un utente invia il modulo di registrazione, è necessario un pezzo di codice che lo faccia per te.

Vuoi anche che quel codice prenda l'e-mail che è stata inviata (da un elemento di input con id impostato su "email"), lo assegni a una variabile e lo inserisca alla fine del tuo collegamento Typeform insieme al referralCode. Questi saranno i campi nascosti che abbiamo impostato in precedenza

  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(); });

Infine, imposta la visibilità dell'elemento <a> su "none" per nascondere il pulsante "Launch me".

Se stai usando Webflow, puoi semplicemente nascondere l'intero HTML Embed.

6. Reindirizzamento del modulo di tipo

Typeform ti consente di reindirizzare gli utenti a URL personalizzati dopo aver completato il sondaggio. Gli URL possono essere personalizzati sia con i dati del sondaggio che con i campi nascosti.

I nostri link di reindirizzamento contengono sia il codice di riferimento (un campo nascosto) sia il nome dell'utente dal sondaggio.

Ad esempio, se il "codice" fosse impostato su 123456 e il nome dell'utente fosse Aaro , l'URL di reindirizzamento sarebbe:

7. Pagina di conferma

Nella nostra pagina di conferma, volevamo offrire agli utenti semplici opzioni per condividere il loro link di riferimento personale e informarli sui premi che possono guadagnare.

Incentivazione

Il nostro modo per incentivare gli utenti è offrire merchandising a marchio Flowrite e accesso gratuito al prodotto. Con il merchandising, ti consigliamo di scegliere gli articoli che puoi inserire in una lettera. Di recente ci siamo resi conto che i pacchi di spedizione in tutto il mondo possono diventare un po' costosi..

Se vuoi approfondire come scegliere premi e incentivi per i programmi di riferimento, consulta la guida di Referral Rock sull'argomento.

Personalizzazione della pagina di conferma

Avere quell'URL di reindirizzamento personalizzato da Typeform ti consente di personalizzare la tua pagina di conferma per ogni utente. Ad esempio, la pagina di conferma di Flowrite utilizza il valore "firstname" dell'URL per rendere la pagina leggermente più personale:

Per fare lo stesso, inizia avvolgendo la parte del paragrafo che desideri personalizzare in un intervallo. Quindi, imposta l'id dell'intervallo su "firstname".

Infine, inserisci il seguente snippet alla fine del tag <body> della tua pagina di conferma.

  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;

Oltre al nome, puoi anche utilizzare il valore "codice" dell'URL per personalizzare i link di condivisione per i social media. Per creare un collegamento a Twitter, imposta prima l'ID del tuo pulsante di condivisione su "tweet".

Quindi, inserisci il seguente codice alla fine del tag <body> della tua pagina di conferma.

  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);

Usa la tua creatività per personalizzare i testi e i link sulla tua pagina di conferma come preferisci. Puoi anche confrontare il nostro.

8. E-mail di conferma

Dopo la registrazione iniziale sul nostro sito Web, inviamo un'e-mail di conferma all'indirizzo e-mail che è stato inviato. Naturalmente, vogliamo utilizzare il referralUrl del passaggio 3 in ogni link di condivisione di quell'e-mail.

Indipendentemente dal fatto che tu stia utilizzando Zapier o Integromat per automatizzare l'e-mail di conferma, desideri utilizzare l'invio del modulo di registrazione come trigger e collegarlo al tuo account e-mail per inviare l'e-mail di conferma in base ai dati inviati: indirizzo e-mail e URL di riferimento da passaggio 3.

Abbiamo deciso di utilizzare Gmail poiché ci ha permesso di inviare e-mail che sembrano e si sentono più personali. Tuttavia, i limiti di invio giornalieri di Gmail ci hanno causato alcuni problemi quando il volume ha superato le 1500 email al giorno. Se il tuo volume di iscrizione è costantemente superiore a quello, potresti prendere in considerazione altre alternative come SendGrid o Mailchimp.

Per includere collegamenti dinamici e qualsiasi altro contenuto oltre al testo (es. immagini), dovresti scegliere l'opzione HTML in Zapier. In Integromat, HTML è abilitato per impostazione predefinita.

Di seguito è riportato un esempio di struttura che puoi utilizzare per creare la tua email di conferma utilizzando HTML. Utilizza i dati dell'invio del modulo per personalizzare il referralUrl.

  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. Sistema di tracciamento

Tracciamento interno

Infine, devi fornire i dati di registrazione dal tuo sito Web e gli invii Typeform a un'unica destinazione in cui puoi tenere traccia del numero di iscrizioni, degli invii Typeform corrispondenti e dei referral. Utilizziamo Fogli Google ma sentiti libero di utilizzare Airtable o qualcos'altro con cui ti senti a tuo agio.

Affinché i dati fluiscano sul tuo foglio in tempo reale, devi collegarlo al tuo sito Web e Typeform utilizzando Zapier/Integromat/ecc. Hai bisogno di due trigger:

Iscrizione alla lista d'attesa → Invia e-mail e crea una nuova riga del foglio di calcolo (questa è quella di cui abbiamo discusso nel passaggio precedente)
Invio del modulo di tipo → Crea una nuova riga del foglio di calcolo

Sia Zapier che Integromat hanno istruzioni complete su come realizzare queste integrazioni.

Per il sistema di tracciamento, abbiamo creato un semplice modello che puoi duplicare e utilizzare come base per il tuo sistema di tracciamento:

Oltre ai quattro fogli di lavoro inclusi nel modello, abbiamo anche creato varie altre tabelle come il monitoraggio automatizzato delle ricompense e la pipeline e-mail, il foglio di annullamento delle iscrizioni, la mappatura della canalizzazione e altro ancora. Ma lo lasciamo a te

Esterno

Per aiutare gli utenti a tenere traccia del numero di referral con il loro link univoco, abbiamo creato una classifica pubblica, anche con Fogli Google.

+ 10. Referral aggiuntivi con Typeform

Uno dei modi per aumentare il tuo tasso di referral è chiedere ai tuoi utenti di inserire l'indirizzo email di un loro amico o collega. Questa potrebbe essere una delle domande nel tuo sondaggio Typeform o un modulo nella tua pagina di conferma.

Abbiamo incluso la domanda di riferimento alla fine del nostro sondaggio Typeform.

Ecco come appare su Zapier:

L'operazione di filtro prima dell'invio dell'e-mail è importante. Vuoi assicurarti che:

Il valore è in realtà un'e-mail (Typeform non è perfetto per identificarlo)
Il valore non è vuoto
Il referrer non fa riferimento a se stesso

Infine, includiamo il referrer nel campo cc dell'e-mail di riferimento per rendere l'esperienza più personale

Questo è tutto

Il tuo programma di riferimento è ora pronto per il lancio. Congratulazioni!

Nel caso in cui dovessi riscontrare problemi lungo il percorso, non esitare a inviarmi un'e-mail o, ancora meglio, commenta su Twitter / LinkedIn in modo che tutti possano accorgersene.

Mi piacerebbe anche sapere se finirai per utilizzare questo sistema, quindi per favore inviami un ping se lo hai fatto e condividi il post con qualcun altro che potrebbe trarne vantaggio ️