Flowrite의 바이럴 추천 프로그램 – 주간 가입 수를 8배 늘린 방법

게시 됨: 2022-03-22

소개

10월에 처음 출시된 이후로 우리는 우리 제품에 관심이 많은 사람들로부터 방문 페이지의 이메일 등록을 수집했습니다. 잠재 사용자가 이메일 주소를 제출하여 대기자 명단에 합류한 후 확인 이메일을 보내드립니다.

가을 내내 우리는 확인 이메일을 여러 번 반복했습니다. 가입한 사람들이 Flowrite에 대해 친구들과 공유하도록 독려하기 위해 노력했습니다. 우리는 다른 사본을 테스트하고 소셜 미디어에 대한 공유 링크를 제공하여 상당한 양의 입소문을 받았습니다. 결국, 사람들이 소문을 퍼뜨리는 동기가 부족했습니다.

몇 달 후, 우리는 Viral Loops, KickoffLabs, Prefinery와 같은 기성 추천 마케팅 솔루션을 조사하기 시작했지만 그들 중 누구도 우리가 찾던 유연성을 실제로 제공하지 못했습니다. 우리는 가입, 온보딩, 추천, 이메일, 보상 등 전체 프로세스를 소유하고 싶었습니다. ‍

그래서 우리는 코드가 없는 도구를 사용하여 자체 추천 시스템을 구축하기 시작했습니다. 얼마 지나지 않아 우리는 아름답게 통합된 온보딩 설문조사와 추천 프로그램으로 구성된 새로운 버전의 가입 절차를 시작했습니다. 이 프로그램은 사람들이 친구를 대기자 명단에 초대하여 보상을 받을 수 있는 가능성을 제공합니다.

새로운 시스템으로 인해 가입이 엄청나게 급증했습니다. 이전 6주 동안의 평균 주간 가입에 비해 2021년 4주차에는 8배 이상 증가했습니다. ‍

이것은 귀하의 비즈니스에서 동일한 추천 프로그램을 구현하는 방법에 대한 실용적인 단계별 지침입니다.

Flowrite의 추천 프로그램에는 무엇이 포함됩니까?

  • flowrite.com에서 이메일 등록
  • 모든 사용자에게 할당된 고유 추천 링크
  • 추천한 사람 #명에 대한 보상
  • 각 사용자에 대한 추가 정보를 수집하기 위해 아름답게 통합된 Typeform 설문 조사
  • 사용자가 설문조사 중에 친구를 추천할 수 있는 가능성
  • 가입 및 추천을 추적하는 내부 스프레드시트
  • 사용자가 추천을 추적할 수 있는 공개 리더보드

유사한 프로그램을 구축하려면 무엇이 필요합니까?

  • 고유한 HTML 및 JavaScript로 사용자 정의할 수 있는 웹사이트(예: Webflow 사이트 또는 순수 HTML 웹사이트)
  • 서체 설문조사(선택사항)
  • Google 스프레드시트 또는 에어테이블
  • Gmail 또는 이메일을 보내는 기타
  • 사물을 함께 붙이기 위한 자동화 플랫폼(예: Zapier 또는 Integromat)

또한 JavaScript를 어느 정도 이해하면 편리할 수 있지만 반드시 필요한 것은 아닙니다!

️
시작하기 전에 가입 절차를 직접 진행하여 모든 것이 어떻게 작동하는지 확인하는 것이 좋습니다. 탐색 모음의 버튼을 누르고 이메일을 입력하고 Typeform 설문조사를 통해 받은 편지함에서 확인 이메일을 확인하세요.

1. 추천 코드 생성

대기자 명단에 등록한 각 사람에게는 숫자와 문자로 구성된 무작위 6자리 코드가 할당됩니다. 가입 프로세스가 끝나면 확인 페이지에서 이 코드를 사용하여 사용자에게 한 번의 클릭으로 소셜 미디어에 대한 공유 링크를 제공합니다.

