برنامج الإحالة الفيروسي من Flowrite - كيف نجحنا في تسجيل الاشتراكات الأسبوعية بمعدل 8 أضعاف

نشرت: 2022-03-22

مقدمة

منذ إطلاقنا لأول مرة في أكتوبر ، قمنا بجمع الاشتراكات عبر البريد الإلكتروني على صفحتنا المقصودة من أشخاص متحمسين لمنتجنا. بعد انضمام مستخدم محتمل إلى قائمة الانتظار الخاصة بنا عن طريق إرسال عنوان بريده الإلكتروني ، سنقوم بالمتابعة برسالة تأكيد عبر البريد الإلكتروني.

طوال الخريف ، كررنا رسالة التأكيد الإلكترونية عدة مرات - في محاولة لتشجيع أولئك الذين قاموا بالتسجيل لمشاركة معلومات Flowrite مع أصدقائهم. اختبرنا نسخًا مختلفة وقدمنا ​​روابط مشاركة لوسائل التواصل الاجتماعي ، مما أتاح لنا قدرًا معقولًا من الكلام الشفهي. في النهاية ، ما كان مفقودًا كان حافزًا للناس لنشر الكلمة.

بعد بضعة أشهر ، بدأنا في البحث عن حلول تسويق الإحالة الجاهزة مثل Viral Loops و KickoffLabs و Prefinery ، لكن لم يمنحنا أي منها حقًا المرونة التي كنا نبحث عنها. أردنا أن نمتلك العملية بأكملها - الاشتراك والإعداد والإحالات ورسائل البريد الإلكتروني والمكافآت. ‍

لذلك ، بدأنا في بناء نظام الإحالة الخاص بنا باستخدام أدوات عدم وجود رمز. بعد فترة وجيزة ، أطلقنا إصدارًا جديدًا من تدفق الاشتراك يتكون من استبيان مدمج بشكل جميل وبرنامج إحالة - مما يمنح الأشخاص إمكانية ربح مكافآت من خلال دعوة أصدقائهم للانضمام إلى قائمة الانتظار الخاصة بنا.

أحدث النظام الجديد ارتفاعًا هائلاً في عمليات الاشتراك لدينا - زيادة أكثر من 8 أضعاف في الأسبوع 4 من 2021 مقارنةً بمتوسط ​​الاشتراكات الأسبوعية خلال الأسابيع الستة السابقة. ‍

هذه تعليمات عملية خطوة بخطوة حول كيفية تنفيذ نفس برنامج الإحالة في عملك

ماذا يشمل برنامج الإحالة Flowrite؟

  • الاشتراك في البريد الإلكتروني على flowrite.com
  • رابط إحالة فريد مخصص لكل مستخدم
  • تم إحالة المكافآت لعدد # من الأشخاص
  • مسح Typeform متكامل بشكل جميل لجمع مزيد من المعلومات حول كل مستخدم
  • إمكانية قيام المستخدم بإحالة صديق أثناء الاستبيان
  • جدول بيانات داخلي لتتبع عمليات الاشتراك والإحالات
  • لوحة الصدارة العامة للمستخدمين لتتبع إحالاتهم

ما المطلوب لبناء برنامج مشابه؟

  • موقع ويب يمكنك تخصيصه باستخدام HTML و JavaScript الخاصين بك (مثل موقع Webflow أو موقع ويب HTML خالص)
  • مسح Typeform (اختياري)
  • أوراق Google أو Airtable
  • Gmail أو أي شيء آخر يرسل رسائل البريد الإلكتروني
  • منصة الأتمتة (مثل Zapier أو Integromat) لربط الأشياء ببعضها البعض

أيضًا ، قد يكون الحصول على مستوى معين من فهم JavaScript أمرًا مفيدًا ولكنه ليس ضروريًا بأي حال من الأحوال!

️
قبل الدخول فيه ، أوصي بإجراء عملية الاشتراك بنفسك لترى كيف يعمل كل شيء. فقط اضغط على الزر في شريط التنقل ، وأدخل بريدك الإلكتروني ، واذهب إلى استطلاع Typeform الخاص بنا وتحقق من صندوق الوارد الخاص بك للحصول على رسالة تأكيد عبر البريد الإلكتروني.

1. إنشاء رمز إحالة

