Programul de trimitere virală Flowrite – Cum ne-am depășit de 8 ori înscrierile săptămânale

Publicat: 2022-03-22

Introducere

Încă de la prima noastră lansare în octombrie, am colectat înscrieri pe e-mail pe pagina noastră de destinație de la oameni încântați de produsul nostru. După ce un potențial utilizator s-a alăturat listei noastre de așteptare, trimițând adresa sa de e-mail, vom continua cu un e-mail de confirmare.

De-a lungul toamnei, ne-am repetat e-mailul de confirmare de mai multe ori – încercând să-i încurajăm pe cei care se înscriu să împărtășească despre Flowrite prietenilor lor. Am testat diferite copii și am oferit link-uri de partajare pentru rețelele sociale, ceea ce ne-a oferit o cantitate decentă de cuvânt în gură. În cele din urmă, ceea ce lipsea a fost un stimulent pentru ca oamenii să răspândească vestea.

Câteva luni mai târziu, am început să căutăm soluții de marketing de recomandare standard, cum ar fi Viral Loops, KickoffLabs și Prefinery, dar niciuna dintre ele nu ne-a oferit cu adevărat flexibilitatea pe care o căutam. Am vrut să deținem întregul proces – înscriere, înscriere, recomandări, e-mailuri și recompense. ‍

Așadar, am început să ne construim propriul sistem de recomandare folosind instrumente fără cod. Curând după aceea, am lansat o nouă versiune a fluxului de înscriere, constând într-un sondaj de înscriere frumos integrat și un program de recomandare – oferind oamenilor posibilitatea de a câștiga recompense invitându-și prietenii să se alăture listei noastre de așteptare.

Noul sistem a provocat o creștere imensă a înscrierilor noastre – o creștere de peste 8 ori în săptămâna 4 din 2021, comparativ cu înscrierile săptămânale medii din ultimele 6 săptămâni. ‍

Aceasta este o instrucțiune practică pas cu pas despre cum să implementați același program de recomandare în afacerea dvs

Ce include programul de recomandare Flowrite?

  • Înregistrare prin e-mail pe flowrite.com
  • Link unic de recomandare atribuit fiecărui utilizator
  • Recompense pentru # de persoane recomandate
  • Sondaj Typeform frumos integrat pentru a colecta informații suplimentare despre fiecare utilizator
  • Posibilitatea utilizatorului de a recomanda un prieten în timpul sondajului
  • Foaie de calcul internă pentru a urmări înscrierile și recomandările
  • Clasament public pentru ca utilizatorii să își urmărească recomandările

Ce este necesar pentru a construi un program similar?

  • Site pe care îl puteți personaliza cu propriul dvs. HTML și JavaScript (adică un site Webflow sau doar un site HTML pur)
  • Sondaj tip formular (opțional)
  • Foi de calcul Google sau Airtable
  • Gmail sau altceva care trimite e-mailuri
  • Platformă de automatizare (de exemplu, Zapier sau Integromat) pentru a lipi lucrurile împreună

De asemenea, a avea un anumit nivel de înțelegere a JavaScript poate deveni util, dar nu este esențial în niciun caz!

️
Înainte de a intra în el, vă recomand să parcurgeți singur procesul nostru de înscriere pentru a vedea cum funcționează totul. Doar apăsați butonul din bara de navigare, introduceți e-mailul dvs., parcurgeți sondajul nostru Typeform și verificați căsuța de e-mail pentru un e-mail de confirmare.

1. Crearea unui cod de recomandare

Fiecărei persoane care se înscrie pe lista noastră de așteptare i se atribuie un cod aleatoriu de 6 caractere format din cifre și litere. La sfârșitul procesului de înscriere, folosim acest cod pe pagina de confirmare pentru a oferi utilizatorului linkuri de partajare cu un singur clic pentru rețelele sociale.