추천 코드를 생성하려면 사용자가 가입할 수 있는 각 페이지의 <body> 태그 끝(또는 </body> 태그 앞)에 다음 스니펫을 삽입하십시오. Webflow 또는 유사한 웹 사이트 빌더를 사용하는 경우 사이트 설정에서 모든 페이지에 전체적으로 코드를 삽입할 수 있습니다.

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

두 번째로, 홈페이지의 URL과 방금 생성한 코드로 구성된 ReferralUrl이라는 다른 변수 또는 상수를 만듭니다. ReferralCode 변수 아래에 삽입하십시오.

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

2. 사용자의 URL 저장

또한 사용자의 현재 URL을 변수에 저장하려고 합니다. 각 추천 링크당 추천 수를 계산하려면 모든 가입이 어떤 URL에서 오는지 아는 것이 중요합니다.

  
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;
const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href;

3. 가입 양식

숨겨진 입력 필드 만들기

이메일 입력 필드 외에도 가입 양식에는 이전 단계의 ReferralUrl 및 siteUrl 값을 곧 할당할 두 개의 숨겨진 입력이 포함되어야 합니다.

입력 필드를 추가하려면 양식 요소 내부에 이메일 필드 바로 옆에 다음 코드를 삽입하십시오.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
Webflow를 사용하는 경우 숨겨진 HTML Embed 요소를 사용하여 이 작업을 수행할 수 있습니다.

입력 필드 채우기

그러나 입력은 여전히 ​​비어 있습니다. 제출에 포함되도록 1단계와 2단계의 변수를 입력에 할당해야 합니다.

  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;
예를 들어 Webflow의 기호를 사용하고 웹사이트의 단일 페이지에 동일한 가입 양식의 여러 인스턴스가 있는 경우 변수가 올바른 입력에 할당되었는지 확인해야 합니다. 이에 대한 지침은 Notion 메모를 확인하십시오.

테스트

이제 사용자가 웹사이트에 가입할 때 추천 URL과 사이트 URL이 제출물에 숨겨져 포함되어야 합니다. Webflow를 사용하는 경우 확인 이메일에서 이를 확인할 수 있습니다.

4. Typeform 설문조사 사용자 정의

가입 및 추천 시스템의 일부로 Typeform을 사용하여 각 사용자에 대해 자세히 알아봅니다. 대기자 명단에 합류하기 위해 Typeform 설문조사를 완료할 필요는 없습니다. 초기 등록 시 이미 이메일 주소를 수집하기 때문입니다. 설문 조사를 완료하기 위해 진행하는 사용자의 비율은 현재 약 75%입니다.

실제로, 우리는 ReferralCode(1단계)와 사용자의 이메일을 Typeform으로 전달하고 제출하는 동안 이를 "전달"하려고 합니다. 우리는 다음을 위해 이 작업을 수행합니다.

  1. 확인 페이지의 공유 링크에서 ReferralCode를 사용하십시오(7단계).
  2. 초기 대기자 명단 등록을 해당 Typeform 답변과 일치시킵니다. 가입 양식의 이메일을 Typeform으로 가져옴으로써 사용자에게 두 번 제출하도록 요청할 필요가 없습니다.

숨겨진 필드

이를 위해서는 Typeform의 Hidden Fields 기능을 사용해야 합니다. 로직 → 고급에서 설정을 찾을 수 있습니다.

@email과 @code라는 두 개의 숨겨진 필드를 설정해야 합니다. 완료되면 Typeform 링크 끝에 해당 값을 삽입하고 Typeform의 다른 답변과 함께 제출할 수 있습니다.

5. Typeform을 사이트에 통합하기

Typeform은 페이지에 설문조사를 포함하는 방법에 대한 몇 가지 대안을 제공합니다. 포함을 사용하지 않으려면 사용자를 Typeform.com 링크로 리디렉션하면 됩니다.

팝업 크기가 "대"로 설정된 "팝업" 대안을 사용합니다.


임베드를 선택했다면 Typeform의 임베드 코드를 가져와 페이지의 HTML에 배치해야 합니다.

팝업을 사용하면 Typeform 코드를 어디에 두는지는 중요하지 않습니다. 우리는 페이지 계층 구조의 맨 위에 있습니다.

