Wirusowy program polecający Flowrite – Jak 8-krotnie zwiększyliśmy nasze cotygodniowe rejestracje

Opublikowany: 2022-03-22

Wstęp

Od czasu naszej pierwszej premiery w październiku zbieraliśmy na naszej stronie docelowej zapisy e-mailowe od ludzi zafascynowanych naszym produktem. Gdy potencjalny użytkownik dołączy do naszej listy oczekujących, podając swój adres e-mail, wyślemy wiadomość e-mail z potwierdzeniem.

Jesienią wielokrotnie powtarzaliśmy nasz e-mail z potwierdzeniem — starając się zachęcić osoby rejestrujące się do dzielenia się informacjami o Flowrite ze swoimi przyjaciółmi. Przetestowaliśmy różne kopie i udostępniliśmy linki do mediów społecznościowych, co zapewniło nam przyzwoitą ilość przekazu ustnego. Ostatecznie brakowało zachęty dla ludzi do rozpowszechniania informacji.

Kilka miesięcy później zaczęliśmy szukać gotowych rozwiązań marketingowych, takich jak pętle wirusowe, KickoffLabs i Prefinery, ale żadne z nich nie zapewniało nam elastyczności, której szukaliśmy. Chcieliśmy zawładnąć całym procesem – rejestracją, wdrażaniem, poleceniami, e-mailami i nagrodami. Kąt

Zaczęliśmy więc budować własny system poleceń, używając narzędzi bez kodu. Niedługo potem uruchomiliśmy nową wersję procesu rejestracji, składającą się z pięknie zintegrowanej ankiety onboardingowej i programu poleceń – dając ludziom możliwość zdobycia nagród poprzez zapraszanie znajomych do dołączenia do naszej listy oczekujących.

Nowy system spowodował ogromny wzrost liczby naszych rejestracji – ponad 8-krotny wzrost w 4. tygodniu 2021 r. w porównaniu do średniej tygodniowej rejestracji w ciągu poprzednich 6 tygodni. Kąt

To jest praktyczna instrukcja krok po kroku, jak wdrożyć ten sam program poleceń w swojej firmie

Co obejmuje program poleceń Flowrite?

  • Rejestracja e-mail na flowrite.com
  • Unikalny link polecający przypisany do każdego użytkownika
  • Nagrody dla # poleconych osób
  • Pięknie zintegrowana ankieta Typeform do zbierania dalszych informacji o każdym użytkowniku
  • Możliwość polecania przez użytkownika znajomego podczas ankiety
  • Wewnętrzny arkusz kalkulacyjny do śledzenia rejestracji i skierowań
  • Publiczna tablica wyników dla użytkowników do śledzenia ich skierowań

Co jest wymagane do zbudowania podobnego programu?

  • Witryna, którą możesz dostosować za pomocą własnego kodu HTML i JavaScript (np. witryna Webflow lub po prostu witryna w czystym HTML)
  • Ankieta typu (opcjonalnie)
  • Arkusze Google lub Airtable
  • Gmail lub coś innego, co wysyła e-maile
  • Platforma automatyzacji (np. Zapier lub Integromat) do sklejania rzeczy

Ponadto posiadanie pewnego poziomu zrozumienia JavaScript może się przydać, ale w żadnym wypadku nie jest niezbędne!

️.
Zanim się tym zajmę, polecam samemu przejść przez nasz proces rejestracji, aby zobaczyć, jak wszystko działa. Wystarczy nacisnąć przycisk na pasku nawigacyjnym, wprowadzić swój adres e-mail, przejść przez naszą ankietę Typeform i sprawdzić, czy w skrzynce odbiorczej nie ma e-maila z potwierdzeniem.

1. Tworzenie kodu polecającego

Każda osoba, która zapisze się na naszą listę oczekujących, otrzymuje losowy 6-znakowy kod składający się z cyfr i liter. Pod koniec procesu rejestracji używamy tego kodu na stronie potwierdzenia, aby za pomocą jednego kliknięcia udostępnić użytkownikowi linki do udostępniania w mediach społecznościowych.

