โปรแกรมการอ้างอิงแบบไวรัลของ Flowrite – เราสมัครเป็น 8 เท่าต่อสัปดาห์ได้อย่างไร
เผยแพร่แล้ว: 2022-03-22บทนำ
นับตั้งแต่เปิดตัวครั้งแรกในเดือนตุลาคม เราได้รวบรวมการสมัครอีเมลบนหน้า Landing Page จากผู้ที่ตื่นเต้นกับผลิตภัณฑ์ของเรา หลังจากที่ผู้มีโอกาสเป็นผู้ใช้เข้าร่วมรายชื่อผู้รอของเราโดยส่งที่อยู่อีเมลของพวกเขา เราจะติดตามผลด้วยอีเมลยืนยัน
ตลอดช่วงฤดูใบไม้ร่วง เราได้ตรวจสอบอีเมลยืนยันซ้ำหลายครั้ง พยายามสนับสนุนให้ผู้ที่ลงทะเบียนเพื่อแบ่งปันเกี่ยวกับ Flowrite ให้กับเพื่อนของพวกเขา เราทดสอบสำเนาต่างๆ และให้ลิงก์แชร์สำหรับโซเชียลมีเดีย ซึ่งทำให้เราได้รับคำบอกต่อในปริมาณที่เหมาะสม ในท้ายที่สุด สิ่งที่ขาดหายไปคือแรงจูงใจให้ผู้คนกระจายข่าว
หลายเดือนต่อมา เราเริ่มมองหาโซลูชันการตลาดแบบอ้างอิงที่ไม่มีวางจำหน่ายทั่วไป เช่น Viral Loops, KickoffLabs และ Prefinery แต่ไม่มีโซลูชันใดที่ให้ความยืดหยุ่นอย่างที่เราต้องการจริงๆ เราต้องการเป็นเจ้าของกระบวนการทั้งหมด – การสมัคร การเริ่มต้นใช้งาน การอ้างอิง อีเมล และรางวัล
ดังนั้นเราจึงเริ่มสร้างระบบการอ้างอิงของเราเองโดยใช้เครื่องมือที่ไม่มีโค้ด หลังจากนั้นไม่นาน เราได้เปิดตัวขั้นตอนการลงทะเบียนเวอร์ชันใหม่ซึ่งประกอบด้วยแบบสำรวจการเริ่มต้นใช้งานที่ผสานรวมอย่างสวยงามและโปรแกรมการอ้างอิง ทำให้ผู้คนมีโอกาสได้รับรางวัลโดยการเชิญเพื่อนของพวกเขาให้เข้าร่วมรายชื่อผู้รอของเรา
ระบบใหม่ทำให้การลงชื่อสมัครใช้ของเราพุ่งขึ้นอย่างมหาศาล โดยเพิ่มขึ้นมากกว่า 8 เท่าในสัปดาห์ที่ 4 ของปี 2021 เมื่อเทียบกับการลงชื่อสมัครใช้รายสัปดาห์โดยเฉลี่ยในช่วง 6 สัปดาห์ก่อนหน้า
นี่คือคำแนะนำทีละขั้นตอนที่ใช้งานได้จริงเกี่ยวกับวิธีการใช้โปรแกรมอ้างอิงเดียวกันในธุรกิจของคุณ
โปรแกรมอ้างอิงของ Flowrite รวมอะไรบ้าง?
- สมัครอีเมล์ที่ flowrite.com
- ลิงก์อ้างอิงที่ไม่ซ้ำที่กำหนดให้กับผู้ใช้ทุกคน
- รางวัลสำหรับ #คนอ้างอิง
- แบบสำรวจ Typeform แบบบูรณาการที่สวยงามเพื่อรวบรวมข้อมูลเพิ่มเติมเกี่ยวกับผู้ใช้แต่ละคน
- ความเป็นไปได้สำหรับผู้ใช้ในการแนะนำเพื่อนในระหว่างการสำรวจ
- สเปรดชีตภายในเพื่อติดตามการสมัครและการอ้างอิง
- กระดานผู้นำสาธารณะสำหรับผู้ใช้เพื่อติดตามการอ้างอิงของพวกเขา
สิ่งที่จำเป็นในการสร้างโปรแกรมที่คล้ายกัน?
- เว็บไซต์ที่คุณปรับแต่งได้ด้วย HTML & JavaScript ของคุณเอง (เช่น เว็บไซต์ Webflow หรือเว็บไซต์ HTML ล้วนๆ)
- แบบสำรวจแบบฟอร์ม (ไม่บังคับ)
- Google ชีตหรือ Airtable
- Gmail หรืออย่างอื่นที่ส่งอีเมล
- แพลตฟอร์มการทำงานอัตโนมัติ (เช่น Zapier หรือ Integromat) เพื่อติดสิ่งต่างๆ เข้าด้วยกัน
นอกจากนี้ การมีความเข้าใจ JavaScript ในระดับหนึ่งอาจกลายเป็นเรื่องสะดวก แต่ก็ไม่จำเป็นไม่ว่าด้วยวิธีใด!
1. การสร้างรหัสอ้างอิง
ทุกคนที่ลงทะเบียนในรายชื่อผู้รอจะได้รับรหัสสุ่ม 6 ตัวซึ่งประกอบด้วยตัวเลขและตัวอักษร เมื่อสิ้นสุดขั้นตอนการสมัคร เราใช้รหัสนี้ในหน้ายืนยันเพื่อให้ผู้ใช้คลิกแชร์ลิงก์สำหรับโซเชียลมีเดียได้เพียงคลิกเดียว
ในการสร้างรหัสอ้างอิง ให้แทรกข้อมูลโค้ดต่อไปนี้ที่ส่วนท้ายของแท็ก <body> ของคุณ (หรือก่อนแท็ก </body>) ในแต่ละหน้าที่ผู้ใช้สามารถลงทะเบียนได้ หากคุณกำลังใช้ Webflow หรือเครื่องมือสร้างเว็บไซต์ที่คล้ายกัน คุณสามารถแทรกโค้ดนี้ไปทั่วโลกจากการตั้งค่าไซต์ของคุณ
ประการที่สอง สร้างตัวแปรหรือค่าคงที่อื่นที่เรียกว่า referralUrl ซึ่งประกอบด้วย URL ของหน้าแรกของคุณและโค้ดที่เราเพิ่งสร้างขึ้น แทรกไว้ด้านล่างตัวแปร referralCode
2. การจัดเก็บ URL ของผู้ใช้
คุณต้องการจัดเก็บ URL ปัจจุบันของผู้ใช้ในตัวแปร สิ่งสำคัญคือต้องรู้ว่าการสมัครแต่ละครั้งมาจาก URL ใด เพื่อนับจำนวนผู้อ้างอิงต่อลิงก์อ้างอิงแต่ละลิงก์
รหัสของคุณควรมีลักษณะดังนี้:
3. แบบฟอร์มการสมัคร
การสร้างช่องป้อนข้อมูลที่ซ่อนอยู่
นอกเหนือจากช่องป้อนข้อมูลอีเมลแล้ว แบบฟอร์มการสมัครของคุณควรมีข้อมูลเข้าที่ซ่อนอยู่สองช่อง ซึ่งเราจะกำหนดค่า referralUrl และ siteUrl จากขั้นตอนก่อนหน้านี้ในเร็วๆ นี้
หากต้องการเพิ่มช่องป้อนข้อมูล ให้ใส่รหัสต่อไปนี้ในองค์ประกอบของแบบฟอร์ม – ถัดจากช่องอีเมล

