Flowriteのバイラル紹介プログラム–毎週の申し込みを8倍にした方法

公開: 2022-03-22

序章

10月の最初の発売以来、当社の製品に興奮している人々から、ランディングページに電子メールのサインアップを集めてきました。 潜在的なユーザーが彼らの電子メールアドレスを提出することによって私たちの順番待ちリストに加わった後、私たちは確認の電子メールでフォローアップします。

秋を通して、私たちは確認メールを何度も繰り返しました–サインアップしている人たちにFlowriteについて友達に共有するように勧めようとしました。 私たちはさまざまなコピーをテストし、ソーシャルメディアに共有リンクを提供しました。これにより、かなりの量の口コミが得られました。 結局、欠けていたのは、人々がその言葉を広めるためのインセンティブでした。

数か月後、Viral Loops、KickoffLabs、Prefineryなどの既製のリファラルマーケティングソリューションを検討し始めましたが、どれも私たちが探していた柔軟性を実際に提供してくれませんでした。 サインアップ、オンボーディング、紹介、メール、特典など、プロセス全体を所有したかったのです。

そこで、ノーコードツールを使用して独自の紹介システムを構築し始めました。 その後すぐに、美しく統合されたオンボーディング調査と紹介プログラムで構成される新しいバージョンの登録フローを開始しました。これにより、友人を順番待ちリストに招待することで、報酬を獲得できるようになります。

新しいシステムにより、登録数が大幅に増加しました。2021年の第4週には、過去6週間の平均的な週次登録数と比較して8倍以上の増加が見られました。

これはあなたのビジネスに同じ紹介プログラムを実装する方法についての実用的なステップバイステップの説明です

Flowriteの紹介プログラムには何が含まれていますか?

  • flowrite.comでの電子メールサインアップ
  • すべてのユーザーに割り当てられた一意の紹介リンク
  • 紹介された人の数に対する報酬
  • 各ユーザーに関する詳細情報を収集するための美しく統合されたTypeform調査
  • 調査中にユーザーが友人を紹介する可能性
  • サインアップと紹介を追跡するための内部スプレッドシート
  • ユーザーが紹介を追跡するための公開リーダーボード

同様のプログラムを作成するには何が必要ですか?

  • 独自のHTMLおよびJavaScriptでカスタマイズできるWebサイト(つまり、Webflowサイトまたは純粋なHTML Webサイト)
  • タイプフォーム調査(オプション)
  • GoogleスプレッドシートまたはAirtable
  • Gmailまたはメールを送信するその他のもの
  • 物事を接着するための自動化プラットフォーム(ZapierやIntegromatなど)

また、JavaScriptをある程度理解していると便利な場合がありますが、必須ではありません。

始める前に、自分でサインアッププロセスを実行して、すべてがどのように機能するかを確認することをお勧めします。 ナビゲーションバーのボタンを押してメールアドレスを入力し、Typeformアンケートに回答して、受信トレイで確認メールを確認してください。

1.紹介コードを作成する

順番待ちリストに登録する各人には、数字と文字で構成されるランダムな6文字のコードが割り当てられます。 サインアッププロセスの最後に、確認ページでこのコードを使用して、ソーシャルメディアのワンクリック共有リンクをユーザーに提供します。

紹介コードを作成するには、ユーザーが登録できる各ページの<body>タグの最後(または</ body>タグの前)に次のスニペットを挿入します。 Webflowまたは同様のWebサイトビルダーを使用している場合は、サイト設定からすべてのページにコードをグローバルに挿入できます。

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

次に、referralUrlという別の変数または定数を作成します。これは、ホームページのURLと生成したコードで構成されます。 これをreferralCode変数の下に挿入します。

  
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.サインアップフォーム

非表示の入力フィールドの作成

メール入力フィールドに加えて、登録フォームには2つの非表示の入力も含まれている必要があります。これらの入力には、前の手順のreferralUrl値とsiteUrl値がすぐに割り当てられます。

