Flowrite'ın viral tavsiye programı – Haftalık kayıtlarımızı nasıl 8 katına çıkardık

Yayınlanan: 2022-03-22

Tanıtım

Ekim ayındaki ilk lansmanımızdan bu yana, açılış sayfamızda ürünümüz hakkında heyecan duyan insanlardan e-posta kayıtları topladık. Potansiyel bir kullanıcı, e-posta adresini göndererek bekleme listemize katıldıktan sonra, bir onay e-postası ile takip ederdik.

Sonbahar boyunca, onay e-postamızı defalarca yineledik ve kaydolanları Flowrite hakkında arkadaşlarıyla paylaşmaya teşvik etmeye çalıştık. Farklı kopyaları test ettik ve sosyal medya için bize yeterli miktarda ağızdan ağza iletişim sağlayan paylaşım bağlantıları sağladık. Sonunda, eksik olan şey, insanların haberi yayması için bir teşvikti.

Birkaç ay sonra Viral Loops, KickoffLabs ve Prefinery gibi kullanıma hazır tavsiye pazarlama çözümlerini aramaya başladık, ancak bunların hiçbiri bize gerçekten aradığımız esnekliği vermedi. Kayıt, ilk katılım, yönlendirmeler, e-postalar ve ödüller gibi tüm sürecin sahibi olmak istedik. ‍

Böylece, kodsuz araçlar kullanarak kendi yönlendirme sistemimizi oluşturmaya başladık. Kısa bir süre sonra, güzel bir şekilde entegre edilmiş bir işe alım anketi ve bir tavsiye programından oluşan kayıt akışının yeni bir sürümünü başlattık ve insanlara arkadaşlarını bekleme listemize katılmaya davet ederek ödüller kazanma imkanı verdik.

Yeni sistem, kayıtlarımızda muazzam bir artışa neden oldu - önceki 6 haftadaki ortalama haftalık kayıtlara kıyasla 2021'in 4. haftasında 8 kattan fazla artış. ‍

Bu, aynı tavsiye programını işletmenizde nasıl uygulayacağınız konusunda adım adım pratik bir talimattır.

Flowrite'ın tavsiye programı neleri içerir?

Flowrite.com'da e-posta kaydı
Her kullanıcıya atanan benzersiz yönlendirme bağlantısı
Yönlendirilen # kişi için ödüller
Her kullanıcı hakkında daha fazla bilgi toplamak için güzel bir şekilde entegre edilmiş Typeform anketi
Kullanıcının anket sırasında bir arkadaşını tavsiye etme imkanı
Kayıtları ve yönlendirmeleri izlemek için dahili elektronik tablo
Kullanıcıların tavsiyelerini takip etmeleri için herkese açık lider tablosu

Benzer bir program oluşturmak için ne gereklidir?

Kendi HTML ve JavaScript'inizle özelleştirebileceğiniz web sitesi (yani bir Web akışı sitesi veya yalnızca saf bir HTML web sitesi)
Typeform anketi (isteğe bağlı)
Google E-Tablolar veya Airtable
Gmail veya e-posta gönderen başka bir şey
İşleri birbirine yapıştırmak için otomasyon platformu (örneğin Zapier veya Integromat)

Ayrıca, bir düzeyde JavaScript bilgisine sahip olmak kullanışlı olabilir, ancak hiçbir şekilde gerekli değildir!

️

Başlamadan önce, her şeyin nasıl çalıştığını görmek için kayıt sürecimizden geçmenizi tavsiye ederim. Gezinme çubuğundaki düğmeye basın, e-postanızı girin, Typeform anketimizi gözden geçirin ve gelen kutunuzda bir onay e-postası olup olmadığını kontrol edin.

1. Referans kodu oluşturma

Bekleme listemize kaydolan her kişiye, rakamlardan ve harflerden oluşan rastgele 6 karakterli bir kod atanır. Kayıt işleminin sonunda, kullanıcıya sosyal medya için tek tıklamayla paylaşım bağlantıları vermek için onay sayfasında bu kodu kullanıyoruz.

Bir tavsiye kodu oluşturmak için, bir kullanıcının kaydolabileceği her sayfada <body> etiketinizin sonuna (veya </body> etiketinin önüne) aşağıdaki pasajı ekleyin. Webflow veya benzer bir web sitesi oluşturucu kullanıyorsanız, kodu site ayarlarınızdan her sayfaya global olarak ekleyebilirsiniz.

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

