Programa de referidos virales de Flowrite: cómo multiplicamos por ocho nuestras suscripciones semanales

Publicado: 2022-03-22

Introducción

Desde nuestro primer lanzamiento en octubre, hemos recopilado suscripciones por correo electrónico en nuestra página de destino de personas entusiasmadas con nuestro producto. Después de que un usuario potencial se uniera a nuestra lista de espera al enviar su dirección de correo electrónico, haríamos un seguimiento con un correo electrónico de confirmación.

A lo largo del otoño, iteramos nuestro correo electrónico de confirmación varias veces, tratando de alentar a los que se registran a compartir sobre Flowrite con sus amigos. Probamos diferentes copias y proporcionamos enlaces para compartir en las redes sociales, lo que nos dio una cantidad decente de boca en boca. Al final, lo que faltaba era un incentivo para que la gente corriera la voz.

Algunos meses después, comenzamos a buscar soluciones de marketing de referencia listas para usar como Viral Loops, KickoffLabs y Prefinery, pero ninguna de ellas realmente nos dio la flexibilidad que buscábamos. Queríamos ser dueños de todo el proceso: registro, incorporación, referencias, correos electrónicos y recompensas. ‍

Entonces, comenzamos a construir nuestro propio sistema de referencia utilizando herramientas sin código. Poco después, lanzamos una nueva versión del flujo de registro que consiste en una encuesta de incorporación bellamente integrada y un programa de referencia, que brinda a las personas la posibilidad de ganar recompensas al invitar a sus amigos a unirse a nuestra lista de espera.

El nuevo sistema provocó un aumento inmenso en nuestros registros: un aumento de más de 8 veces en la semana 4 de 2021 en comparación con el promedio de registros semanales durante las 6 semanas anteriores. ‍

Esta es una instrucción práctica paso a paso sobre cómo implementar el mismo programa de referencia en su negocio.

¿Qué incluye el programa de referidos de Flowrite?

  • Registro de correo electrónico en flowrite.com
  • Enlace de referencia único asignado a cada usuario
  • Recompensas por # de personas referidas
  • Encuesta Typeform bellamente integrada para recopilar más información sobre cada usuario
  • Posibilidad de que el usuario recomiende a un amigo durante la encuesta
  • Hoja de cálculo interna para rastrear registros y referencias
  • Tabla de clasificación pública para que los usuarios rastreen sus referencias

¿Qué se requiere para construir un programa similar?

  • Sitio web que puede personalizar con su propio HTML y JavaScript (es decir, un sitio Webflow o simplemente un sitio web HTML puro)
  • Encuesta Typeform (opcional)
  • Hojas de cálculo de Google o Airtable
  • Gmail u otra cosa que envíe correos electrónicos
  • Plataforma de automatización (por ejemplo, Zapier o Integromat) para unir cosas

Además, tener cierto nivel de comprensión de JavaScript puede ser útil, ¡pero no es esencial de ninguna manera!

️
Antes de comenzar, le recomiendo que realice nuestro proceso de registro usted mismo para ver cómo funciona todo. Simplemente presione el botón en la barra de navegación, ingrese su correo electrónico, complete nuestra encuesta de Typeform y revise su bandeja de entrada para recibir un correo electrónico de confirmación.

1. Crear un código de referencia

A cada persona que se registra en nuestra lista de espera se le asigna un código aleatorio de 6 caracteres que consta de números y letras. Al final del proceso de registro, usamos este código en la página de confirmación para darle al usuario enlaces para compartir en las redes sociales con un solo clic.

Para crear un código de referencia, inserte el siguiente fragmento al final de su etiqueta <body> (o antes de la etiqueta </body>) en cada página donde un usuario puede registrarse. Si está utilizando Webflow o un creador de sitios web similar, puede insertar el código globalmente en cada página desde la configuración de su sitio.

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

En segundo lugar, crea otra variable o constante llamada referenceUrl, que está compuesta por la URL de tu página de inicio y el código que acabamos de generar. Insértelo debajo de la variable de código de referencia.

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

2. Almacenamiento de la URL del usuario

También desea almacenar la URL actual del usuario en una variable. Es esencial saber de qué URL proviene cada registro para contar el número de referencias por cada enlace de referencia.

  
const siteUrl = window.location.href

Su código ahora debería verse así:

  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. El formulario de registro

Crear campos de entrada ocultos

Además de un campo de entrada de correo electrónico, su formulario de registro también debe contener dos entradas ocultas a las que pronto asignaremos los valores de URL de referencia y Url de sitio de los pasos anteriores.

Para agregar los campos de entrada, inserte el siguiente código dentro de su elemento de formulario, justo al lado del campo de correo electrónico.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
Si está utilizando Webflow, puede hacerlo con un elemento HTML Embed oculto.

