Flowrite 的病毒式推薦計劃——我們如何將每週註冊量提高 8 倍

已發表: 2022-03-22

介紹

自 10 月首次發布以來，我們已經在登錄頁面上收集了來自對我們的產品感到興奮的人們的電子郵件註冊。在潛在用戶通過提交他們的電子郵件地址加入我們的候補名單後，我們將跟進一封確認電子郵件。

整個秋天，我們多次重複我們的確認電子郵件——試圖鼓勵那些註冊的人向他們的朋友分享有關 Flowrite 的信息。我們測試了不同的副本並為社交媒體提供了共享鏈接，這讓我們獲得了相當多的口碑。最後，缺少的是人們傳播信息的動力。

幾個月後，我們開始研究現成的推薦營銷解決方案，例如 Viral Loops、KickoffLabs 和 Prefinery，但它們都沒有真正為我們提供所需的靈活性。我們希望擁有整個流程——註冊、入職、推薦、電子郵件和獎勵。 ‍

因此，我們開始使用無代碼工具構建自己的推薦系統。 不久之後，我們推出了一個新版本的註冊流程，其中包含精美的入職調查和推薦計劃——讓人們有機會通過邀請他們的朋友加入我們的候補名單來獲得獎勵。

新系統導致我們的註冊量激增——與前 6 週的平均每週註冊量相比，2021 年第 4 週增加了 8 倍以上。 ‍

這是有關如何在您的企業中實施相同推薦計劃的實用分步說明

Flowrite 的推薦計劃包括什麼？

在 flowrite.com 上進行電子郵件註冊
分配給每個用戶的唯一推薦鏈接
推薦人的獎勵
精美集成的 Typeform 調查以收集有關每個用戶的更多信息
用戶可以在調查期間推薦朋友
用於跟踪註冊和推薦的內部電子表格
供用戶跟踪其推薦的公共排行榜

構建類似程序需要什麼？

您可以使用自己的 HTML 和 JavaScript 自定義的網站（即 Webflow 網站或純 HTML 網站）
字體調查（可選）
谷歌表格或 Airtable
Gmail 或其他發送電子郵件的工具
將事物粘合在一起的自動化平台（例如 Zapier 或 Integromat）

此外，對 JavaScript 有一定程度的了解可能會很方便，但無論如何都不是必需的！

️

在開始之前，我建議您自己完成我們的註冊過程，看看一切是如何運作的。只需點擊導航欄中的按鈕，輸入您的電子郵件，完成我們的 Typeform 調查並檢查您的收件箱以獲取確認電子郵件。

1.創建推薦代碼

每個註冊我們候補名單的人都會被分配一個由數字和字母組成的隨機 6 字符代碼。在註冊過程結束時，我們在確認頁面上使用此代碼為用戶提供社交媒體的一鍵分享鏈接。

要創建推薦代碼，請在用戶可以註冊的每個頁面上的 <body> 標記末尾（或 </body> 標記之前）插入以下代碼段。如果您使用的是 Webflow 或類似的網站構建器，則可以將代碼全局插入站點設置中的每個頁面。

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

其次，創建另一個變量或常量，稱為refererUrl，它由您的主頁的URL 和我們剛剛生成的代碼組成。將其插入到 referCode 變量下方。

  
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. 報名表

創建隱藏的輸入字段

除了電子郵件輸入字段之外，您的註冊表單還應包含兩個隱藏的輸入，我們將很快為其分配前面步驟中的 referUrl 和 siteUrl 值。

要添加輸入字段，請在表單元素中插入以下代碼 - 就在電子郵件字段旁邊。

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

*如果您使用的是 Webflow，則可以使用隱藏的 HTML 嵌入元素來執行此操作。*

填充輸入字段

但是，輸入仍然是空的。您需要將步驟 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%。

在實踐中，我們希望將推薦代碼（步驟 1）和用戶的電子郵件傳遞到 Typeform 並在整個提交過程中“攜帶”它們。我們這樣做是為了：