กำลังเติมช่องป้อนข้อมูล
อินพุตยังคงว่างเปล่าแม้ว่า คุณต้องกำหนดตัวแปรจากขั้นตอนที่ 1 และ 2 ลงในอินพุตของคุณเพื่อให้รวมอยู่ในการส่ง

ทดลองดู
ตอนนี้ เมื่อผู้ใช้ลงทะเบียนบนเว็บไซต์ ทั้ง URL อ้างอิงและ URL ของไซต์ควรซ่อนอยู่ในการส่ง หากคุณกำลังใช้ Webflow คุณสามารถตรวจสอบได้จากอีเมลยืนยัน
4. การปรับแต่งแบบสำรวจ Typeform ของคุณ
ในฐานะที่เป็นส่วนหนึ่งของระบบการสมัครและการอ้างอิง เราใช้ Typeform เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับผู้ใช้แต่ละราย ไม่จำเป็นต้องกรอกแบบสำรวจ Typeform เพื่อเข้าร่วมรายชื่อรอ เนื่องจากเรารวบรวมที่อยู่อีเมลแล้วในระหว่างการสมัครครั้งแรก เปอร์เซ็นต์ของผู้ใช้ที่ดำเนินการสำรวจให้เสร็จสิ้นในปัจจุบันอยู่ที่ประมาณ 75%
ในทางปฏิบัติ เราต้องการส่ง referralCode (ขั้นตอนที่ 1) และอีเมลของผู้ใช้ไปยัง Typeform และ "ดำเนินการ" ตลอดการส่ง เราทำสิ่งนี้เพื่อ:
- ใช้ referralCode ในการแชร์ลิงก์ในหน้ายืนยันของคุณ (ขั้นตอนที่ 7)
- จับคู่การลงทะเบียนรายชื่อรอเริ่มต้นกับคำตอบ Typeform ที่เกี่ยวข้อง การนำอีเมลจากแบบฟอร์มลงทะเบียนมาที่ Typeform เราไม่จำเป็นต้องขอให้ผู้ใช้ส่งสองครั้ง