Pentru a crea un cod de recomandare, inserați următorul fragment la sfârșitul etichetei <body> (sau înaintea etichetei </body>) pe fiecare pagină în care un utilizator se poate înscrie. Dacă utilizați Webflow sau un generator de site-uri web similar, puteți introduce codul global în fiecare pagină din setările site-ului dvs.

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

În al doilea rând, creați o altă variabilă sau constantă numită referralUrl, care este compusă din adresa URL a paginii dvs. de pornire și codul pe care tocmai l-am generat. Introduceți-l sub variabila referralCode.

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

2. Stocarea URL-ului utilizatorului

De asemenea, doriți să stocați adresa URL curentă a utilizatorului într-o variabilă. Este esențial să știți de la ce adresă URL provine fiecare înregistrare pentru a număra numărul de recomandări pentru fiecare link de recomandare.

  
const siteUrl = window.location.href

Codul dvs. ar trebui să arate acum astfel:

  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. Formularul de înscriere

Crearea câmpurilor de introducere ascunse

Pe lângă un câmp de introducere a e-mailului, formularul de înscriere ar trebui să conțină și două intrări ascunse cărora le vom atribui în curând valorile referralUrl și siteUrl de la pașii anteriori.

Pentru a adăuga câmpurile de introducere, introduceți următorul cod în interiorul elementului formular – chiar lângă câmpul de e-mail.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
Dacă utilizați Webflow, puteți face acest lucru cu un element HTML Embed ascuns.

Popularea câmpurilor de intrare

Intrările sunt încă goale, totuși. Trebuie să atribuiți variabilele de la pașii 1 și 2 în intrările dvs., astfel încât acestea să fie incluse în transmitere.

  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;
Dacă utilizați, de exemplu, simbolurile Webflow și aveți mai multe instanțe ale aceluiași formular de înscriere pe o singură pagină a site-ului dvs., trebuie să vă asigurați că variabilele sunt alocate intrărilor corecte. Consultați nota noastră Noțiune pentru instrucțiuni în acest sens.

Testează-l

Acum, când un utilizator se înscrie pe site, atât URL-ul de recomandare, cât și adresa URL a site-ului ar trebui incluse în mod ascuns în trimitere. Dacă utilizați Webflow, puteți verifica acest lucru din e-mailul de confirmare.

4. Personalizarea sondajului Typeform

Ca parte a sistemului de înscriere și recomandare, folosim Typeform pentru a afla mai multe despre fiecare utilizator. Completarea sondajului Typeform nu este necesară pentru a vă înscrie pe lista de așteptare, deoarece colectăm adresele de e-mail deja în timpul înscrierii inițiale. Procentul de utilizatori care completează sondajul este în prezent de aproximativ 75%.

În practică, dorim să livrăm referralCode (pasul 1) și e-mailul utilizatorului în Typeform și să le „transportăm” pe toată durata trimiterii. Facem asta pentru a:

  1. Utilizați codul de referință în linkurile de distribuire de pe pagina de confirmare (pasul 7)
  2. Potriviți înscrierile inițiale pe lista de așteptare cu răspunsurile Typeform corespunzătoare. Aducând e-mailul din formularul de înscriere la Typeform, nu trebuie să cerem utilizatorului să îl trimită de două ori.

Câmpuri ascunse

Pentru a face acest lucru, trebuie să utilizați caracteristica Câmpuri ascunse de la Typeform. Puteți găsi setările sub Logic → Advanced.

Trebuie să setați două câmpuri ascunse: @email și @code. Odată ce ați terminat, puteți să introduceți acele valori la sfârșitul linkului Typeform și să le trimiteți împreună cu celelalte răspunsuri ale Typeform:

5. Integrarea Typeform pe site-ul dvs

Typeform vă oferă mai multe alternative despre cum să încorporați un sondaj în pagina dvs. Dacă nu doriți să utilizați o încorporare, puteți doar să vă redirecționați utilizatorii către linkul Typeform.com.

Folosim alternativa „Popup” cu dimensiunea pop-up setată ca „Large”