在您的確認頁面上的共享鏈接中使用推薦代碼（第 7 步）
將初始候補名單註冊與相應的 Typeform 答案相匹配。通過將電子郵件從註冊表單帶到 Typeform，我們不需要要求用戶提交兩次。

隱藏字段

為此，您需要使用 Typeform 的隱藏字段功能。您可以在 Logic → Advanced 下找到設置。

您需要設置兩個隱藏字段：@email 和@code。完成後，您可以在 Typeform 鏈接的末尾插入這些值，並將它們與 Typeform 的其他答案一起提交：

5. 將 Typeform 集成到您的站點

Typeform 為您提供了幾種在頁面上嵌入調查的方法。如果您不想使用嵌入，您可以將您的用戶重定向到 Typeform.com 鏈接。

如果您選擇使用任何嵌入，則需要獲取 Typeform 的嵌入代碼並將其放置在頁面的 HTML 中。

通過彈出窗口，您將 Typeform 代碼放置在何處並不重要。我們在頁面層次結構之上。

彈出窗口還包括一個 <a> 元素，它本質上是一個“啟動我”按鈕。它的功能是單擊時打開調查彈出窗口。但是，由於您希望在用戶提交註冊表單時自動打開彈出窗口，因此您需要一段代碼來為您完成此操作。

您還希望該代碼獲取提交的電子郵件（來自 id 設置為“email”的輸入元素），將其分配給一個變量，然後將其與引用代碼一起插入到 Typeform 鏈接的末尾。這些將是我們之前設置的隱藏字段

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

最後，將 <a> 元素的可見性設置為“none”以隱藏“Launch me”按鈕。

如果您使用的是 Webflow，則可以隱藏整個 HTML 嵌入。

6. 類型重定向

Typeform 允許您在完成調查後將用戶重定向到自定義 URL。可以使用調查數據和隱藏字段自定義 URL。

我們的重定向鏈接包含推薦代碼（隱藏字段）和調查中用戶的名字。

例如，如果“代碼”設置為123456並且用戶的名字是Aaro ，則重定向 URL 將是：

7.確認頁面

在我們的確認頁面上，我們希望為用戶提供簡單的選項來分享他們的個人推薦鏈接並告知他們可以獲得的獎勵。

激勵

我們激勵用戶的方式是提供 Flowrite 品牌商品和免費訪問產品。對於商品，我們建議您選擇可以放入信中的商品。我們最近意識到，在世界各地運送包裹可能會有點貴。.

如果您想深入了解如何為推薦計劃選擇獎勵和激勵措施，請查看 Referral Rock 關於該主題的指南。

自定義確認頁面

擁有來自 Typeform 的自定義重定向 URL，您可以為每個用戶自定義確認頁面。例如，Flowrite 的確認頁面使用 URL 的“名字”值來使頁面更加個性化：

為此，首先將要自定義的段落部分包裝在一個跨度中。然後，將 span 的 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 步中的推薦網址。

無論您是使用 Zapier 還是 Integromat 來自動化確認電子郵件，您都希望使用註冊表單提交作為觸發器並將其連接到您的電子郵件帳戶以根據提交的數據發送確認電子郵件 - 電子郵件地址和來自的推薦 URL步驟 3。

我們決定使用 Gmail，因為它允許我們發送外觀和感覺最個性化的電子郵件。但是，當郵件量超過 1500 封/天時，Gmail 的每日發送限制給我們帶來了一些問題。如果您的註冊量一直高於此，您可能需要考慮其他替代方案，例如 SendGrid 或 Mailchimp。

要包含動態鏈接和文本以外的任何其他內容（例如圖像），您應該在 Zapier 中選擇 HTML 選項。在 Integromat 中，默認情況下啟用 HTML。

下面是一個示例結構，可用於使用 HTML 創建確認電子郵件。使用來自表單提交的數據來自定義refererUrl。

  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