ฟิลด์ที่ซ่อนอยู่
ในการทำให้สิ่งนี้เกิดขึ้น คุณต้องใช้ฟีเจอร์ Hidden Fields ของ Typeform คุณสามารถค้นหาการตั้งค่าได้ใน Logic → Advanced

คุณต้องตั้งค่าช่องที่ซ่อนอยู่สองช่อง: @email และ @code เมื่อเสร็จแล้ว คุณจะสามารถแทรกค่าเหล่านั้นที่ส่วนท้ายของลิงก์ Typeform ของคุณ และส่งค่าเหล่านั้นไปพร้อมกับคำตอบอื่นๆ ของ Typeform ของคุณ:

5. การรวม Typeform เข้ากับไซต์ของคุณ
Typeform ให้คุณมีทางเลือกมากมายในการฝังแบบสำรวจบนเพจของคุณ หากคุณไม่ต้องการใช้การฝัง คุณสามารถเปลี่ยนเส้นทางผู้ใช้ของคุณไปที่ลิงก์ Typeform.com


หากคุณเลือกที่จะฝังใดๆ คุณต้องคว้าโค้ดสำหรับฝังของ Typeform และวางไว้ใน HTML ของหน้าเว็บของคุณ

ด้วยป๊อปอัป ไม่สำคัญว่าคุณจะวางโค้ด Typeform ไว้ที่ใด เรามีของเราที่ด้านบนของลำดับชั้นของหน้า
ป๊อปอัปยังมีองค์ประกอบ <a> ซึ่งโดยพื้นฐานแล้วคือปุ่ม "เปิดใช้ฉัน" หน้าที่ของมันคือเปิดป๊อปอัปแบบสำรวจเมื่อคลิก อย่างไรก็ตาม เนื่องจากคุณต้องการให้ป๊อปอัปเปิดโดยอัตโนมัติเมื่อผู้ใช้ส่งแบบฟอร์มลงทะเบียน คุณจึงต้องมีโค้ดที่ทำเพื่อคุณ
คุณยังต้องการให้รหัสนั้นนำอีเมลที่ส่งมาด้วย (จากองค์ประกอบอินพุตที่มีการตั้งค่ารหัสเป็น "อีเมล") กำหนดให้กับตัวแปร และแทรกไว้ที่ส่วนท้ายของลิงก์ Typeform ของคุณพร้อมกับ referralCode นี่จะเป็นทุ่งที่ซ่อนอยู่ที่เราตั้งไว้ก่อนหน้านี้

สุดท้าย ตั้งค่าการมองเห็นขององค์ประกอบ <a> เป็น "ไม่มี" เพื่อซ่อนปุ่ม "เปิดใช้ฉัน"

หากคุณกำลังใช้ Webflow คุณสามารถซ่อน HTML Embed ทั้งหมดได้
6. การเปลี่ยนเส้นทางรูปแบบอักษร