İkinci olarak, ana sayfanızın URL'sinden ve az önce oluşturduğumuz koddan oluşan, referansUrl adlı başka bir değişken veya sabit oluşturun. ReferansCode değişkeninin altına ekleyin.

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

2. Kullanıcının URL'sini saklamak

Ayrıca kullanıcının mevcut URL'sini bir değişkende saklamak istiyorsunuz. Her yönlendirme bağlantısı başına yönlendirme sayısını saymak için her kaydın hangi URL'den geldiğini bilmek önemlidir.

  
const siteUrl = window.location.href

Kodunuz şimdi şöyle görünmelidir:

  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. Kayıt formu

Gizli giriş alanları oluşturma

Bir e-posta giriş alanına ek olarak, kayıt formunuz ayrıca, kısa bir süre sonra önceki adımlardan referansUrl ve siteUrl değerlerini atayacağımız iki gizli giriş içermelidir.

Giriş alanlarını eklemek için form öğenizin içine - e-posta alanının hemen yanına - aşağıdaki kodu ekleyin.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>

*Webflow kullanıyorsanız, bunu gizli bir HTML Embed öğesiyle yapabilirsiniz.*

Giriş alanlarının doldurulması

Yine de girişler boş. Gönderime dahil edilmeleri için 1. ve 2. adımdaki değişkenleri girdilerinize atamanız gerekir.

  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;

Örneğin Webflow'un sembollerini kullanıyorsanız ve web sitenizin tek bir sayfasında aynı kayıt formunun birden çok örneğine sahipseniz, değişkenlerin doğru girdilere atandığından emin olmanız gerekir. Bununla ilgili talimatlar için Notion notumuza bakın.

test etmek

Artık, bir kullanıcı web sitesine kaydolduğunda, hem yönlendirme URL'si hem de sitenin URL'si, gönderime gizli olarak dahil edilmelidir. Webflow kullanıyorsanız, bunu onay e-postasından doğrulayabilirsiniz.

4. Typeform anketinizi özelleştirme

Kayıt ve tavsiye sisteminin bir parçası olarak, her bir kullanıcı hakkında daha fazla bilgi edinmek için Typeform kullanıyoruz. E-posta adreslerini ilk kayıt sırasında topladığımızdan, bekleme listesine katılmak için Typeform anketini tamamlamanız gerekmez. Anketi tamamlamaya devam eden kullanıcıların yüzdesi şu anda yaklaşık %75'tir.

Uygulamada, yönlendirme Kodunu (1. adım) ve kullanıcının e-postasını Typeform'a teslim etmek ve bunları gönderim boyunca "taşımak" istiyoruz. Bunu yapmak için yapıyoruz:

Onay sayfanızdaki paylaşım bağlantılarında tavsiye kodunu kullanın (adım 7)
İlk bekleme listesi kayıtlarını ilgili Typeform yanıtlarıyla eşleştirin. Kayıt formundaki e-postayı Typeform'a getirerek, kullanıcıdan iki kez göndermesini istememize gerek kalmaz.

Gizli alanlar

Bunun gerçekleşmesi için Typeform'un Gizli Alanlar özelliğini kullanmanız gerekir. Ayarları Mantık → Gelişmiş altında bulabilirsiniz.

İki Gizli Alan ayarlamanız gerekir: @email ve @code. Bu yapıldıktan sonra, bu değerleri Typeform bağlantınızın sonuna ekleyebilir ve Typeform'unuzun diğer yanıtlarıyla birlikte gönderilmesini sağlayabilirsiniz:

5. Typeform'u sitenize entegre etme

Typeform, sayfanıza bir anketi nasıl yerleştireceğiniz konusunda size birkaç alternatif sunar. Yerleştirme kullanmak istemiyorsanız, kullanıcılarınızı Typeform.com bağlantısına yönlendirmeniz yeterlidir.

Popup boyutu "Large" olarak ayarlanmış "Popup" alternatifini kullanıyoruz

Gömmelerden herhangi biriyle gitmeyi seçerseniz, Typeform'un gömme kodunu almanız ve sayfanızın HTML'sine yerleştirmeniz gerekir.