팝업에는 본질적으로 "Launch me" 버튼인 <a> 요소도 포함되어 있습니다. 클릭 시 설문 팝업을 여는 기능입니다. 그러나 사용자가 가입 양식을 제출할 때 팝업이 자동으로 열리도록 하려면 이를 수행하는 코드가 필요합니다.

또한 해당 코드가 제출된 이메일을 가져오고(id가 "email"로 설정된 입력 요소에서) 이를 변수에 할당하고 ReferrerCode와 함께 Typeform 링크 끝에 삽입하기를 원합니다. 이것은 우리가 이전에 설정한 Hidden Fields가 될 것입니다.

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

마지막으로 "Launch me" 버튼을 숨기기 위해 <a> 요소의 가시성을 "none"으로 설정합니다.

Webflow를 사용하는 경우 전체 HTML Embed를 숨길 수 있습니다.

6. Typeform 리디렉션

Typeform을 사용하면 설문조사를 완료한 후 사용자를 사용자 정의 URL로 리디렉션할 수 있습니다. URL은 설문조사 데이터와 숨겨진 필드 모두로 사용자 정의할 수 있습니다.

우리의 리디렉션 링크에는 추천 코드(숨겨진 필드)와 설문조사의 사용자 이름이 모두 포함되어 있습니다.

예를 들어 "코드"가 123456 으로 설정되고 사용자의 이름이 Aaro 인 경우 리디렉션 URL은 다음과 같습니다.

7. 확인 페이지

확인 페이지에서 사용자에게 개인 추천 링크를 공유하고 받을 수 있는 보상에 대해 알릴 수 있는 간단한 옵션을 제공하고자 했습니다.

인센티브

사용자에게 인센티브를 제공하는 우리의 방법은 Flowrite 브랜드 상품과 제품에 대한 무료 액세스를 제공하는 것입니다. 상품의 경우 편지에 들어갈 수 있는 항목을 선택하는 것이 좋습니다. 우리는 최근에 전 세계로 패키지를 배송하는 것이 약간 비쌀 수 있다는 것을 깨달았습니다..

추천 프로그램에 대한 보상 및 인센티브를 선택하는 방법에 대해 더 자세히 알고 싶다면 해당 주제에 대한 Referral Rock의 가이드를 확인하십시오.

확인 페이지 사용자 지정

Typeform에서 해당 사용자 지정 리디렉션 URL을 사용하면 모든 사용자에 대한 확인 페이지를 사용자 지정할 수 있습니다. 예를 들어 Flowrite의 확인 페이지는 URL의 "이름" 값을 사용하여 페이지를 약간 더 개인화합니다.


동일한 작업을 수행하려면 범위에서 사용자 지정하려는 단락의 일부를 래핑하여 시작합니다. 그런 다음 범위의 id를 "firstname"으로 설정합니다.

마지막으로 확인 페이지의 <body> 태그 끝에 다음 스니펫을 삽입합니다.

  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;

이름 외에도 URL의 "코드" 값을 사용하여 소셜 미디어에 대한 공유 링크를 사용자 정의할 수도 있습니다. Twitter 링크를 만들려면 먼저 Twitter 공유 버튼의 ID를 "tweet"으로 설정하세요.

그런 다음 확인 페이지의 <body> 태그 끝에 다음 코드를 삽입합니다.

  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);
창의력을 발휘하여 확인 페이지의 텍스트와 링크를 원하는 방식으로 사용자 정의하십시오. 우리를 벤치마킹할 수도 있습니다.

8. 확인 이메일

당사 웹사이트에서 최초 가입 후 제출된 이메일 주소로 확인 이메일을 보내드립니다. 당연히 우리는 해당 이메일의 모든 공유 링크에서 3단계의 ReferralUrl을 사용하려고 합니다.

Zapier 또는 Integromat를 사용하여 확인 이메일을 자동화하는지 여부에 관계없이 가입 양식 제출을 트리거로 사용하고 이메일 계정에 연결하여 제출된 데이터(이메일 주소 및 ReferralURL)를 기반으로 확인 이메일을 보내고 싶습니다. 3단계.