入力フィールドを追加するには、フォーム要素内の電子メールフィールドのすぐ隣に次のコードを挿入します。

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'> 
Webflowを使用している場合は、非表示のHTMLEmbed要素を使用してこれを行うことができます。

入力フィールドへの入力

ただし、入力はまだ空です。 手順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のシンボルを使用していて、Webサイトの1つのページに同じサインアップフォームの複数のインスタンスがある場合は、変数が正しい入力に割り当てられていることを確認する必要があります。 この手順については、概念メモを確認してください。

それをテストする

これで、ユーザーがWebサイトにサインアップするときに、参照URLとサイトのURLの両方が非表示で送信に含まれる必要があります。 Webflowを使用している場合は、確認メールで確認できます。

4.Typeform調査のカスタマイズ

サインアップと紹介システムの一環として、Typeformを使用して各ユーザーの詳細を学習しています。 Typeform調査に回答する必要はありません。これは、最初のサインアップ時にすでに電子メールアドレスを収集しているためです。 調査を完了するために進むユーザーの割合は、現在約75%です。

実際には、referralCode(ステップ1)とユーザーの電子メールをTypeformに配信し、送信全体を通してそれらを「運ぶ」必要があります。 これは、次の目的で行います。

  1. 確認ページの共有リンクでreferralCodeを使用します(ステップ7)
  2. 最初の順番待ちリストの申し込みを、対応するTypeformの回答と一致させます。 サインアップフォームからTypeformにメールを送信することで、ユーザーに2回送信するように依頼する必要がなくなります。

隠しフィールド

これを実現するには、Typeformの非表示フィールド機能を使用する必要があります。 設定は[ロジック]→[詳細]にあります。

@emailと@codeの2つの非表示フィールドを設定する必要があります。 それが完了すると、Typeformリンクの最後にこれらの値を挿入し、Typeformの他の回答と一緒に送信することができます。

5.Typeformをサイトに統合する

Typeformには、ページにアンケートを埋め込む方法に関するいくつかの選択肢があります。 埋め込みを使用したくない場合は、ユーザーをTypeform.comリンクにリダイレクトするだけです。

ポップアップサイズを「大」に設定した「ポップアップ」の代替を使用します


いずれかの埋め込みを使用する場合は、Typeformの埋め込みコードを取得してページのHTMLに配置する必要があります。

ポップアップを使用すると、Typeformコードをどこに配置してもかまいません。 ページ階層の最上位にあります。

ポップアップには、本質的に「起動」ボタンである<a>要素も含まれています。 その機能は、クリックすると調査ポップアップを開くことです。 ただし、ユーザーがサインアップフォームを送信したときにポップアップを自動的に開くようにするため、それを行うコードが必要です。

また、そのコードで(idが "email"に設定されたinput要素から)送信された電子メールを取得し、それを変数に割り当てて、referralCodeとともに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(); }); 

最後に、「Launch me」ボタンを非表示にするために、<a>要素の可視性を「none」に設定します。

Webflowを使用している場合は、HTML埋め込み全体を非表示にすることができます。

6.タイプフォームリダイレクト

Typeformを使用すると、調査の完了後にユーザーをカスタムURLにリダイレクトできます。 URLは、調査データと非表示フィールドの両方を使用してカスタマイズできます。

リダイレクトリンクには、紹介コード(非表示フィールド)と調査からのユーザーの名の両方が含まれています。

たとえば、「コード」が123456に設定されていて、ユーザーの名がAaroの場合、リダイレクトURLは次のようになります。

7.確認ページ

確認ページでは、個人の紹介リンクを共有し、獲得できる報酬についてユーザーに通知するための簡単なオプションをユーザーに提供したいと考えていました。

インセンティブ

ユーザーにインセンティブを与える私たちの方法は、Flowriteブランドの商品と製品への無料アクセスを提供することです。 グッズでは、手紙に収まるアイテムを選ぶことをお勧めします。 私たちは最近、世界中に荷物を輸送するのに少し高額になる可能性があることに気づきました。

紹介プログラムの報酬とインセンティブを選択する方法についてさらに深く掘り下げたい場合は、このトピックに関する紹介ロックのガイドを確認してください。