Dacă alegeți să utilizați oricare dintre încorporații, trebuie să luați codul de încorporare al Typeform și să-l plasați în HTML-ul paginii dvs.

Cu o fereastră pop-up, nu contează cu adevărat unde plasați codul Typeform. Îl avem pe al nostru în partea de sus a ierarhiei paginilor.

Fereastra pop-up include, de asemenea, un element <a>, care este în esență un buton „Launch me”. Funcția sa este de a deschide fereastra pop-up sondaj atunci când se face clic. Cu toate acestea, deoarece doriți ca fereastra pop-up să se deschidă automat atunci când un utilizator trimite formularul de înscriere, aveți nevoie de o bucată de cod care să facă asta pentru dvs.

De asemenea, doriți ca acel cod să preia e-mailul care a fost trimis (de la un element de intrare cu id-ul setat la „e-mail”), să-l atribuie unei variabile și să îl introducă la sfârșitul linkului Typeform împreună cu referralCode. Acestea vor fi Câmpurile Ascunse pe care le-am înființat mai devreme

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

În cele din urmă, setați vizibilitatea elementului <a> la „niciunul” pentru a ascunde butonul „Lansați-mă”.

Dacă utilizați Webflow, puteți doar ascunde întregul HTML Embed.

6. Redirecționare tip Form

Typeform vă permite să redirecționați utilizatorii către adrese URL personalizate după finalizarea sondajului. Adresele URL pot fi personalizate atât cu datele sondajului, cât și cu câmpurile ascunse.

Linkurile noastre de redirecționare conțin atât codul de recomandare (un câmp ascuns), cât și prenumele utilizatorului din sondaj.

De exemplu, dacă „codul” a fost setat la 123456 și prenumele utilizatorului a fost Aaro , adresa URL de redirecționare ar fi:

7. Pagina de confirmare

Pe pagina noastră de confirmare, am vrut să oferim utilizatorilor opțiuni simple pentru a-și împărtăși linkul personal de recomandare și a-i informa despre recompensele pe care le pot câștiga.

Stimulare

Modul nostru de a stimula utilizatorii este să oferim marcă Flowrite și acces gratuit la produs. Cu produse, vă recomandăm să alegeți articole pe care le puteți încadra într-o scrisoare. Ne-am dat seama recent că expedierea pachetelor în întreaga lume poate deveni puțin scumpă.

Dacă doriți să aprofundați cum să alegeți recompense și stimulente pentru programele de recomandare, consultați ghidul Referral Rock pe acest subiect.

Personalizarea paginii de confirmare

Având acea adresă URL de redirecționare personalizată din Typeform, vă permite să vă personalizați pagina de confirmare pentru fiecare utilizator. De exemplu, pagina de confirmare a lui Flowrite folosește valoarea „prenume” a adresei URL pentru a face pagina doar puțin mai personală:


Pentru a face același lucru, începeți prin a înfășura partea din paragraful pe care doriți să o personalizați într-un interval. Apoi, setați id-ul intervalului la „prenume”.

În cele din urmă, inserați următorul fragment la sfârșitul etichetei <body> din pagina de confirmare.

  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;

Pe lângă prenume, puteți folosi și valoarea „cod” a adresei URL pentru a personaliza linkurile de distribuire pentru rețelele sociale. Pentru a crea un link Twitter, setați mai întâi id-ul butonului de partajare Twitter la „Tweet”.

Apoi, introduceți următorul cod la sfârșitul etichetei <body> din pagina de confirmare.

  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);
Folosiți-vă creativitatea pentru a personaliza textele și linkurile de pe pagina de confirmare în orice fel doriți. De asemenea, le puteți compara pe ale noastre.

8. E-mail de confirmare

După înregistrarea inițială pe site-ul nostru web, trimitem un e-mail de confirmare la adresa de e-mail care a fost trimisă. Desigur, dorim să folosim referralUrl de la pasul 3 în fiecare link de partajare al acelui e-mail.