Gmail을 사용하면 가장 개인적으로 보이는 이메일을 보낼 수 있기 때문에 Gmail을 사용하기로 결정했습니다. 그러나 Gmail의 일일 전송 제한으로 인해 볼륨이 하루에 1500개 이메일을 초과하면 몇 가지 문제가 발생했습니다. 가입 볼륨이 지속적으로 그보다 많으면 SendGrid 또는 Mailchimp와 같은 다른 대안을 고려할 수 있습니다.

동적 링크 및 텍스트(예: 이미지) 외에 다른 콘텐츠를 포함하려면 Zapier에서 HTML 옵션을 선택해야 합니다. Integromat에서 HTML은 기본적으로 활성화되어 있습니다.

다음은 HTML을 사용하여 확인 이메일을 만드는 데 사용할 수 있는 구조의 예입니다. 양식 제출의 데이터를 사용하여 ReferrUrl을 사용자 정의하십시오.

  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. 추적 시스템

내부 추적

마지막으로 웹사이트의 가입 데이터와 Typeform 제출을 단일 대상으로 전달하여 가입 횟수, 해당 Typeform 제출 및 추천을 추적할 수 있어야 합니다. 우리는 Google 스프레드시트를 사용하고 있지만 Airtable 또는 편안하게 느끼는 다른 것으로 자유롭게 이동하십시오.

시트에 실시간으로 데이터가 흐르도록 하려면 Zapier/Integromat 등을 사용하여 웹사이트 및 Typeform과 연결해야 합니다. 두 가지 트리거가 필요합니다.

  1. 대기자 등록 → 이메일 보내기 및 새 스프레드시트 행 만들기 (이전 단계에서 논의한 항목)
  2. Typeform 제출 → 새 스프레드시트 행 만들기
Zapier와 Integromat 모두 이러한 통합을 수행하는 방법에 대한 포괄적인 지침을 제공합니다.

추적 시스템의 경우 복제하여 고유한 추적 시스템의 기반으로 사용할 수 있는 간단한 템플릿을 만들었습니다.

템플릿에 포함된 4개의 워크시트 외에도 자동화된 보상 추적 및 이메일 파이프라인, 구독 취소 시트, 깔때기 매핑 등과 같은 다양한 다른 테이블도 만들었습니다. 그러나 우리는 당신에게 그것을 맡길 것입니다

외부의

사용자가 고유한 링크로 추천 수를 추적할 수 있도록 Google 스프레드시트와 함께 공개 리더보드를 만들었습니다.

+ 10. Typeform을 통한 추가 추천

추천률을 높이는 방법 중 하나는 사용자에게 친구나 동료의 이메일 주소를 입력하도록 요청하는 것입니다. 이것은 Typeform 설문조사의 질문 중 하나이거나 확인 페이지의 양식일 수 있습니다.

Typeform 설문조사 끝에 추천 질문을 포함시켰습니다.


Zapier에서는 다음과 같이 보입니다.

이메일을 보내기 전에 필터 작업이 중요합니다. 다음을 확인하려고 합니다.

  1. 값은 실제로 이메일입니다(Typeform은 이를 식별하는 데 완벽하지 않습니다).
  2. 값이 비어 있지 않습니다.
  3. 참조자는 자신을 참조하지 않습니다.

마지막으로 추천 이메일의 참조 필드에 추천인을 포함하여 경험을 더욱 개인화합니다.

그게 다야

이제 추천 프로그램을 시작할 준비가 되었습니다. 축하 해요!

도중에 문제가 발생하면 주저하지 말고 저에게 이메일을 보내주십시오. 모든 사람이 알 수 있도록 Twitter/LinkedIn에 댓글을 달아주세요.

나는 또한 당신이 이 시스템을 사용하게 되는지 알고 싶습니다. 만약 당신이 이 시스템을 사용했다면 저에게 핑을 보내주시고 이 시스템의 혜택을 받을 수 있는 다른 사람과 게시물을 공유하십시오 ️