Bir açılır pencere ile Typeform kodunu nereye yerleştirdiğiniz gerçekten önemli değil. Sayfa hiyerarşisinin en üstünde bizimki var.

Açılır pencere ayrıca, esasen bir "Beni başlat" düğmesi olan bir <a> öğesi içerir. İşlevi, tıklandığında anket açılır penceresini açmaktır. Ancak, bir kullanıcı kayıt formunu gönderdiğinde açılır pencerenin otomatik olarak açılmasını istediğinizden, bunu sizin için yapan bir kod parçasına ihtiyacınız vardır.

Ayrıca, bu kodun gönderilen e-postayı almasını (kimliği "e-posta" olarak ayarlanmış bir giriş öğesinden), onu bir değişkene atamasını ve onu, yönlendirme Koduyla birlikte Typeform bağlantınızın sonuna eklemesini istiyorsunuz. Bunlar daha önce oluşturduğumuz Gizli Alanlar olacak

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

Son olarak, "Beni başlat" düğmesini gizlemek için <a> öğesinin görünürlüğünü "none" olarak ayarlayın.

Webflow kullanıyorsanız, HTML Embed'in tamamını gizleyebilirsiniz.

6. Typeform yönlendirmesi

Typeform, anketi tamamladıktan sonra kullanıcıları özel URL'lere yönlendirmenize olanak tanır. URL'ler, hem anket verileri hem de Gizli Alanlar ile özelleştirilebilir.

Yönlendirme bağlantılarımız hem yönlendirme kodunu (Gizli Alan) hem de anketteki kullanıcının adını içerir.

Örneğin, "kod" 123456 olarak ayarlandıysa ve kullanıcının adı Aaro ise, yönlendirme URL'si şöyle olur:

7. Onay sayfası

Onay sayfamızda, kullanıcılara kişisel tavsiye bağlantılarını paylaşmaları ve kazanabilecekleri ödüller hakkında bilgilendirmeleri için basit seçenekler sunmak istedik.

teşvik

Kullanıcıları teşvik etmenin yolu, Flowrite markalı ürünler ve ürüne ücretsiz erişim sunmaktır. Merch ile, bir mektuba sığabilecek öğeleri seçmenizi öneririz. Yakın zamanda, dünyanın her yerine kargo paketlerinin biraz pahalı olabileceğini fark ettik.

Tavsiye programları için ödüllerin ve teşviklerin nasıl seçileceği konusunda daha derine inmek istiyorsanız, konuyla ilgili Referral Rock'ın kılavuzuna bakın.

Onay sayfasını özelleştirme

Typeform'dan bu özel yönlendirme URL'sine sahip olmak, onay sayfanızı her kullanıcı için özelleştirmenize olanak tanır. Örneğin, Flowrite'ın onay sayfası, sayfayı biraz daha kişisel hale getirmek için URL'nin "ad" değerini kullanır:

Aynısını yapmak için, paragrafın özelleştirmek istediğiniz kısmını bir yayılma alanına sararak başlayın. Ardından, yayılma kimliğini "ad" olarak ayarlayın.

Son olarak, onay sayfanızın <body> etiketinin sonuna aşağıdaki parçacığı ekleyin.

  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;

İlk ada ek olarak, sosyal medya için paylaşım bağlantılarını özelleştirmek için URL'nin "kod" değerini de kullanabilirsiniz. Bir Twitter bağlantısı oluşturmak için öncelikle Twitter paylaşım butonunuzun kimliğini "tweet" olarak ayarlayın.

Ardından, onay sayfanızın <body> etiketinin sonuna aşağıdaki kodu ekleyin.

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

Onay sayfanızdaki metinleri ve bağlantıları istediğiniz şekilde özelleştirmek için yaratıcılığınızı kullanın. Bizimkileri de kıyaslayabilirsin.

8. Onay e-postası

Web sitemize ilk kayıt olduktan sonra, gönderilen e-posta adresine bir onay e-postası gönderiyoruz. Doğal olarak, o e-postanın her paylaşım bağlantısında 3. adımdaki yönlendirmeUrl'sini kullanmak istiyoruz.

Onay e-postasını otomatikleştirmek için Zapier veya Integromat kullanıyor olmanızdan bağımsız olarak, kayıt formu gönderimini tetikleyici olarak kullanmak ve gönderilen verilere dayalı olarak onay e-postasını göndermek için e-posta hesabınıza bağlamak istiyorsunuz - e-posta adresi ve referans URL'si Aşama 3.

