LINE連携の特徴
1 LINEアカウントで会員登録が可能になります。
・通常の会員登録方法(メールアドレスや名前の入力)に代わってLINEアカウントの認証で手順を簡略化して会員登録することが出来ます。
・登録の際、LINEに登録済みの名前やメールアドレスが、当システムに取り込まれます。
2 LINEアカウントで会員マイページのログインができるようになります。
ID、パスワードを忘れてもLINEのアカウントでマイページへワンボタンでログインできます。
3 既存会員にもLINE連携や友達登録を促進します。
LINE連携を導入以前に当システムの会員になっている場合はマイページ内でLINE連携や友達登録をアラートでお勧めします。
LINE連携で出来る事
1 LINEアカウントで会員登録
ユーザーはLINEアカウントを利用して、当システムの会員登録が行えます。
既存の登録フォームにLINE登録の仕組みを追加したので、無料版、有料版など各ステータスに振り分けはもちろんや利用期限や秘密のページ開放など細かく設定することが可能です
✔ ユーザーはLINEで登録を利用したほうが簡単になり登録率アップが期待できる上に、正確なメールアドレスの取得が可能になります。
通常フォーム | LINEアカウントで登録 | |
---|---|---|
STEP 01 | フォームを開く |
フォームを開く |
STEP 02 | メール、名前を手入力 メールアドレスの入力ミスがあった場合でもそのまま登録されてしまう。 |
LINEで登録ボタンを押す メールと名前はLINEから取得するので入力が不要でかつ正確なメールアドレスが取得できる。 |
STEP 03 | 送信ボタンを押す |
LINE連携で許可ボタンを押す |
STEP 04 | 登録完了 |
登録完了 |
・登録フォーム(シングルオプトイン)でLINE登録
登録フォームを開いて「LINE登録ボタン」を押すとLINEに登録してあるメールアドレス名前を自動取得してユーザー登録完了するタイプ
このLINE登録ボタン単体でも外部サイトに張り付け可能なのでYoutubeの概要欄やLPに直接埋め込む事が可能です。
→登録フォーム(シングルオプトイン)で登録する手順
・購入フォーム(登録時に決済を伴うタイプ)でLINE登録
購入フォームを開いて「LINE登録ボタン」を押すとLINEに登録してあるメールアドレス名前を自動取得してフォームに代入、引き続き決済情報を入力して購入完了するタイプ
→購入フォームで登録する手順
2 LINEアカウントで会員マイページのログイン
当システムの会員マイページのログインがLINEアカウントを利用して行えます。
ログインの際にLINEアカウントでユーザーを特定できますので、IDとパスワードの入力不要になります。
1 ログインページからワンボタンでログイン
ユーザーはIDとパスワードを入力することなく、マイページにログインできます。
2 LINEアプリを起動しタイムラインからログイン
友達登録された公式アカウントのトーク上に配置されたマイページログインボタンで、 IDとパスワード を入力することなく、マイページにログインできます。
→LINEアプリからログインする手順
3 既存会員にもLINE連携や友達登録を促進します
当システムの会員にLINE連携や友達登録を促進します。
→当システムの会員になっていてLINEの友達登録されていない場合はマイページのアカウントページでLINE連携や友達登録をお勧めします。
この機能は、デフォルトで非公開になっています。ステータス毎に表示非表示の設定が可能です。
LINEで友達になっている人で当システムに登録のない人のメールや名前をLINEから取得可能です。
→当システムのご利用以前にLINE公式アカウントで友達を集めている方にお勧めです。
LINE上だけでなくメールアドレスを取得すれば継続的に連絡可能になります。
こちらはLINEアプリからログイン&登録できるようにするを使います。
LINE連携を利用する場合の注意事項
友達登録によりユーザーからの問合せがLINEから入るようになります。
LINEの友達登録をすると、ユーザーは気軽にメッセージをLINEから送ることができるようになり、対応が増える可能性があります。対応はLINE公式アカウントの管理画面から返信できます。
LINEアプリの使い方など技術サポートが増える可能性があります。
LINEの使い方など、本来の業務ではない技術サポートを求められる可能性が高くなります。これを回避するために、当社の方でユーザー向けQ&Aを用意していますのでご活用ください。
タイムラインの操作関連はLINE公式アカウントの管理画面で行います。
LINEユーザーへの一斉配信やステップ配信などは、公式アカウントの管理画面から行えますので、当システムでは実装しておりません。
・ユーザーのタイムラインに投稿
・ステップ配信
・タイムライン上のログインボタンの設置
など
利用シーン(例)
Youtube動画の概要欄からの導線
動画を見たユーザーに概要欄に登録リンクがあることをお伝えします。
LP内に配置された、無料登録フォームを開きます。
無料登録フォーム内に設置されたLINE登録ボタンを押します。
登録しているメールへメール送信します。
会員マイページへ自動ログインします。
ログインした会員マイページ内のコンテンツを閲覧可能になります。
ランディングページからの導線
LP内に配置された、無料登録フォームを開きます。
または、LP内に直接LINE登録ボタンを設置することも可能です。
無料登録フォーム内に設置されたLINE登録ボタンを押します。
登録しているメールへメール送信します。
会員マイページへ自動ログインします。
ログインした会員マイページ内のコンテンツを閲覧可能になります。
QRコードからからの導線
QRコードには会員登録用のフォームURLが設定されています。
LP内に配置された、無料登録フォームを開きます。
または、LP内に直接LINE登録ボタンを設置することも可能です。
無料登録フォーム内に設置されたLINE登録ボタンを押します。
登録しているメールへメール送信します。
会員マイページへ自動ログインします。
ログインした会員マイページ内のコンテンツを閲覧可能になります。
事前準備 (一度だけ行う)
LINEの準備
LINE公式の説明を参考にお手持ちのスマホ(AndroidかiPhone)にLINEアプリをインストールしてください。
→LINEアプリのインストール
LINE公式アカウントとは?
LINE公式アカウントは、企業や店舗がLINE上にアカウントを作り、友だちとして登録されているユーザーにさまざまな情報を届けることができるサービスです。当システムとの連携を行う際に必要になります。
LINE公式アカウントの作り方を参考に作成してください
https://www.linebiz.com/jp/column/technique/20190418-3/
アカウントを取得したメールアドレス、パスワードは次の手順「当システムとの連携初期設定」で利用するLINEデベロッパー管理画面にも利用します。
LINE公式アカウント(無料)を取得し「LINE Official Account Manager」(管理画面)にログインできるところまで
LINE公式アカウントで取得したメールアドレスとパスワードでログインができます。
https://developers.line.biz/console/
ログイン後画面が英語の場合
チャネル(Messaging API)の作成
LINE認証時に公式アカウントを友達登録してもらうために必要なMessaging APIを作成します。
「Messaging APIを利用する」をクリックし、プロバイダーを作成、「同意する」をクリック。
※プロバイダーは後で変更はできません。プロバイダー設定・作成する際は十分に確認してください。
同意後、確認画面が表示されるので「OK」をクリックすると Messaging APIが有効になります。
以下の画面がで出る場合がありますので
①には当システムの環境設定で設定されている「個人情報の管理・取り扱いについて」記載のURLをご利用ください。
②は利用規約をご自身で用意してご記入ください(任意入力のためここでは飛ばしてもOK)
以下の画面になりますが設定は不要です。
LINE公式アカウントで取得したメールアドレスとパスワードでログインができます。
https://developers.line.biz/console/
特にMessaging APIの設定はありません。作成できていればこの手順は完了です。
チャネル(LINEログイン)の作成
LINEログインとLINEで会員登録を実装するための設定です。
LINE公式アカウントで取得したメールアドレスとパスワードでログインができます。
https://developers.line.biz/console/
チャネルの種類 | 入力済み | LINEログイン |
---|---|---|
プロバイダー | 入力済み | 会社名など |
地域 | 必須 | 日本を選択 |
チャネルアイコン | 任意 | 友達登録する際に表示されます |
チャネル名 | 必須 | サービス名などを入力 |
チャネル説明 | 必須 | サービス概要などを入力 |
アプリタイプ | 必須 | ウェブアプリを選択 |
メールアドレス | 入力済み | チャネルに関する重要なお知らせが、このメールアドレスに送信されます。 |
プライバシーポリシーURL | 任意 | 当システムで自動生成されたページを入力 |
サービス利用規約URL | 任意 | ない場合いは省略 |
LINE開発者契約 の内容に同意 | 必須 | チェックを入れる |
LINE ログインと書かれたチャネルが作成される
当システムの 運用設定>LINE連携設定に記載があります。
当システムの 運用設定>LINE設定に記載があります。
1,LINE公式アカウントで取得したメールアドレスとパスワードでログインができます。
https://developers.line.biz/console/
2,LINEログイン用のチャネルを開きます。
再度以下の内容について詳細に記載をすることをお勧めします。
チャネルアイコン | 任意 | 友達登録する際に表示されます。 サイズは500×500ピクセル https://www.canva.com/などでロゴ画像を簡単に作成することができます。 |
---|---|---|
チャネル名 | 必須 | サービス名などを入力 |
チャネル説明 | 必須 | サービス概要などを入力 |
プライバシーポリシーURL | 任意 | 当システムで自動生成されたページを入力します。 当システムの運用設定 >環境設定にある 「個人情報の管理・取り扱いについて」のURLを入力してください。 |
ユーザーがLINEアプリを認証と同時にLINEに登録されているメールアドレスを取得するための設定です。
「チャンネル基本設定」の詳細画面の下部にあります、「OpenID Connect」が表示されている下ある、「申請」ボタンをクリックしてください。
表示された申請内容にある「このアプリでは、ユーザー…」と「LINE User Data …」のチェックボックスにチェックを入れてください。
「スクリーンショット」には、メールアドレスの取得/利用目的が記載されたものをアップロードする必要があります。
当システムの作成済みのフォームを開き、「確認して、同意します。」が表示されている箇所をスクリーンショットを撮り申請してください。以下のような画像であれば問題ありません。
申請が完了すれば「申請済み」と表記されます。この表記がされていれば、LINEログインを使用してメールアドレスを取得できます。
ユーザーがLINEアプリを認証と同時に友達登録をするための設定です。
アプリの認証後も友達の登録は可能ですができる限り同時にさせたほうがユーザーの手間がかかりません。
LINEログインのチャネルは「非公開」のステータスで作成されます。
ステータスを「公開済み」に変更する事で管理者以外でも利用が可能になります。
友達追加のボタン設定
当システムの 運用設定>LINE設定を開きます。
LINEアカウントと連携済みだが友達が登録されていない場合にのみ表示されます。
LINEでログイン作成手順(一度だけ行う)
(ログインページからリンクする)ユーザーに案内するLINEのQ&Aページの作成
ユーザーから寄せられるであろうLINEアプリの使い方Q&Aをあらかじめ作成しましたので、スムーズにサービスを提供開始できます。
こちらは「よくある質問」機能をマイページ外でも見る事ができるリンクを発行しログイン前にユーザーに提供します。
(1)カテゴリ…質問を追加するカテゴリを選択します。
(2)質問…質問の内容を入力します。
(3)答え…質問に対する答えを入力します。
答えはhtmlが利用できますが、改行は
に変換されます。
↑で作成したURLは以下のログインページで利用します。
ログインページからLINEでログインできるようにする
作成したページの一般公開用URLの取得で取得したURLになります。
①初期状態に戻すにチェックを入れて LINEログインつきログイン画面にチェック
既に内容をカスタマイズしている場合には、上書きされますので別途保存しておいてください。
②保存します。
③ログイン画面はこちらからプレビューできます。
LINEアプリからログインできるようにする
1 会員ログインとします。
2 表示期間はなるべく長期の期間を入力
3 その他テキストで会員ログイン
4 表示する
5 メニューのテンプレートを選択します。ボタン画像にすると目立ちやすいです。
6 リンクを選択
7 当システムの「LINEログイン設定」のコールバックURLを入力します。
8 適切なテキストを入力します。
すぐに公開される場合もあります。
トーク画面を開くには公式アカウントを友達登録されている必要があります。
LINEアプリからログイン&登録できるようにする
そのユーザーを当システムの会員登録させたい方
リッチメニューの作成手順STEP3の7の手順の「コールバックURL」ではなく以下の「会員登録機能付きログインリンク」に変更することで利用が可能です。
【ご利用上の注意】
このリンクは登録フォーム機能の一部機能のため、登録フォームで指定されているステータスに登録されます。
以下の図の2の部分がステータスになります。
無料版、有料版など同一サービスのレベル違いで提供する場合には注意が必要で
無料版に登録するフォームに「会員登録機能付きログインリンク」を適用する場合は、無料版に登録があるか無いかを毎回ログインの度にチェックし、無料版がない場合には無料版が発行されますので、無料版を有料版にアップグレードした場合には、無料版、有料版2つのライセンスを持つことになります。
1,「会員登録機能付きログインリンク」で「無料版」に登録
2,「無料版」が「有料版」にアップグレード後に1を行う
3,新たに「無料版」が発行され「無料版」「有料版」2つのライセンスが存在することになる。
上記を踏まえおすすめの設定は?
「無料版」「有料版」とは別にすべてのサービスの元となる「LINE登録専用の会員」ステータスを作成します。
この会員にLINEで登録した後に、新規ライセンス発行で「無料版」「有料版」を発行すれば住み分けができます。
1,「会員登録機能付きログインリンク」で「LINE登録専用の会員」に登録
2,1を行っても「LINE登録専用の会員」は増えない
3,「無料版」「有料版」は新規ライセンス追加のフォームで提供
【リンクの取得方法】
(1)登録フォームを開きシングルオプトインであることを確認
(2)登録先のステータスを確認
(3)重複登録の制限をするにして一度保存します。
(4)LINE登録用ボタンを押して
(5)リンクを取得します。(リッチメニューのリンク先として利用してください。)
アカウントページへLINE連携ボタンを表示する
当システムの会員になっていてLINEの友達登録されていない場合はマイページのアカウントページでLINE連携や友達登録をお勧めします。
この機能は、デフォルトで非公開になっています。ステータス毎に表示非表示の設定が可能です。
LINEで会員登録するためのフォーム作成
登録フォーム(シングルオプトイン)でLINE登録
フォーム中のLINE登録ボタンを押すと、認証画面に遷移しますが、LINEの仕様でデフォルトでは友達登録をしないにチェックされていますので、注意書きをすることにより、友達登録の促進ができます。
(1)フォームのレイアウト設定を開きます。
(2)注意書きに文言を追加します。
(3)保存します。
(4)フォームに追加した文言が表示されます。
以下の文言をコピーしてお使いください。
LINEアカウントで登録が可能です。
(1)以下ボタンを押すと認証画面が開きます
(2)友達登録のチェックをしてください
(3)友達登録すると次回からログインが簡単にできます。
ぜひお友達登録を忘れずにお願いします!
登録完了ページに友達登録を再度お願いする文言です。
友達登録することによってLINEアプリからID、パスワード無しで簡単入室する事ができますが、
「友達登録してください」より「マイページへ手間なくアクセスするための設定」のような文言で案内すると登録の敷居が下がるためお勧めします。
(1)フォームのレイアウト設定(無料登録)設定を開きます。
(2)登録完了ページの追加文章(HTML可)に以下の文言に差し替え
★がついている部分はご自身の内容に書き換えてください。
<div class="topics_back">
<div align="center"><strong>ユーザー登録が完了しました!</strong></div>
<div align="center"><br />
LINEでご登録いただいておりますメールアドレスへ登録完了のメールを送信いたしました。 メール内容を必ずご確認ください。</div>
<div align="center">
<div class="panel panel-danger">
<div class="panel-heading"><b style="color:#ff0000;">【重要】マイページへ手間なくアクセスするための設定をおこなってください!</b></div>
<div class="panel-body" style="text-align: left;">以下のリンクから「★公式アカウント名★」のLINE公式アカウントのお友達登録をお願いします。<br />
お友達登録をするとLINEアプリから、ID、パスワードの入力せずに会員マイページへログインすることが出来ます。<br />
<br />
(1)以下リンクをスマートフォンで開いてください。<br />
「★公式アカウント名★」のLINE公式アカウントのお友達登録<br />
→ <a href="★お友達登録のリンク★" target="_top">★お友達登録のリンク★</a><br />
<br />
(2)利用許可をするとLINEアプリから、ID、パスワードの 入力せずに会員マイページへログインすることが出来ます。<br />
<br />
もし、すでに友達登録を済ませている場合には以下の方法で確認が可能です。<br />
(1)LINEアプリを開いて<br />
(2)トークから「★公式アカウント名★」<br />
が存在していたら、友達追加されています。<br />
<br />
なお、お友達の解除やトーク履歴の削除は<br />
以下のご案内ページから簡単操作で消去できますのでご安心の上ご登録をお願いします。<br />
<br />
<a href="★LINE連携ヘルプページURL★">LINE連携とは?</a></div>
</div>
</div>
<div style="text-align: center;">会員マイページは下記よりログインできます。<br />
↓<br />
<a href="%%login_url%%">ログイン</a></div>
</div>
(3)メール内容を以下に差し替え
★がついている部分はご自身の内容に書き換えてください。
%%name%%さん
%%admin_name%%です。
ただいま【%%status%%】への登録手続きが完了いたしましたのでメールいたしました。
【重要!】マイページへ手間なくアクセスするための設定をおこなってください!
(1)以下リンクをスマートフォンで開いてください。
「★公式アカウント名★」のLINE公式アカウントのお友達登録
→ ★お友達登録のリンク★
(2)利用許可をするとLINEアプリから、ID、パスワードの
入力せずに会員マイページへログインすることが出来ます。
もし、すでに友達登録を済ませている場合には以下の方法で確認が可能です。
(1)LINEアプリを開いて
(2)トークから「★公式アカウント名★」
が存在していたら、友達追加されています。
なお、お友達の解除やトーク履歴の削除は
以下のご案内ページから簡単操作で消去できますので
ご安心の上ご登録をお願いします。
★LINE連携のヘルプページへのリンク
★
──────────
■会員マイページの通常のログイン手順
・LINEアカウントでログインする方法
(1)ログインURLにアクセスします。
→%%login_url%%
(2)ログインページの「LINEでログイン」ボタンを押します。
(3)マイページへログインします。
・メールアドレスでログインする方法
(1)ログインURLにアクセスします。
→%%login_url%%
(2)以下のログイン情報でログインをお願いします。
アカウントID:%%id%%
パスワード:%%password%%
※ログイン後、覚えやすいパスワードに変更が可能です。
※万が一、パスワードを忘れた場合は
ログインURLから再設定手続きを行ってください。
──────────
今後ともよろしくお願いします。
%%footer%%
フォームの基本設定の開始ページURLのQRコードボタンを押すとQRコードが表示されますのでスマホのカメラ機能でQRコードを読み取ってください。
フォームの登録テストで一度でも行った場合「友達登録などのデータをすべて消去」する手順が必要です。
こちらの手順で以下の内容を削除してから再度行ってください。
→ LINEで会員登録した時に得られるデータとその削除方法
フォームのテストを行う際には、ブラウザにセッション記録をリセットするため必ずシークレットモードで行うようにしてください。(これは管理者のみがフォームをテストを行う際に必要な操作でユーザーには求めない操作になります。)
以下はCrome(android)の場合のシークレットモードの開き方になりますがsafariの場合はプライベートブラウズという名前で存在しています。
シークレットモードで開いたフォームの場合、下記のような認証画面にならない場合があります。
その場合には、出てきた画面で「アプリで開く」というリンクを押すとLINEアプリが立ち上がり認証画面が出てきます。
登録が完了すると「会員のLINEアプリ」や「当システム」にデータが記録されます。
再度LINE登録のテストを行う際には以下のデータをしっかり消してから行う必要があります。
→ LINEで会員登録した時に得られるデータとその削除方法
購入フォーム(登録時に決済を伴うタイプ)でLINE登録
フォームは新規ライセンス追加で登録時に決済を伴うタイプを選択してください。
フォームの基本設定の開始ページURLのQRコードボタンを押すとQRコードが表示されますのでスマホのカメラ機能でQRコードを読み取ってください。
既に連携済みの場合には認証画面はスキップします。
登録が完了すると「会員のLINEアプリ」や「当システム」にデータが記録されます。
再度LINE登録のテストを行う際には以下のデータをしっかり消してから行う必要があります。
→ LINEで会員登録した時に得られるデータとその削除方法
フォームの設置方法
LINE登録ボタンを設置する方法は以下の4パータンがありますが、媒体によっては設置できないパターンがありますのでご注意ください。
設置パターン
(1)LINE連携設定済みの基本設定を開きます。
(2)開始ページURLをお使いください
(1)LINE連携設定済みのシングルオプトインの基本設定を開きます。
(2)LINE登録用URLボタンを押します。
(3)ポップアップで表示されるURLをお使いください。
(1)フォームの基本設定を開きます。
(2)独自のランディングページを利用にチェックをいれ
(3)フォームのhtmlソースをランディングページに埋め込んでください。
タグの取得手順は
→LINEアプリからログイン&登録できるようにする
のタグ取得をご覧ください。
媒体別の設置可能パターン
〇は推奨 △は非推奨(一般的ではない使い方などの理由) ×は利用不可(正常に挙動しません)パターン1 | パターン2 | パターン3 | パターン4 | |
---|---|---|---|---|
Youtube動画の概要欄からの導線 | 〇 | × | × | × |
LPに設置 | 〇 | 〇 | 〇 | △ |
LINEアプリのリッチメニューに設置 | △ | × | × | 〇 |
QRコード用(主に紙媒体など) | 〇 | 〇 | × | △ |
LINEで会員登録した時に得られるデータとその削除方法
会員がLINEで登録した時(アプリを認証した時)に「会員のLINEアプリ」や「当システム」にデータが記録されます。
再度LINE登録のテストを行う際には以下のデータをしっかり消してから行う必要があります。
追加される項目 追加される場所 |
データ削除方法 |
---|---|
友だち追加 ホーム > 友だち >公式アカウント |
友だちの削除手順 1 LINEアプリ起動 2 ホーム画面の友だちをタップ 3 公式アカウントをタップ 4 該当の公式アカウントを長押し 5 削除を選択 |
トークが追加 トーク |
トークの削除手順 1 LINEアプリ起動 2 画面下のトークをタップ 3 トーク画面で該当のトークを長押し 4 削除を選択 |
連動アプリが追加 ホーム(歯車) > アカウント >連動アプリ |
連動アプリ削除手順 1 LINEアプリ起動 2 ホーム画面右上の歯車をタップ 3 アカウントをタップ 4 連動アプリをタップ 5 該当のアプリをタップ 6 連動を解除 |
(1)ライセンス一覧を開き詳しい検索条件ボタンを押す
(2)アカウント情報検索の「開く」ボタンを押す
(3)LINE連携済みにチェックをして検索
↓
(1)ライセンス名をクリック
(2)ステータスを退会済みにする
(3)保存するボタンを押す
(1)会員データを削除するにチェック
(2)保存するボタンを押す
(1)ライセンス一覧を開き詳しい検索条件ボタンを押す
(2)アカウント情報検索の「開く」ボタンを押す
(3)LINE連携済みにチェックをして検索
↓
(1)アカウント名をクリック
(2)連携解除にチェックを入れる
(3)登録・変更するボタンを押す
Q&A
A 登録フォーム一覧からさらに詳しくを押すと「LINE登録あり」にして検索すると出てきます。
当システムに登録されているメールアドレス「aaa@gmail.com」
LINEに登録されているメールアドレス「bbb@gmail.com」
だった場合で
LINE連携の場所は以下の2点あり別々の挙動になります。
1,ログイン画面でLINE連携ボタンを押す
→「システムに登録がありません」の旨メッセージが表示されログインできません
2,会員マイページにログイン後、アカウント情報画面でLINE連携ボタンを押す
→LINE連携され、次回からLINEログインが可能になります。
ただし、LINEに登録されているメールアドレスは取得せず、システムに登録済みのメールアドレスがそのままになります。