Получите больше регистраций в своем следующем проекте с помощью реферальной программы

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

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

«[Социальное доказательство] описывает психологический и социальный феномен, при котором люди копируют действия других в попытке предпринять действия в данной ситуации».

Работая над своим последним продуктом Shelf (проверьте это!), Я реализовал специальную реферальную программу и хотел рассказать, как я это сделал.

План

В этом проекте я собираюсь использовать сервер Node.js / Expressjs и базу данных MySQL. Вы можете использовать любую комбинацию веб-сервер + база данных, поскольку будут применяться те же принципы.

Сервер Node должен будет сделать следующее:

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

… А в базе данных должен содержаться список всех, кто зарегистрировался, со следующей информацией:

  • Адрес электронной почты
  • Реферальный код (их уникальный код)
  • Реферер (код, с помощью которого они регистрировались, если есть)
  • Время добавлено

MySQL

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

Я создал свою таблицу со следующей схемой:

CREATE TABLE `users` (
 `id` INT(11) NOT NULL AUTO_INCREMENT,
 `email` VARCHAR(255) NOT NULL,
 `referral_code` VARCHAR(255) NOT NULL,
 `referrer` VARCHAR(255),
 `time_added` TIMESTAMP NOT NULL DEFAULT 'CURRENT_TIMESTAMP',
 PRIMARY KEY (`id`)
);

Где бы вы ни настраивали свою базу данных, обязательно отслеживайте ее учетные данные, чтобы мы могли получить к ней доступ через приложение Node.js позже. Тебе понадобится:

  • Имя базы данных
  • Хост базы данных
  • Пользователь базы данных
  • Пароль базы данных

Node.js + Expressjs

Сначала я создам простой проект Express под названием referral-program, используя механизм просмотра EJS с express-generator.

express --view=ejs referral-program
create : referral-program/
create : referral-program/public/
create : referral-program/public/javascripts/
create : referral-program/public/images/
create : referral-program/public/stylesheets/
create : referral-program/public/stylesheets/style.css
create : referral-program/routes/
create : referral-program/routes/index.js
create : referral-program/routes/users.js
create : referral-program/views/
create : referral-program/views/error.ejs
create : referral-program/views/index.ejs
create : referral-program/app.js
create : referral-program/package.json
create : referral-program/bin/
create : referral-program/bin/www
change directory:
$ cd referral-program
install dependencies:
$ npm install
run the app:
$ DEBUG=referral-program:* npm start

В соответствии с инструкциями, мы можем запустить этот проект с помощью следующих команд:

cd referral-program
npm install
npm start

После запуска убедитесь, что все работает, посетив localhost:3000. Вы должны увидеть страницу с надписью «Добро пожаловать в Express».

Пользовательский интерфейс

В файле index.ejs нам нужен код для отображения полей ввода электронной почты и реферального кода, а также кнопки отправки с небольшим количеством Javascript (в данном случае jQuery) для отправки данных на наш сервер.

JQuery в теге script здесь отправит запрос AJAX POST на маршрут / с данными из электронной почты и полями ввода реферального кода. Вы можете проверить это, отправив письмо прямо сейчас; вы должны получить ошибку 404 Not Found, поскольку мы еще не реализовали обработчик POST для этого маршрута. Однако, когда этот маршрут будет реализован, вы увидите, что в случае успеха он предупредит пользователя об уникальной реферальной ссылке.

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

Зависимости

Давайте начнем работать над серверной частью с установки нескольких зависимостей из npm.

Нам понадобится:

  • mysql для взаимодействия с нашей базой данных MySQL
  • dotenv для доступа к переменным среды из файла .env
  • shortid для создания коротких, удобных для URL реферальных кодов

Используйте следующие команды для их установки:

npm i mysql
npm i dotenv
npm i shortid

app.js

Нам нужно внести одну небольшую поправку в app.js файл для нашего проекта. В самом верху файла, прежде всего, добавьте следующую строку:

require('dotenv').config();

Это позволит нам использовать process.env.VARIABLE_NAME для доступа к переменным среды позже.

Создание переменных среды

Создайте файл с именем .env в корне вашего проекта и поместите в него учетные данные базы данных MySQL. Ваш файл должен выглядеть примерно так:

DB_USER=your_database_username
DB_PASS=your_database_password
DB_NAME=your_database_name
DB_HOST=your_database_host

Маршрут «ПОЧТА /»

Мы сказали нашей форме отправлять все записи в виде запросов POST на маршрут /, поэтому давайте определим, что там сейчас происходит. Этот маршрут должен:

  1. Прочтите предоставленные пользователем данные: адрес электронной почты и реферер
  2. Создайте уникальный реферальный код, которым пользователь может поделиться
  3. Поместите материалы в базу данных
  4. Верните реферальный код клиенту

Поздравляю! 🥳

Вы успешно реализовали реферальную программу в своем приложении!

Чтобы проверить это, перезапустите свой сервер Node (ctrl+c, чтобы остановить его, и npm start, чтобы снова запустить) и еще раз посетите localhost:3000. Отправьте свой адрес электронной почты, и вы должны увидеть всплывающее окно с вашей уникальной реферальной ссылкой. Затем, если вы сделаете еще одну заявку, используя этот реферальный код, вы увидите, что он записан в базе данных.

Если у вас возникнут какие-либо проблемы, вы можете проверить полный код в моем репозитории на GitHub: https://github.com/adboio/nodejs-referral-program

Дальнейшие мысли

Представленные здесь идеи являются основой простой реферальной системы, но где вы ее возьмете, зависит от вас! Для вдохновения вот как я использую реферальную программу в моем последнем продукте Shelf:

  • Я представляю реферальные коды как реферальные ссылки, например https://shelf.news/?ref=ea8d222. Когда пользователь посещает сайт по одной из этих ссылок, реферальный код автоматически отправляется вместе с запросом POST для отслеживания. Таким образом, им никогда не придется набирать реферальный код.
  • Пользователи, которые направляют в приложение больше людей, перемещаются вверх в списке ожидания. Это работает путем подсчета количества рефералов у каждого пользователя и их сортировки.

Ответьте и дайте мне знать, как вы планируете использовать реферальную программу в своем следующем проекте!