Typeform อนุญาตให้คุณเปลี่ยนเส้นทางผู้ใช้ไปยัง URL ที่กำหนดเองหลังจากเสร็จสิ้นการสำรวจ สามารถปรับแต่ง URL ได้ทั้งข้อมูลแบบสำรวจและช่องที่ซ่อนอยู่
ลิงก์เปลี่ยนเส้นทางของเรามีทั้งรหัสอ้างอิง (ฟิลด์ที่ซ่อนอยู่) และชื่อจริงของผู้ใช้จากแบบสำรวจ
ตัวอย่างเช่น หากตั้งค่า "code" เป็น 123456 และชื่อผู้ใช้คือ Aaro URL เปลี่ยนเส้นทางจะเป็น:

7. หน้ายืนยัน

สิ่งจูงใจ
วิธีการจูงใจผู้ใช้ของเราคือการนำเสนอสินค้าที่มีตราสินค้า Flowrite และเข้าถึงผลิตภัณฑ์ได้ฟรี สำหรับสินค้า เราขอแนะนำให้คุณเลือกสินค้าที่ใส่ลงในจดหมายได้ เมื่อเร็วๆ นี้เราตระหนักดีว่าพัสดุภัณฑ์สำหรับจัดส่งทั่วโลกอาจมีราคาสูงบ้าง..

ปรับแต่งหน้ายืนยัน
การมี URL เปลี่ยนเส้นทางที่กำหนดเองจาก Typeform ช่วยให้คุณปรับแต่งหน้าการยืนยันสำหรับผู้ใช้ทุกคน ตัวอย่างเช่น หน้ายืนยันของ Flowrite ใช้ค่า "ชื่อจริง" ของ URL เพื่อทำให้หน้ามีความเป็นส่วนตัวขึ้นเล็กน้อย:

ในการทำเช่นเดียวกัน ให้เริ่มต้นด้วยการตัดส่วนของย่อหน้าที่คุณต้องการปรับแต่งในช่วง จากนั้นตั้งค่า id ของช่วงเป็น "ชื่อ"

สุดท้าย ใส่ข้อมูลโค้ดต่อไปนี้ที่ส่วนท้ายของแท็ก <body> ของหน้าการยืนยันของคุณ
นอกจากชื่อแล้ว คุณยังสามารถใช้ค่า "รหัส" ของ URL เพื่อปรับแต่งการแชร์ลิงก์สำหรับโซเชียลมีเดีย ในการสร้างลิงก์ Twitter ก่อนอื่นให้ตั้งค่า id ของปุ่มแชร์ Twitter ของคุณเป็น "ทวีต"

จากนั้น ให้ใส่โค้ดต่อไปนี้ที่ส่วนท้ายของแท็ก <body> ของหน้าการยืนยันของคุณ
8. อีเมลยืนยัน
หลังจากการลงทะเบียนครั้งแรกบนเว็บไซต์ของเรา เราจะส่งอีเมลยืนยันไปยังที่อยู่อีเมลที่ส่งมา โดยปกติ เราต้องการใช้ referralUrl จากขั้นตอนที่ 3 ในทุกลิงก์ที่แชร์ของอีเมลนั้น

ไม่ว่าคุณจะใช้ Zapier หรือ Integromat เพื่อทำให้อีเมลยืนยันเป็นแบบอัตโนมัติ คุณต้องการใช้การส่งแบบฟอร์มลงทะเบียนเป็นตัวกระตุ้นและเชื่อมต่อกับบัญชีอีเมลของคุณเพื่อส่งอีเมลยืนยันตามข้อมูลที่ส่งมา – ที่อยู่อีเมลและ URL อ้างอิงจาก ขั้นตอนที่ 3
เราตัดสินใจใช้ Gmail เนื่องจากอนุญาตให้เราส่งอีเมลที่มีลักษณะและเป็นส่วนตัวมากที่สุด อย่างไรก็ตาม ขีดจำกัดการส่งรายวันของ Gmail ทำให้เรามีปัญหาเมื่อมีปริมาณอีเมลเกิน 1,500 ฉบับ/วัน หากปริมาณการสมัครของคุณสูงกว่านั้นอย่างต่อเนื่อง คุณอาจต้องการพิจารณาทางเลือกอื่น เช่น SendGrid หรือ Mailchimp
หากต้องการรวมลิงก์แบบไดนามิกและเนื้อหาอื่นๆ นอกเหนือจากข้อความ (เช่น รูปภาพ) คุณควรเลือกตัวเลือก HTML ใน Zapier ใน Integromat HTML ถูกเปิดใช้งานโดยค่าเริ่มต้น

