店舗で利用しているLINE公式アカウントを使い
LIFFを利用して紹介を繋げていく仕組みを公開しました。

LINE公式アカウントを利用して、友だちの紹介を促す

店舗などでLINEアカウントを開設しても、友だち追加してもらうことができなければ、送信先が増えないことにはあまり役に立ってきません。
通常の運用では、「友だち追加でクーポンをプレゼント！」といった方法などで友だち増やすことが一般的ですが、紹介キャンペーンみたいなことができないかと相談がありました。

＜紹介キャンペーンって？＞
お客様が、お客様の誰かを紹介してくれたらキャッシュバックや特別クーポンを出すキャンペーンです。
入会や購買促進の策として、スポーツジムとかではよくやっていますね。

今回は、LINEアカウントに登録してくれたお客様を起点として、その友だちを紹介してもらおうという考えです。
従来の方法では、キャンペーン用のサービス券のようなものを印刷して渡していました。
これを「LINE公式アカウントを使って、もっとスマートに管理も楽にできないか？」というのが今回のテーマです。

LIFFを使って紹介用のコードを取得する

LINE公式アカウントのMessaging APIには、LIFFという仕組みがあります。
”LINE Front-end Framework（LIFF）は、LINE内で動作するウェブアプリのプラットフォームです。”とLINE Developers に掲載されています。
詳しくはこちら

このLIFFを利用することで、LINEアプリ内で特定のHTMLを開いて、LINEのIDを取得することやメッセージを送信するなどができます。

今回のシステム構築では、LINEアプリから接続された方のIDを取得し、そのIDを利用して紹介コードの発行管理ができるようにしています。
具体的なイメージは下の画像のようなイメージです。

LIFFがリリースされる前は、LINEのボットを通して紹介コードを返信していましたが、LIFFを利用することでユーザーは単にLINEアプリ内で特定のページにアクセスするだけで紹介コードが取得されます。
ここまでの流れが全てLINEアプリ内で行われているためスムーズです。

画面イメージはこちらです。

利用しているLIFFのスクリプトについて

LINEアプリからアクセスさせるページのHTMLに、LIFFで利用できる次のscriptをコーディングして実現しています。


<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
        <script>
            var id = null;
            var send_text = null;

            window.onload = function() {

                liff.init(function (data) {
                        initializeApp(data);
                });

            };

            function initializeApp(data) {

                id=data.context.userId; //LINEの内部識別IDを取得。ちなみ内部識別IDはそれぞれの公式アカウントのプロバイダーごとで異なります。
                $.ajax({
                    type: "POST",
                    url: "***送信先***",//ユーザーIDを送信して紹介コードを発行してもらう
                    data: {
                        "id": id
                    },
                    success: function(html){
                        syoukai_code(html);
                    }
                });
            };

            function syoukai_code(html){
                var result = html //紹介コードを取得して画面に反映させる。

                var elem1 = document.getElementById("**反映させるところのid**");

                elem1.innerHTML = "<span style='font-size: 20px;'>紹介コード ： </span><span style='font-size: 20px;'>" + result +"</span>";

                //送信ボタンの内容を記述　　押すとLINEアプリでメッセージ選択できる
                send_text = "http://line.me/R/msg/text/?" + "「店舗名〇〇〇〇」を紹介するよ。下の紹介コードを使うと3000円OFFになるって！%0D%0A「 紹介コード ： " + result + " 」　";
            };

            function onButtonClick() {
                
                location.href=send_text;
                
            }
            

</script>

紹介用のコードを、友だちに送ってもらう。

青色のボタンをタップすると、LINEアプリのトークとして紹介メッセージを送信するようにしています。

下のようにURLのパラメータとしてメッセージの内容を記述します。
このメッセージ内容に、紹介コードを含めて、できるだけ簡単に送信してもらえるようにしています。

"http://line.me/R/msg/text?******メッセージ内容*******"

紹介後の流れについて

「紹介者が入会や購買に繋がったらキャッシュバック」というキャンペーンであるため、ただ送ればよいというわけではありません。
今回は、紹介コードを発行したLINE会員が誰かをデータベースに登録し管理することにしてみました。
店舗ではこのコードを管理することで、誰の紹介で来たお客様かわかるようになります。

今回はこのような管理を採用していますが、
紹介された方もLIFFを利用して、紹介コードを取得する！というような流れもできます。

しかし、ここでもLIFFを利用する場合は、「友だち追加」してもらい利用権限について承認してもらうことが必要です。
紹介された方は店舗のことは知らない方がほとんどですので、単にLINEのトークに送信することで留めています。