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 并在整个提交过程中“携带”它们。 我们这样做是为了:

  1. 在您的确认页面上的共享链接中使用推荐代码(第 7 步)
  2. 将初始候补名单注册与相应的 Typeform 答案相匹配。 通过将电子邮件从注册表单带到 Typeform,我们不需要要求用户提交两次。

隐藏字段

为此,您需要使用 Typeform 的隐藏字段功能。 您可以在 Logic → Advanced 下找到设置。

您需要设置两个隐藏字段:@email 和@code。 完成后,您可以在 Typeform 链接的末尾插入这些值,并将它们与 Typeform 的其他答案一起提交:

5. 将 Typeform 集成到您的站点

Typeform 为您提供了几种在页面上嵌入调查的方法。 如果您不想使用嵌入,您可以将您的用户重定向到 Typeform.com 链接。

我们使用“Popup”替代方案,Popup 大小设置为“Large”


如果您选择使用任何嵌入,则需要获取 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

9. 跟踪系统

内部跟踪

最后,您需要将注册数据从您的网站和 Typeform 提交传送到一个目的地,您可以在其中跟踪注册数、相应的 Typeform 提交和推荐。 我们正在使用 Google 表格,但您可以随意使用 Airtable 或其他您觉得舒服的东西。

为了让数据实时流向您的工作表,您需要使用 Zapier/Integromat/等将其与您的网站和 Typeform 连接起来。 您需要两个触发器:

  1. 候补名单注册发送电子邮件创建一个新的电子表格行(这是我们在上一步中讨论的)
  2. Typeform提交创建一个新的电子表格行
Zapier 和 Integromat 都有关于如何进行这些集成的全面说明。

对于跟踪系统,我们创建了一个简单的模板,您可以复制该模板并将其用作您自己的跟踪系统的基础:

除了模板中包含的四个工作表之外,我们还构建了各种其他表格,例如自动奖励跟踪和电子邮件管道、取消订阅表、漏斗映射等。 但我们将把它留给你

外部的

为了帮助用户通过他们的独特链接跟踪推荐人的数量,我们创建了一个公共排行榜 - 也与 Google 表格一起使用。

+ 10. 额外的 Typeform 推荐

提高推荐率的方法之一是要求用户输入他们朋友或同事的电子邮件地址。 这可能是您的 Typeform 调查中的问题之一,也可能是您确认页面上的表格。

我们在 Typeform 调查的末尾包含了推荐问题。


这是 Zapier 上的样子:

发送邮件前的过滤操作很重要。 您要确保:

  1. 该值实际上是一封电子邮件(Typeform 无法完美识别)
  2. 值不为空
  3. 推荐人不推荐自己

最后,我们在推荐电子邮件的 cc 字段中包含推荐人,以使体验更加个性化

而已

您的推荐计划现已准备好启动。 恭喜!

如果您在此过程中遇到任何问题,请随时给我发送电子邮件——或者更好的是,在 Twitter/LinkedIn 上发表评论,以便每个人都能注意到。

我也很想知道你是否最终使用了这个系统,所以如果你这样做了,请联系我,并与可能从中受益的其他人分享帖子️