Aby utworzyć kod polecający, wstaw następujący fragment kodu na końcu tagu <body> (lub przed tagiem </body>) na każdej stronie, na której użytkownik może się zarejestrować. Jeśli używasz Webflow lub podobnego narzędzia do tworzenia witryn, możesz wstawić kod globalnie do każdej strony z ustawień witryny.

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

Po drugie, utwórz inną zmienną lub stałą o nazwie referralUrl, która składa się z adresu URL Twojej strony głównej i kodu, który właśnie wygenerowaliśmy. Wstaw go poniżej zmiennej referralCode.

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

2. Przechowywanie adresu URL użytkownika

Chcesz również przechowywać bieżący adres URL użytkownika w zmiennej. Ważne jest, aby wiedzieć, z którego adresu URL pochodzi każda rejestracja, aby policzyć liczbę skierowań na każdy link polecający.

  
const siteUrl = window.location.href

Twój kod powinien teraz wyglądać tak:

  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. Formularz rejestracji

Tworzenie ukrytych pól wejściowych

Oprócz pola wprowadzania adresu e-mail, formularz rejestracji powinien zawierać również dwa ukryte dane wejściowe, do których wkrótce przypiszemy wartości referralUrl i siteUrl z poprzednich kroków.

Aby dodać pola wejściowe, wstaw następujący kod w elemencie formularza – tuż obok pola e-mail.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
Jeśli korzystasz z Webflow, możesz to zrobić za pomocą ukrytego elementu HTML Embed.

Wypełnianie pól wejściowych

Wejścia są jednak nadal puste. Musisz przypisać zmienne z kroków 1 i 2 do swoich danych wejściowych, aby zostały uwzględnione w przesłanym zgłoszeniu.

  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;
Jeśli używasz np. symboli Webflow i masz wiele wystąpień tego samego formularza rejestracyjnego na jednej stronie Twojej witryny, musisz upewnić się, że zmienne są przypisane do właściwych danych wejściowych. Sprawdź naszą notatkę Notion, aby uzyskać instrukcje na ten temat.

Testowanie tego

Teraz, gdy użytkownik rejestruje się w witrynie, zarówno odsyłający adres URL, jak i adres URL witryny powinny być ukryte w zgłoszeniu. Jeśli korzystasz z Webflow, możesz to sprawdzić w e-mailu z potwierdzeniem.

4. Dostosowywanie ankiety Typeform

W ramach systemu rejestracji i poleceń używamy Typeform, aby dowiedzieć się więcej o każdym użytkowniku. Wypełnienie ankiety Typeform nie jest wymagane, aby dołączyć do listy oczekujących, ponieważ adresy e-mail zbieramy już podczas pierwszej rejestracji. Odsetek użytkowników, którzy przystępują do wypełnienia ankiety, wynosi obecnie około 75%.

W praktyce chcemy dostarczyć referralCode (krok 1) i e-mail użytkownika do Typeform i „przenieść” je przez cały czas przesyłania. Robimy to, aby:

  1. Użyj kodu polecającego w linkach do udostępniania na stronie potwierdzenia (krok 7)
  2. Dopasuj początkowe rejestracje na liście oczekujących do odpowiednich odpowiedzi Typeform. Przenosząc wiadomość e-mail z formularza rejestracyjnego do Typeform, nie musimy prosić użytkownika o dwukrotne przesłanie go.

Ukryte pola

Aby tak się stało, musisz użyć funkcji Ukryte pola Typeform. Możesz znaleźć ustawienia w Logika → Zaawansowane.

Musisz ustawić dwa ukryte pola: @email i @code. Gdy to zrobisz, możesz wstawić te wartości na końcu linku Typeform i przesłać je wraz z innymi odpowiedziami Typeform:

5. Integracja Typeform z Twoją witryną

Typeform oferuje kilka alternatyw, jak umieścić ankietę na swojej stronie. Jeśli nie chcesz używać osadzania, możesz po prostu przekierować użytkowników do linku Typeform.com.

Używamy alternatywy „Popup” z rozmiarem wyskakującym ustawionym jako „Duży”


Jeśli zdecydujesz się na dowolne osadzanie, musisz pobrać kod osadzania Typeform i umieścić go w kodzie HTML swojej strony.