Indiferent dacă utilizați Zapier sau Integromat pentru a automatiza e-mailul de confirmare, doriți să utilizați trimiterea formularului de înscriere ca declanșator și să îl conectați la contul dvs. de e-mail pentru a trimite e-mailul de confirmare pe baza datelor trimise - adresa de e-mail și URL de referință de la pasul 3.

Am decis să folosim Gmail, deoarece ne-a permis să trimitem e-mailuri care arată și se simt cel mai personal. Cu toate acestea, limitele zilnice de trimitere ale Gmail ne-au cauzat unele probleme atunci când volumul a depășit 1500 de e-mailuri/zi. Dacă volumul de înscriere este în mod constant mai mare decât atât, poate doriți să luați în considerare alte alternative precum SendGrid sau Mailchimp.

Pentru a include link-uri dinamice și orice alt conținut în afară de text (de ex. imagini), ar trebui să alegeți opțiunea HTML în Zapier. În Integrat, HTML este activat implicit.

Mai jos este un exemplu de structură pe care îl puteți folosi pentru a vă crea e-mailul de confirmare folosind HTML. Utilizați datele din trimiterea formularului pentru a personaliza 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. Sistem de urmărire

Urmărire internă

În cele din urmă, trebuie să livrați datele de înscriere de pe site-ul dvs. web și trimiterile Typeform către o singură destinație unde puteți urmări numărul de înscrieri, trimiterile Typeform corespunzătoare și recomandările. Folosim Foi de calcul Google, dar nu ezitați să utilizați Airtable sau altceva cu care vă simțiți confortabil.

Pentru ca datele să curgă către Sheet în timp real, trebuie să le conectați la site-ul dvs. web și Typeform folosind Zapier/Integromat/etc. Ai nevoie de două declanșatoare:

  1. Înscriere pe lista de așteptare → Trimite e-mail și creează un nou rând de foaie de calcul (acesta este cel despre care am discutat la pasul anterior)
  2. Trimitere formular → Creați un nou rând de foaie de calcul
Atât Zapier, cât și Integromat au instrucțiuni complete despre cum să se realizeze aceste integrări.

Pentru sistemul de urmărire, am creat un șablon simplu pe care îl puteți duplica și utiliza ca bază pentru propriul sistem de urmărire:

Pe lângă cele patru foi de lucru incluse în șablon, am creat și alte tabele, cum ar fi urmărirea automată a recompenselor și canalul de e-mail, foaia de dezabonări, maparea pâlniei și multe altele. Dar vă lăsăm asta în seama dumneavoastră

Extern

Pentru a ajuta utilizatorii să urmărească numărul de recomandări cu linkul lor unic, am creat un clasament public – tot cu Foi de calcul Google.

+ 10. Recomandări suplimentare cu Typeform

Una dintre modalitățile de a vă crește rata de recomandare este să le cereți utilizatorilor să introducă adresa de e-mail a prietenului sau a unui coleg. Aceasta ar putea fi una dintre întrebările din sondajul Typeform sau un formular de pe pagina de confirmare.

Am inclus întrebarea de recomandare la sfârșitul sondajului nostru Typeform.


Iată cum arată pe Zapier:

Operația de filtrare înainte de a trimite e-mailul este importantă. Vrei să te asiguri că:

  1. Valoarea este de fapt un e-mail (Typeform nu este perfect pentru a identifica acest lucru)
  2. Valoarea nu este goală
  3. Referentul nu se referă singur

În cele din urmă, includem referrerul în câmpul cc al e-mailului de recomandare pentru a face experiența mai personală

Asta e

Programul dvs. de recomandare este acum gata pentru lansare. Felicitări!

În cazul în care ați întâmpinat probleme pe parcurs, nu ezitați să-mi trimiteți un e-mail – sau și mai bine, comentați pe Twitter / LinkedIn pentru ca toată lumea să ia atenție.

Mi-ar plăcea să știu și dacă ajungi să folosești acest sistem, așa că te rog să-mi dai un ping dacă ai făcut-o și să distribui postarea cu altcineva care ar putea beneficia de el ️