ด้านล่างนี้คือโครงสร้างตัวอย่างที่คุณสามารถใช้สร้างอีเมลยืนยันโดยใช้ HTML ใช้ข้อมูลจากการส่งแบบฟอร์มเพื่อปรับแต่ง referralUrl
9. ระบบติดตาม
การติดตามภายใน
สุดท้าย คุณต้องส่งข้อมูลการสมัครจากเว็บไซต์ของคุณและการส่ง Typeform ไปยังปลายทางเดียว ซึ่งคุณสามารถติดตาม # ของการสมัคร การส่ง Typeform ที่เกี่ยวข้อง และการอ้างอิง เรากำลังใช้ Google ชีต แต่อย่าลังเลที่จะใช้ Airtable หรืออย่างอื่นที่คุณสบายใจ
เพื่อให้ข้อมูลไหลไปยังชีตของคุณแบบเรียลไทม์ คุณต้องเชื่อมต่อกับเว็บไซต์และ Typeform ของคุณโดยใช้ Zapier/Integromat/etc คุณต้องการทริกเกอร์สองตัว:
- ลงชื่อสมัคร ใช้ในรายการรอ → ส่งอีเมล & สร้างแถวสเปรดชีตใหม่ (นี่คือสิ่งที่เราพูดถึงในขั้นตอนที่แล้ว)
- การส่งแบบฟอร์ม → สร้างแถวสเปรดชีตใหม่
สำหรับระบบการติดตาม เราได้สร้างเทมเพลตง่ายๆ ที่คุณสามารถทำซ้ำและใช้เป็นฐานสำหรับระบบติดตามของคุณเองได้:

นอกจากเวิร์กชีตทั้งสี่ที่รวมอยู่ในเทมเพลตแล้ว เรายังได้สร้างตารางอื่นๆ อีกมากมาย เช่น การติดตามรางวัลอัตโนมัติและไปป์ไลน์อีเมล แผ่นงานการยกเลิกการสมัคร การจับคู่ช่องทาง และอื่นๆ แต่เราจะปล่อยให้มันขึ้นอยู่กับคุณ
ภายนอก
เพื่อช่วยให้ผู้ใช้ติดตาม # ของการอ้างอิงด้วยลิงก์เฉพาะของพวกเขา เราได้สร้างกระดานผู้นำสาธารณะ – รวมทั้ง Google ชีตด้วย

+ 10. การอ้างอิงเพิ่มเติมด้วย Typeform
วิธีหนึ่งในการเพิ่มอัตราการอ้างอิงของคุณคือการขอให้ผู้ใช้ป้อนที่อยู่อีเมลของเพื่อนหรือเพื่อนร่วมงาน นี่อาจเป็นหนึ่งในคำถามในแบบสำรวจ Typeform ของคุณหรือแบบฟอร์มในหน้าการยืนยันของคุณ

นี่คือลักษณะที่ปรากฏบน Zapier:

การดำเนินการกรองก่อนส่งอีเมลมีความสำคัญ คุณต้องการให้แน่ใจว่า:
- ค่าจริง ๆ แล้วเป็นอีเมล (Typeform ไม่สมบูรณ์แบบในการระบุสิ่งนี้)
- ค่าไม่ว่างเปล่า
- ผู้อ้างอิงไม่ได้อ้างอิงตัวเอง

สุดท้ายนี้ เรารวมผู้อ้างอิงในช่องสำเนาของอีเมลอ้างอิงเพื่อทำให้ประสบการณ์เป็นส่วนตัวมากขึ้น


แค่นั้นแหละ
โปรแกรมอ้างอิงของคุณพร้อมสำหรับการเปิดตัวแล้ว ยินดีด้วย!
ในกรณีที่คุณประสบปัญหาใดๆ ระหว่างทาง อย่าลังเลที่จะส่งอีเมลถึงฉัน หรือแสดงความคิดเห็นบน Twitter / LinkedIn เพื่อให้ทุกคนสามารถสังเกตเห็นได้
ฉันชอบที่จะทราบด้วยว่าคุณจะจบลงด้วยการใช้ระบบนี้หรือไม่ ดังนั้นโปรด ping หากคุณทำและแบ่งปันโพสต์กับคนอื่นที่อาจได้รับประโยชน์จากระบบนี้️