W przypadku wyskakującego okienka tak naprawdę nie ma znaczenia, gdzie umieścisz kod Typeform. Mamy swoje na szczycie hierarchii stron.

Wyskakujące okienko zawiera również element <a>, który zasadniczo jest przyciskiem „Uruchom mnie”. Jego funkcją jest otwarcie wyskakującego okienka ankiety po kliknięciu. Ponieważ jednak chcesz, aby wyskakujące okienko otwierało się automatycznie, gdy użytkownik przesyła formularz rejestracyjny, potrzebujesz fragmentu kodu, który zrobi to za Ciebie.

Chcesz również, aby ten kod wziął przesłaną wiadomość e-mail (z elementu wejściowego o identyfikatorze ustawionym na „email”), przypisał go do zmiennej i wstawił na końcu linku Typeform wraz z referralCode. To będą ukryte pola, które ustawiliśmy wcześniej

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

Na koniec ustaw widoczność elementu <a> na „none”, aby ukryć przycisk „Uruchom mnie”.

Jeśli korzystasz z Webflow, możesz po prostu ukryć cały osadzony kod HTML.

6. Przekierowanie formularza

Typeform umożliwia przekierowanie użytkowników do niestandardowych adresów URL po wypełnieniu ankiety. Adresy URL można dostosować zarówno za pomocą danych ankiety, jak i ukrytych pól.

Nasze linki przekierowujące zawierają zarówno kod polecający (ukryte pole), jak i imię użytkownika z ankiety.

Na przykład, jeśli „kod” został ustawiony na 123456 , a imię użytkownika to Aaro , adres URL przekierowania będzie wyglądał następująco:

7. Strona potwierdzenia

Na naszej stronie z potwierdzeniem chcieliśmy dać użytkownikom proste opcje udostępniania ich osobistego linku polecającego i informowania ich o nagrodach, jakie mogą zdobyć.

Motywacja

Naszym sposobem na zmotywowanie użytkowników jest oferowanie merchów marki Flowrite oraz bezpłatny dostęp do produktu. W przypadku merchów zalecamy wybór przedmiotów, które zmieszczą się w liście. Niedawno zdaliśmy sobie sprawę, że wysyłka paczek na całym świecie może być trochę droższa.

Jeśli chcesz zagłębić się w to, jak wybrać nagrody i zachęty do programów poleceń, zapoznaj się z przewodnikiem Referral Rock na ten temat.

Dostosowywanie strony potwierdzenia

Posiadanie tego niestandardowego adresu URL przekierowania z Typeform pozwala dostosować stronę potwierdzenia dla każdego użytkownika. Na przykład strona potwierdzenia Flowrite używa wartości „imię” adresu URL, aby strona była nieco bardziej osobista:


Aby zrobić to samo, zacznij od owinięcia części akapitu, którą chcesz dostosować. Następnie ustaw identyfikator zakresu na „imię”.

Na koniec wstaw następujący fragment kodu na końcu tagu <body> na stronie potwierdzenia.

  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;

Oprócz imienia możesz również użyć wartości „kod” adresu URL, aby dostosować linki udostępniania w mediach społecznościowych. Aby utworzyć link do Twittera, najpierw ustaw identyfikator przycisku udostępniania na Twitterze na „tweetuj”.

Następnie wstaw następujący kod na końcu tagu <body> na stronie potwierdzenia.

  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);
Wykorzystaj swoją kreatywność, aby dostosować teksty i linki na stronie potwierdzenia w dowolny sposób. Możesz także porównać nasze.

8. E-mail potwierdzający

Po wstępnej rejestracji na naszej stronie internetowej wysyłamy wiadomość e-mail z potwierdzeniem na podany adres e-mail. Oczywiście chcemy używać referralUrl z kroku 3 w każdym linku do udostępniania w tym e-mailu.

Niezależnie od tego, czy używasz Zapier, czy Integromat do automatyzacji wiadomości potwierdzającej, chcesz wykorzystać przesłanie formularza rejestracji jako wyzwalacz i połączyć go ze swoim kontem e-mail, aby wysłać wiadomość e-mail z potwierdzeniem na podstawie przesłanych danych – adresu e-mail i adresu URL polecającego z krok 3.