Gmail'i en kişisel görünen ve hissettiren e-postalar göndermemize izin verdiği için kullanmaya karar verdik. Ancak, Gmail'in günlük gönderme limitleri, hacim 1500 e-posta/gün'ü aştığında bazı sorunlara neden oldu. Kayıt hacminiz sürekli bundan yüksekse, SendGrid veya Mailchimp gibi diğer alternatifleri düşünmek isteyebilirsiniz.

Dinamik bağlantılar ve metin dışında herhangi bir içerik (örn. resimler) eklemek için Zapier'de HTML seçeneğini seçmelisiniz. Integromat'ta HTML varsayılan olarak etkindir.

Aşağıda, HTML kullanarak onay e-postanızı oluşturmak için kullanabileceğiniz örnek bir yapı bulunmaktadır. YönlendirmeUrl'sini özelleştirmek için form gönderimindeki verileri kullanın.

  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. Takip sistemi

Dahili izleme

Son olarak, web sitenizdeki kayıt verilerini ve Typeform gönderilerini, kayıt sayısını, ilgili Typeform gönderilerini ve yönlendirmeleri takip edebileceğiniz tek bir hedefe teslim etmeniz gerekir. Google E-Tablolar kullanıyoruz, ancak Airtable veya kendinizi rahat hissettiğiniz başka bir şey kullanmaktan çekinmeyin.

Sayfanıza gerçek zamanlı olarak veri akışı sağlamak için, onu Zapier/Integromat/etc kullanarak web sitenize ve Typeform'a bağlamanız gerekir. İki tetikleyiciye ihtiyacınız var:

Bekleme listesi kaydı → E-posta gönder ve Yeni bir elektronik tablo satırı oluştur (bu, önceki adımda tartıştığımız satırdır)
Yazı formu gönderme → Yeni bir elektronik tablo satırı oluştur

Hem Zapier hem de Integromat, bu entegrasyonların nasıl gerçekleştirileceği konusunda kapsamlı talimatlara sahiptir.

İzleme sistemi için, çoğaltabileceğiniz ve kendi izleme sisteminiz için temel olarak kullanabileceğiniz basit bir şablon oluşturduk:

Şablonda bulunan dört çalışma sayfasına ek olarak, otomatik ödül izleme ve e-posta ardışık düzeni, abonelikten çıkma sayfası, huni eşlemesi ve daha fazlası gibi çeşitli başka tablolar da oluşturduk. Ama bunu sana bırakacağız

Harici

Kullanıcıların benzersiz bağlantılarıyla tavsiyelerin sayısını takip etmelerine yardımcı olmak için, Google E-Tablolar da dahil olmak üzere herkese açık bir lider tablosu oluşturduk.

+ 10. Typeform ile ek yönlendirmeler

Tavsiye oranınızı artırmanın yollarından biri, kullanıcılarınızdan arkadaşlarının veya iş arkadaşlarının e-posta adresini girmelerini istemektir. Bu, Typeform anketinizdeki sorulardan biri veya onay sayfanızdaki bir form olabilir.

Yönlendirme sorusunu Typeform anketimizin sonuna ekledik.

İşte Zapier'de nasıl göründüğü:

E-postayı göndermeden önceki filtre işlemi önemlidir. Şunlardan emin olmak istersiniz:

Değer aslında bir e-postadır (Typeform bunu tanımlamada mükemmel değildir)
Değer boş değil
Yönlendiren kendilerini referans göstermiyor

Son olarak, deneyimi daha da kişisel hale getirmek için tavsiye e-postasının cc alanına yönlendireni dahil ederiz.

Bu kadar

Tavsiye programınız artık lansman için hazır. Tebrikler!

Yol boyunca herhangi bir sorunla karşılaşırsanız, bana bir e-posta göndermekten çekinmeyin - hatta daha iyisi, herkesin fark edebilmesi için Twitter / LinkedIn'de yorum yapın.

Bu sistemi kullanıp kullanmayacağınızı da bilmek isterim, bu yüzden lütfen kullandıysanız bana ping atın ve gönderiyi yararlanabilecek başka biriyle paylaşın ️