يتم تعيين رمز عشوائي مكون من 6 أحرف يتكون من أرقام وحروف لكل شخص يقوم بالتسجيل في قائمة الانتظار الخاصة بنا. في نهاية عملية التسجيل ، نستخدم هذا الرمز في صفحة التأكيد لمنح المستخدم روابط مشاركة لوسائل التواصل الاجتماعي بنقرة واحدة.

لإنشاء رمز إحالة ، أدخل المقتطف التالي في نهاية علامة <body> (أو قبل علامة </body>) في كل صفحة يمكن للمستخدم الاشتراك فيها. إذا كنت تستخدم Webflow أو منشئ مواقع ويب مشابه ، فيمكنك إدراج الرمز عالميًا في كل صفحة من إعدادات موقعك.

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

ثانيًا ، قم بإنشاء متغير أو ثابت آخر يسمى الإحالة ، والذي يتكون من عنوان URL لصفحتك الرئيسية والرمز الذي أنشأناه للتو. أدخله أسفل متغير رمز الإحالة.

  
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. استمارة التسجيل

إنشاء حقول الإدخال المخفية

بالإضافة إلى حقل إدخال البريد الإلكتروني ، يجب أن يحتوي نموذج الاشتراك الخاص بك أيضًا على مدخلين مخفيين سنقوم قريبًا بتعيين قيم الإحالة و 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٪ تقريبًا.

من الناحية العملية ، نريد تسليم رمز الإحالة (الخطوة 1) والبريد الإلكتروني للمستخدم إلى Typeform و "حملها" طوال عملية الإرسال. نقوم بذلك من أجل:

  1. استخدم رمز الإحالة في مشاركة الروابط على صفحة التأكيد الخاصة بك (الخطوة 7)
  2. قم بمطابقة عمليات الاشتراك الأولية في قائمة الانتظار مع إجابات النموذج المقابل. من خلال إحضار البريد الإلكتروني من نموذج الاشتراك إلى Typeform ، لا نحتاج إلى مطالبة المستخدم بإرساله مرتين.

الحقول المخفية

لتحقيق ذلك ، تحتاج إلى استخدام ميزة الحقول المخفية في Typeform. يمكنك العثور على الإعدادات ضمن Logic → Advanced.

تحتاج إلى تعيين حقلين مخفيين:email وcode. بمجرد الانتهاء من ذلك ، يمكنك إدراج هذه القيم في نهاية رابط Typeform الخاص بك وإرسالها مع الإجابات الأخرى الخاصة بـ Typeform:

5. دمج Typeform في موقعك

يمنحك Typeform عدة بدائل حول كيفية تضمين استطلاع على صفحتك. إذا كنت لا تريد استخدام التضمين ، يمكنك فقط إعادة توجيه المستخدمين إلى رابط Typeform.com.

نستخدم البديل "Popup" مع تعيين الحجم المنبثق على "كبير"


إذا اخترت استخدام أي من التضمينات ، فستحتاج إلى الحصول على كود التضمين الخاص بـ Typeform ووضعه في HTML لصفحتك.

مع نافذة منبثقة ، لا يهم حقًا مكان وضع رمز Typeform. لدينا موقعنا على قمة التسلسل الهرمي للصفحة.

تتضمن النافذة المنبثقة أيضًا <a> عنصرًا ، وهو في الأساس زر "Launch me". وتتمثل مهمتها في فتح نافذة الاستطلاع المنبثقة عند النقر عليها. ومع ذلك ، نظرًا لأنك تريد فتح النافذة المنبثقة تلقائيًا عندما يرسل المستخدم نموذج التسجيل ، فأنت بحاجة إلى جزء من التعليمات البرمجية التي تقوم بذلك نيابة عنك.

تريد أيضًا أن يأخذ هذا الرمز البريد الإلكتروني الذي تم إرساله (من عنصر إدخال مع تعيين معرف إلى "بريد إلكتروني") ، وقم بتعيينه إلى متغير ، وإدخاله في نهاية رابط 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> على "لا شيء" لإخفاء زر "Launch me".

إذا كنت تستخدم Webflow ، فيمكنك فقط إخفاء تضمين HTML بالكامل.

6. إعادة توجيه Typeform

