Step4. LINE ID連携ボタンを設置する

1 本記事について
- 1.1 LINE ID連携ボタンとは
2 LINE ID連携ボタンを設置する
- 2.1 ❶ LINE連携用リンクを埋め込む
- 2.2 ❷ LINE ID連携タグをONにする
3 LINE連携データを確認する

本記事について

本記事では、LINE ID連携の実装手順の「Step4 LINE ID連携ボタンを設置する」について紹介します。「Step4 LINE ID連携ボタンを設置したい」では、ボタン要素のhref属性に埋め込む「LINE ID連携用リンク」を確認する手順と、LINE ID連携データを確認する手順について説明します。

LINE ID連携ボタンとは

LINE ID連携ボタンとは、ボタン要素のhref属性にb→dashから発行されるLINE ID連携用リンクを埋め込んだものです。ユーザーがLINE ID連携ボタンをクリックすると、「ログイン画面」に遷移し、その後「アカウント許諾画面」に遷移します。

LINE ID連携ボタンを設置する

LINE ID連携するために必要な「LINE ID連携ボタン」を設置する手順を説明します。

❶ LINE連携用リンクを埋め込む

「詳しく見る」をクリックします

「LINE連携用リンク」をコピーします

LINE IDを連携するボタンのHTMLソースコードのhref属性に「[BD_IDCONNECT_LINE_URL_1]」を貼り付けます

下記は実際に入力するソースコードの例です。

 <div class="lineid-button">
  <button class="idbtn" type="button">
   <a href=[BD_IDCONNECT_LINE_URL_1]>LINE ID連携</a>
  </button>
 </div>

※「[BD_IDCONNECT_LINE_URL_1]」の「1」の部分は、貴社のLINE連携数によって値が異なりますのでご注意ください

上記ソースコードは『LINE ID連携をする』というテキストに、ログイン画面に遷移するリンクが差し込まれたテキストリンクを生成するコードになります。ユーザーは『LINE ID連携をする』をクリックすることで、ログイン画面に遷移することができます。

ボタンに設置するソースコードは「””」で囲う必要はありません

一般的にソースコードを設置する時にダブルクォーテーション（””）を用いることがありますが、b→dashの指定したソースコード（上記に記載）をボタンに設置する際は、ソースコードをダブルクォーテーション（””）で囲う必要はありません。

❷ LINE ID連携タグをONにする

「LINE ID連携タグ」をクリックします

「OFF」をクリックし、「ON」にします

これでLINE ID連携の実装は完了です！

LINE連携データを確認する

「b→dashデータ」内の「LINE ID連携データ」からLINE IDを用いた情報を確認する方法をご紹介します。また、こちらのデータファイルは、LINE ID連携タグの初期有効化のタイミングで自動生成されます。
※ユーザーがLINE ID連携を複数回実施した場合、「LINE ID連携データ」内にLINE ID連携を実施した回数分、ユーザーのレコードが作成されます
例えば、ユーザーがLINE ID連携を3回実施した場合、「LINE ID連携データ」に3レコード作成されます