Llenar los campos de entrada

Sin embargo, las entradas todavía están vacías. Debe asignar las variables de los pasos 1 y 2 en sus entradas para que se incluyan en el envío.

  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;
Si está utilizando, por ejemplo, los símbolos de Webflow y tiene varias instancias del mismo formulario de registro en una sola página de su sitio web, debe asegurarse de que las variables se asignen a las entradas correctas. Consulte nuestra nota de Notion para obtener instrucciones al respecto.

probandolo

Ahora, cuando un usuario se registra en el sitio web, tanto la URL de referencia como la URL del sitio deben estar ocultas en el envío. Si está utilizando Webflow, puede verificar esto desde el correo electrónico de confirmación.

4. Personalizando tu encuesta de Typeform

Como parte del sistema de registro y referencia, usamos Typeform para obtener más información sobre cada usuario. No es necesario completar la encuesta de Typeform para unirse a la lista de espera porque ya recopilamos las direcciones de correo electrónico durante el registro inicial. El porcentaje de usuarios que proceden a completar la encuesta es actualmente de aproximadamente el 75%.

En la práctica, queremos entregar el código de referencia (paso 1) y el correo electrónico del usuario en Typeform y "llevarlos" a lo largo del envío. Hacemos esto para:

  1. Utilice el código de referencia para compartir enlaces en su página de confirmación (paso 7)
  2. Haga coincidir las inscripciones iniciales en la lista de espera con las respuestas de Typeform correspondientes. Al traer el correo electrónico del formulario de registro a Typeform, no necesitamos pedirle al usuario que lo envíe dos veces.

Campos ocultos

Para que esto suceda, debe utilizar la función Campos ocultos de Typeform. Puede encontrar la configuración en Lógica → Avanzado.

Debe establecer dos campos ocultos: @email y @code. Una vez hecho esto, puede insertar esos valores al final de su enlace de Typeform y enviarlos junto con las otras respuestas de su Typeform:

5. Integrando el Typeform a tu sitio

Typeform te ofrece varias alternativas sobre cómo incrustar una encuesta en tu página. Si no desea utilizar una inserción, puede redirigir a sus usuarios al enlace de Typeform.com.

Usamos la alternativa "Ventana emergente" con el Tamaño de ventana emergente establecido como "Grande"


Si elige ir con cualquiera de las incrustaciones, debe tomar el código de incrustación de Typeform y colocarlo en el HTML de su página.

Con una ventana emergente, realmente no importa dónde coloque el código de Typeform. Tenemos el nuestro en la parte superior de la jerarquía de páginas.

La ventana emergente también incluye un elemento <a>, que es esencialmente un botón "Ejecutarme". Su función es abrir la ventana emergente de la encuesta cuando se hace clic. Sin embargo, dado que desea que la ventana emergente se abra automáticamente cuando un usuario envía el formulario de registro, necesita un código que lo haga por usted.

También desea que ese código tome el correo electrónico que se envió (desde un elemento de entrada con una identificación establecida en "correo electrónico"), lo asigne a una variable e insértelo al final de su enlace Typeform junto con el código de referencia. Estos serán los campos ocultos que configuramos anteriormente

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

Por último, establezca la visibilidad del elemento <a> en "ninguno" para ocultar el botón "Ejecutarme".

Si está utilizando Webflow, puede ocultar todo el HTML incrustado.

6. Redirección tipográfica

Typeform le permite redirigir a los usuarios a URL personalizadas después de completar la encuesta. Las URL se pueden personalizar tanto con los datos de la encuesta como con los campos ocultos.

Nuestros enlaces de redirección contienen tanto el código de referencia (un campo oculto) como el nombre de pila del usuario de la encuesta.

Por ejemplo, si el "código" se configuró en 123456 y el nombre del usuario era Aaro , la URL de redireccionamiento sería:

7. Página de confirmación

En nuestra página de confirmación, queríamos brindarles a los usuarios opciones simples para compartir su enlace de referencia personal e informarles sobre las recompensas que pueden ganar.

Incentivación

Nuestra forma de incentivar a los usuarios es ofrecer productos de la marca Flowrite y acceso gratuito al producto. Con merchandising, te recomendamos que elijas artículos que puedas incluir en una carta. Recientemente nos dimos cuenta de que enviar paquetes a todo el mundo puede ser un poco costoso.

Si desea profundizar en cómo elegir recompensas e incentivos para los programas de recomendación, consulte la guía de Referral Rock sobre el tema.

Personalización de la página de confirmación

Tener esa URL de redireccionamiento personalizada de Typeform le permite personalizar su página de confirmación para cada usuario. Por ejemplo, la página de confirmación de Flowrite usa el valor "nombre" de la URL para hacer que la página sea un poco más personal:


Para hacer lo mismo, comience por envolver la parte del párrafo que desea personalizar en un lapso. Luego, establezca la identificación del intervalo en "firstname".

Por último, inserte el siguiente fragmento al final de la etiqueta <body> de su página de confirmación.

  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;

Además del primer nombre, también puede usar el valor de "código" de la URL para personalizar los enlaces compartidos para las redes sociales. Para crear un enlace de Twitter, primero establezca la identificación de su botón de compartir de Twitter en "tweet".

Luego, inserte el siguiente código al final de la etiqueta <body> de su página de confirmación.

  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);
Usa tu creatividad para personalizar los textos y enlaces en tu página de confirmación como quieras. También puede comparar el nuestro.

8. Correo electrónico de confirmación

Después del registro inicial en nuestro sitio web, enviamos un correo electrónico de confirmación a la dirección de correo electrónico que se envió. Naturalmente, queremos usar la URL de referencia del paso 3 en cada enlace para compartir de ese correo electrónico.

Independientemente de si está utilizando Zapier o Integromat para automatizar el correo electrónico de confirmación, desea utilizar el envío del formulario de registro como activador y conectarlo a su cuenta de correo electrónico para enviar el correo electrónico de confirmación en función de los datos enviados: dirección de correo electrónico y URL de referencia de paso 3.

Decidimos usar Gmail porque nos permitía enviar correos electrónicos que se veían y se sentían más personales. Sin embargo, los límites de envío diarios de Gmail nos han causado algunos problemas cuando el volumen ha superado los 1500 correos electrónicos/día. Si su volumen de registro es constantemente más alto que eso, es posible que desee considerar otras alternativas como SendGrid o Mailchimp.

Para incluir enlaces dinámicos y cualquier otro contenido además de texto (por ejemplo, imágenes), debe elegir la opción HTML en Zapier. En Integromat, HTML está habilitado de forma predeterminada.

A continuación se muestra una estructura de ejemplo que puede usar para crear su correo electrónico de confirmación usando HTML. Utilice los datos del envío del formulario para personalizar la URL de referencia.

  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. Sistema de seguimiento

Seguimiento interno

Finalmente, debe entregar los datos de registro de su sitio web y los envíos de Typeform a un solo destino donde puede rastrear el número de registros, los envíos de Typeform correspondientes y las referencias. Estamos usando Hojas de cálculo de Google, pero siéntete libre de usar Airtable o cualquier otra cosa con la que te sientas cómodo.

Para que los datos fluyan a su Hoja en tiempo real, debe conectarlo con su sitio web y Typeform usando Zapier/Integromat/etc. Necesitas dos disparadores:

  1. Registro en la lista de espera → Enviar correo electrónico y crear una nueva fila de hoja de cálculo (esta es la que discutimos en el paso anterior)
  2. Envío de Typeform → Crear una nueva fila de hoja de cálculo
Tanto Zapier como Integromat tienen instrucciones completas sobre cómo hacer que estas integraciones sucedan.

Para el sistema de seguimiento, hemos creado una plantilla simple que puede duplicar y usar como base para su propio sistema de seguimiento:

Además de las cuatro hojas de trabajo incluidas en la plantilla, también hemos creado varias otras tablas, como el seguimiento automatizado de recompensas y la tubería de correo electrónico, la hoja de cancelación de suscripciones, el mapeo de embudos y más. Pero eso te lo dejamos a ti.

Externo

Para ayudar a los usuarios a rastrear el número de referencias con su enlace único, hemos creado una tabla de clasificación pública, también con Hojas de cálculo de Google.

+ 10. Referencias adicionales con Typeform

Una de las formas de aumentar su tasa de referencia es pedirles a sus usuarios que ingresen la dirección de correo electrónico de su amigo o colega. Esta podría ser una de las preguntas en su encuesta de Typeform o un formulario en su página de confirmación.

Hemos incluido la pregunta de referencia al final de nuestra encuesta de Typeform.


Así es como se ve en Zapier:

La operación de filtro antes de enviar el correo electrónico es importante. Quiere asegurarse de que:

  1. El valor es en realidad un correo electrónico (Typeform no es perfecto para identificar esto)
  2. El valor no está vacío.
  3. El remitente no se refiere a sí mismo

Por último, incluimos la referencia en el campo cc del correo electrónico de referencia para que la experiencia sea más personal.

Eso es todo

Su programa de referencia ya está listo para su lanzamiento. ¡Felicitaciones!

En caso de que tenga algún problema en el camino, no dude en enviarme un correo electrónico o, mejor aún, comentar en Twitter/LinkedIn para que todos puedan notarlo.

También me encantaría saber si termina usando este sistema, así que envíeme un mensaje si lo hizo y comparta la publicación con alguien más que pueda beneficiarse de ella ️