確認ページのカスタマイズ

TypeformからのカスタムリダイレクトURLを使用すると、すべてのユーザーの確認ページをカスタマイズできます。 たとえば、Flowriteの確認ページでは、URLの「名」の値を使用して、ページを少しだけ個人的なものにします。


同じことを行うには、カスタマイズする段落の部分をスパンでラップすることから始めます。 次に、スパンのIDを「firstname」に設定します。

最後に、確認ページの<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共有ボタンのIDを「ツイート」に設定します。

次に、確認ページの<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のreferralUrlを使用します。

ZapierとIntegromatのどちらを使用して確認メールを自動化するかに関係なく、登録フォームの送信をトリガーとして使用し、それをメールアカウントに接続して、送信されたデータ(メールアドレスとreferralURL)に基づいて確認メールを送信します。ステップ3。

最も個人的なルックアンドフィールのメールを送信できるため、Gmailを使用することにしました。 ただし、Gmailの1日の送信制限により、1日あたりのメール数が1500を超えると問題が発生します。 サインアップボリュームが常にそれよりも多い場合は、SendGridやMailchimpなどの他の代替手段を検討することをお勧めします。

動的リンクやテキスト以外のコンテンツ(画像など)を含めるには、ZapierでHTMLオプションを選択する必要があります。 Integromatでは、HTMLはデフォルトで有効になっています。

以下は、HTMLを使用して確認メールを作成するために使用できる構造の例です。 フォーム送信のデータを使用して、referralUrlをカスタマイズします。

  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.追跡システム

内部追跡

最後に、WebサイトからのサインアップデータとTypeformの送信を、サインアップの数、対応するTypeformの送信、および紹介を追跡できる単一の宛先に配信する必要があります。 Googleスプレッドシートを使用していますが、Airtableなどの使いやすいものを自由に使用してください。

シートにリアルタイムでデータを流すには、Zapier / Integromat/etcを使用してシートをWebサイトおよびTypeformに接続する必要があります。 2つのトリガーが必要です。

  1. 順番待ちリストの登録メールを送信して新しいスプレッドシートの行を作成します(これは前の手順で説明したものです)
  2. タイプフォームの送信→新しいスプレッドシート行を作成する
ZapierとIntegromatの両方に、これらの統合を実現する方法に関する包括的な指示があります。

追跡システムについては、複製して独自の追跡システムのベースとして使用できる簡単なテンプレートを作成しました。

テンプレートに含まれている4つのワークシートに加えて、自動報酬追跡やメールパイプライン、登録解除シート、目標到達プロセスのマッピングなど、さまざまなテーブルを作成しました。 しかし、それはあなたに任せます

外部の

ユーザーが独自のリンクで紹介の数を追跡できるように、Googleスプレッドシートを使用して公開リーダーボードを作成しました。

+10.Typeformによる追加の紹介

紹介率を上げる方法の1つは、ユーザーに友人や同僚のメールアドレスを入力するように依頼することです。 これは、Typeformアンケートの質問の1つ、または確認ページのフォームである可能性があります。

Typeform調査の最後に、紹介の質問を含めました。


Zapierでの表示は次のとおりです。

メールを送信する前のフィルター操作は重要です。 次のことを確認する必要があります。

  1. 値は実際には電子メールです(Typeformはこれを識別するのに完全ではありません)
  2. 値は空ではありません
  3. リファラーは自分自身を参照しません

最後に、リファラーを紹介メールのccフィールドに含めて、エクスペリエンスをさらにパーソナルなものにします

それでおしまい

これで、紹介プログラムを開始する準備が整いました。 おめでとうございます!

途中で問題が発生した場合は、遠慮なく私にメールを送ってください。さらに良いことに、Twitter / LinkedInにコメントして、誰もが注目できるようにしてください。

あなたがこのシステムを使用することになったのかどうかも知りたいので、使用した場合は私にpingして、それから利益を得る可能性のある他の誰かと投稿を共有してください️