Вирусная реферальная программа Flowrite — как мы в 8 раз увеличили число наших еженедельных регистраций

Опубликовано: 2022-03-22

Введение

С момента нашего первого запуска в октябре мы собираем подписки по электронной почте на нашей целевой странице от людей, которым нравится наш продукт. После того, как потенциальный пользователь присоединился к нашему списку ожидания, отправив свой адрес электронной почты, мы отправим электронное письмо с подтверждением.

В течение осени мы неоднократно повторяли наше электронное письмо с подтверждением, пытаясь побудить тех, кто подписался, рассказать о Flowrite своим друзьям. Мы протестировали разные копии и предоставили ссылки на социальные сети, что принесло нам приличное количество слухов. В конце концов, чего не хватало, так это стимула для людей распространять информацию.

Несколько месяцев спустя мы начали искать готовые решения для реферального маркетинга, такие как Viral Loops, KickoffLabs и Prefinery, но ни одно из них не давало нам той гибкости, которую мы искали. Мы хотели владеть всем процессом — регистрацией, адаптацией, рефералами, электронными письмами и вознаграждениями. ‍

Итак, мы начали создавать собственную реферальную систему, используя инструменты без кода. Вскоре после этого мы запустили новую версию процесса регистрации, состоящую из прекрасно интегрированного вступительного опроса и реферальной программы, что дает людям возможность зарабатывать вознаграждения, приглашая своих друзей присоединиться к нашему списку ожидания.

Новая система вызвала огромный всплеск наших регистраций — более чем в 8 раз на 4-й неделе 2021 года по сравнению со средним еженедельным числом регистраций в течение предыдущих 6 недель. ‍

Это практическая пошаговая инструкция, как внедрить такую ​​же реферальную программу в свой бизнес.

Что включает в себя реферальная программа Flowrite?

  • Регистрация по электронной почте на сайте Flowrite.com
  • Уникальная реферальная ссылка, присваиваемая каждому пользователю
  • Вознаграждение за количество привлеченных людей
  • Красиво интегрированный опрос Typeform для сбора дополнительной информации о каждом пользователе.
  • Возможность для пользователя порекомендовать друга во время опроса
  • Внутренняя таблица для отслеживания регистраций и рефералов
  • Публичная таблица лидеров, чтобы пользователи могли отслеживать своих рефералов

Что требуется для создания подобной программы?

  • Веб-сайт, который вы можете настроить с помощью собственного HTML и JavaScript (например, сайт Webflow или просто веб-сайт на чистом HTML)
  • Обзор типовых форм (необязательно)
  • Google Таблицы или Airtable
  • Gmail или что-то еще, что отправляет электронные письма
  • Платформа автоматизации (например, Zapier или Integromat) для склеивания вещей

Кроме того, некоторый уровень понимания JavaScript может оказаться полезным, но ни в коем случае не обязательным!

️
Прежде чем приступить к делу, я бы порекомендовал пройти процесс регистрации самостоятельно, чтобы увидеть, как все работает. Просто нажмите кнопку на панели навигации, введите свой адрес электронной почты, пройдите опрос Typeform и проверьте свой почтовый ящик, чтобы получить электронное письмо с подтверждением.

1. Создание реферального кода

Каждому человеку, зарегистрировавшемуся в нашем списке ожидания, присваивается случайный 6-значный код, состоящий из цифр и букв. В конце процесса регистрации мы используем этот код на странице подтверждения, чтобы предоставить пользователю ссылку для обмена одним щелчком мыши в социальных сетях.

Чтобы создать реферальный код, вставьте следующий фрагмент в конец тега <body> (или перед тегом </body>) на каждой странице, на которой пользователь может зарегистрироваться. Если вы используете Webflow или аналогичный конструктор веб-сайтов, вы можете глобально вставить код на каждую страницу из настроек своего сайта.

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

Во-вторых, создайте еще одну переменную или константу с именем referralUrl, которая состоит из URL-адреса вашей домашней страницы и кода, который мы только что сгенерировали. Вставьте его под переменной 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. Вы можете найти настройки в разделе «Логика» → «Дополнительно».

Вам нужно установить два скрытых поля: @email и @code. Как только это будет сделано, вы сможете вставить эти значения в конец вашей ссылки Typeform и отправить их вместе с другими ответами вашей Typeform:

5. Интеграция Typeform на ваш сайт

Typeform предлагает несколько вариантов размещения опроса на вашей странице. Если вы не хотите использовать вставку, вы можете просто перенаправить своих пользователей на ссылку Typeform.com.

Мы используем альтернативу «Всплывающее окно» с размером всплывающего окна, установленным как «Большой».


Если вы решите использовать любой из способов встраивания, вам нужно взять код встраивания Typeform и поместить его в HTML-код вашей страницы.

При использовании всплывающего окна не имеет значения, где вы размещаете код Typeform. У нас есть наш на вершине иерархии страниц.

Всплывающее окно также содержит элемент <a>, который по сути представляет собой кнопку «Запустить меня». Его функция заключается в открытии всплывающего окна опроса при нажатии. Однако, поскольку вы хотите, чтобы всплывающее окно автоматически открывалось, когда пользователь отправляет форму регистрации, вам нужен фрагмент кода, который сделает это за вас.

Вы также хотите, чтобы этот код брал отправленное электронное письмо (из элемента ввода с идентификатором, установленным на «email»), назначал его переменной и вставлял в конец вашей ссылки Typeform вместе с referralCode. Это будут скрытые поля, которые мы создали ранее.

  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> на «нет», чтобы скрыть кнопку «Запустить меня».

Если вы используете Webflow, вы можете просто скрыть весь HTML Embed.

6. Перенаправление формы