Zdecydowaliśmy się na korzystanie z Gmaila, ponieważ pozwalał nam on wysyłać e-maile, które wyglądają i są najbardziej osobiste. Jednak dzienne limity wysyłania Gmaila sprawiły nam pewne problemy, gdy liczba wiadomości przekroczyła 1500 e-maili dziennie. Jeśli Twój wolumen rejestracji jest stale wyższy, możesz rozważyć inne alternatywy, takie jak SendGrid lub Mailchimp.

Aby dołączyć dynamiczne linki i wszelkie inne treści poza tekstem (np. obrazy), należy wybrać opcję HTML w Zapier. W Integromacie HTML jest domyślnie włączony.

Poniżej znajduje się przykładowa struktura, której możesz użyć do utworzenia wiadomości e-mail z potwierdzeniem przy użyciu kodu HTML. Użyj danych z przesłanego formularza, aby dostosować adres URL 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. System śledzenia

Śledzenie wewnętrzne

Na koniec musisz dostarczyć dane rejestracji ze swojej witryny i zgłoszeń Typeform do jednego miejsca, w którym możesz śledzić liczbę rejestracji, odpowiadające im zgłoszenia Typeform i skierowania. Korzystamy z Arkuszy Google, ale możesz wybrać Airtable lub coś innego, z czym czujesz się komfortowo.

Aby dane przepływały do ​​Arkusza w czasie rzeczywistym, musisz połączyć go ze swoją stroną internetową i Typeform za pomocą Zapier/Integromat/etc. Potrzebujesz dwóch wyzwalaczy:

  1. Rejestracja na liście oczekujących → Wyślij e-mail i utwórz nowy wiersz arkusza kalkulacyjnego (to ten, który omawialiśmy w poprzednim kroku)
  2. Wpisz formularz → Utwórz nowy wiersz arkusza kalkulacyjnego
Zarówno Zapier, jak i Integromat posiadają wyczerpujące instrukcje, jak wykonać te integracje.

Dla systemu śledzenia stworzyliśmy prosty szablon, który możesz powielić i wykorzystać jako bazę dla własnego systemu śledzenia:

Oprócz czterech arkuszy roboczych zawartych w szablonie zbudowaliśmy również różne inne tabele, takie jak automatyczne śledzenie nagród i potok wiadomości e-mail, arkusz anulowania subskrypcji, mapowanie ścieżek i wiele innych. Ale zostawimy to tobie

Zewnętrzny

Aby pomóc użytkownikom śledzić liczbę skierowań za pomocą ich unikalnego linku, stworzyliśmy publiczną tablicę wyników – również z Arkuszami Google.

+ 10. Dodatkowe polecenia z Typeform

Jednym ze sposobów na zwiększenie wskaźnika rekomendacji jest poproszenie użytkowników o podanie adresu e-mail znajomego lub współpracownika. Może to być jedno z pytań w ankiecie Typeform lub formularz na stronie potwierdzenia.

Pytanie polecające zamieściliśmy na końcu naszej ankiety Typeform.


Oto jak to wygląda na Zapier:

Ważna jest operacja filtrowania przed wysłaniem wiadomości e-mail. Chcesz się upewnić, że:

  1. Wartość jest w rzeczywistości adresem e-mail (Typeform nie jest idealny do identyfikacji tego)
  2. Wartość nie jest pusta
  3. Osoba polecająca nie odsyła się sama

Na koniec uwzględniamy osobę polecającą w polu DW e-maila z poleceniem, aby doświadczenie było bardziej osobiste

Otóż ​​to

Twój program poleceń jest teraz gotowy do uruchomienia. Gratulacje!

Jeśli napotkasz jakieś problemy po drodze, nie wahaj się wysłać mi e-maila – a jeszcze lepiej, skomentuj na Twitterze / LinkedIn, aby wszyscy mogli to zauważyć.

Chciałabym również wiedzieć, czy w końcu korzystasz z tego systemu, więc proszę, napisz do mnie, jeśli tak, i udostępnij wpis komuś innemu, kto może z niego skorzystać ️