يتيح لك Typeform إعادة توجيه المستخدمين إلى عناوين URL المخصصة بعد إكمال الاستبيان. يمكن تخصيص عناوين URL مع بيانات المسح وكذلك الحقول المخفية.

تحتوي روابط إعادة التوجيه الخاصة بنا على رمز الإحالة (حقل مخفي) والاسم الأول للمستخدم من الاستطلاع.

على سبيل المثال ، إذا تم تعيين "الرمز" على 123456 وكان الاسم الأول للمستخدم هو Aaro ، فسيكون عنوان 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 لتخصيص روابط المشاركة لوسائل التواصل الاجتماعي. لإنشاء رابط Twitter ، قم أولاً بتعيين معرف زر مشاركة Twitter على "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 لأنه سمح لنا بإرسال رسائل بريد إلكتروني تبدو أكثر شخصية. ومع ذلك ، تسببت حدود الإرسال اليومية لـ Gmail في بعض المشاكل عندما تجاوز الحجم 1500 رسالة بريد إلكتروني في اليوم. إذا كان حجم التسجيل الخاص بك أعلى من ذلك باستمرار ، فقد ترغب في التفكير في بدائل أخرى مثل SendGrid أو Mailchimp.

لتضمين الروابط الديناميكية وأي محتوى آخر إلى جانب النص (مثل الصور) ، يجب عليك اختيار خيار HTML في Zapier. في Integromat ، يتم تمكين HTML افتراضيًا.

يوجد أدناه مثال على هيكل يمكنك استخدامه لإنشاء رسالة تأكيد البريد الإلكتروني باستخدام HTML. استخدم البيانات من إرسال النموذج لتخصيص عنوان الإحالة.

  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. إرسال Typeform → إنشاء صف جدول بيانات جديد
يحتوي كل من Zapier و Integromat على إرشادات شاملة حول كيفية إجراء عمليات الدمج هذه.

بالنسبة لنظام التتبع ، أنشأنا نموذجًا بسيطًا يمكنك تكراره واستخدامه كأساس لنظام التتبع الخاص بك:

بالإضافة إلى أوراق العمل الأربعة المضمنة في النموذج ، قمنا أيضًا ببناء العديد من الجداول الأخرى مثل تتبع المكافآت الآلي وخط أنابيب البريد الإلكتروني ، وصحيفة إلغاء الاشتراكات ، ورسم خرائط التحويل ، والمزيد. لكننا سنترك هذا الأمر لك

خارجي

لمساعدة المستخدمين على تتبع عدد الإحالات باستخدام رابطهم الفريد ، قمنا بإنشاء لوحة ليدربورد عامة - أيضًا باستخدام جداول بيانات Google.

+ 10. إحالات إضافية مع Typeform

تتمثل إحدى طرق زيادة معدل الإحالة في مطالبة المستخدمين بإدخال عنوان البريد الإلكتروني الخاص بصديقهم أو زميلهم. قد يكون هذا أحد الأسئلة في استطلاع Typeform الخاص بك أو نموذجًا في صفحة التأكيد الخاصة بك.

لقد قمنا بتضمين سؤال الإحالة في نهاية استطلاع Typeform الخاص بنا.


إليك كيف تبدو على Zapier:

عملية التصفية قبل إرسال البريد الإلكتروني مهمة. تريد التأكد مما يلي:

  1. القيمة هي في الواقع رسالة بريد إلكتروني (Typeform ليس مثاليًا في تحديد هذا)
  2. القيمة ليست فارغة
  3. المُحيل لا يُحيل نفسه

أخيرًا ، نقوم بتضمين المُحيل في حقل نسخة إلى البريد الإلكتروني للإحالة لجعل التجربة شخصية إضافية

هذا هو

برنامج الإحالة الخاص بك جاهز الآن للإطلاق. تهاني!

في حال واجهتك أي مشاكل على طول الطريق ، لا تتردد في إرسال بريد إلكتروني إلي - أو حتى أفضل من ذلك ، قم بالتعليق على Twitter / LinkedIn حتى يتمكن الجميع من الانتباه.

أود أيضًا معرفة ما إذا كنت انتهيت من استخدام هذا النظام ، لذا يرجى الاتصال بي إذا فعلت ذلك وشارك المنشور مع شخص آخر قد يستفيد منه ️