Typeform позволяет перенаправлять пользователей на пользовательские URL-адреса после прохождения опроса. URL-адреса можно настроить как с данными опроса, так и со скрытыми полями.

Наши ссылки перенаправления содержат как реферальный код (скрытое поле), так и имя пользователя из опроса.

Например, если для «кода» установлено значение 123456 , а имя пользователя — Ааро , URL-адрес перенаправления будет таким:

7. Страница подтверждения

На нашей странице подтверждения мы хотели предоставить пользователям простые возможности поделиться своей личной реферальной ссылкой и сообщить им о вознаграждениях, которые они могут заработать.

Стимулирование

Наш способ поощрения пользователей заключается в том, чтобы предлагать товары под брендом Flowrite и бесплатный доступ к продукту. Что касается товаров, мы рекомендуем выбирать предметы, которые вы можете поместить в письмо. Недавно мы поняли, что доставка посылок по всему миру может быть немного дороже.

Если вы хотите глубже узнать, как выбирать вознаграждения и поощрения для реферальных программ, ознакомьтесь с руководством Referral Rock по этой теме.

Настройка страницы подтверждения

Наличие этого пользовательского URL-адреса перенаправления от Typeform позволяет вам настроить страницу подтверждения для каждого пользователя. Например, страница подтверждения Flowrite использует значение «имя» URL-адреса, чтобы сделать страницу немного более личной:


Чтобы сделать то же самое, начните с переноса части абзаца, которую вы хотите настроить, в диапазон. Затем установите идентификатор диапазона на «имя».

Наконец, вставьте следующий фрагмент в конец тега <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-адреса, чтобы настроить ссылки для обмена в социальных сетях. Чтобы создать ссылку в Твиттере, сначала установите идентификатор кнопки «Поделиться в Твиттере» на «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. Электронное письмо с подтверждением

После первоначальной регистрации на нашем веб-сайте мы отправляем электронное письмо с подтверждением на указанный адрес электронной почты. Естественно, мы хотим использовать referralUrl из шага 3 в каждой ссылке для обмена этим письмом.

Независимо от того, используете ли вы Zapier или Integromat для автоматизации электронного письма с подтверждением, вы хотите использовать отправку формы регистрации в качестве триггера и подключить его к своей учетной записи электронной почты, чтобы отправить электронное письмо с подтверждением на основе отправленных данных — адрес электронной почты и реферальный URL-адрес от шаг 3.

Мы решили использовать Gmail, так как он позволял нам отправлять электронные письма, которые выглядят и воспринимаются как наиболее личные. Однако дневные лимиты отправки Gmail вызвали у нас некоторые проблемы, когда объем превысил 1500 писем в день. Если количество ваших регистраций постоянно выше, вы можете рассмотреть другие альтернативы, такие как SendGrid или Mailchimp.

Чтобы включить динамические ссылки и любой другой контент, помимо текста (например, изображения), вы должны выбрать опцию HTML в Zapier. В Integromat HTML включен по умолчанию.

Ниже приведен пример структуры, которую вы можете использовать для создания электронного письма с подтверждением с помощью HTML. Используйте данные из отправки формы, чтобы настроить 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. Система слежения

Внутреннее отслеживание

Наконец, вам нужно доставить данные регистрации с вашего веб-сайта и отправки Typeform в один пункт назначения, где вы можете отслеживать количество регистраций, соответствующие отправки Typeform и рефералов. Мы используем Google Таблицы, но не стесняйтесь использовать Airtable или что-то еще, что вам удобно.

Чтобы данные поступали на ваш лист в режиме реального времени, вам необходимо подключить его к вашему веб-сайту и Typeform с помощью Zapier/Integromat/и т. д. Вам нужны два триггера:

  1. Регистрация в списке ожидания → Отправить электронное письмо и создать новую строку электронной таблицы (это та, которую мы обсуждали на предыдущем шаге)
  2. Отправка формы → Создать новую строку электронной таблицы
И Zapier, и Integromat имеют исчерпывающие инструкции о том, как осуществить эти интеграции.

Для системы отслеживания мы создали простой шаблон, который вы можете продублировать и использовать в качестве основы для своей собственной системы отслеживания:

В дополнение к четырем рабочим листам, включенным в шаблон, мы также создали различные другие таблицы, такие как автоматическое отслеживание вознаграждений и конвейер электронной почты, лист отписок, отображение воронки и многое другое. Но мы оставим это на ваше усмотрение

Внешний

Чтобы помочь пользователям отслеживать количество рефералов по их уникальной ссылке, мы создали общедоступную таблицу лидеров — также с помощью Google Sheets.

+ 10. Дополнительные рефералы с Typeform

Один из способов увеличить количество рефералов — попросить пользователей ввести адрес электронной почты своего друга или коллеги. Это может быть один из вопросов в опросе Typeform или форма на странице подтверждения.

Мы включили реферальный вопрос в конец нашего опроса Typeform.


Вот как это выглядит на Zapier:

Работа фильтра перед отправкой электронной почты важна. Вы хотите убедиться, что:

  1. Значение на самом деле является адресом электронной почты (Typeform не идеален для его идентификации)
  2. Значение не пустое
  3. Реферер не ссылается сам на себя

Наконец, мы включаем реферера в поле «Копия» реферального электронного письма, чтобы сделать опыт более личным.

Вот и все

Ваша реферальная программа готова к запуску. Поздравляю!

Если вы столкнулись с какими-либо проблемами по пути, не стесняйтесь, присылайте мне электронное письмо или, что еще лучше, оставляйте комментарии в Twitter / LinkedIn, чтобы все могли это заметить.

Я также хотел бы знать, используете ли вы эту систему в конечном итоге, поэтому, пожалуйста, отправьте мне сообщение, если вы это сделали, и поделитесь публикацией с кем-то еще, кому это может быть полезно ️