見出し画像

【転載】Shopify Plusを使わずにShopifyのCustomer IDとLINEのユーザーIDを連携させる方法

片岡@Empty Dressy

Empty Dressyの実例を交え、Shopify Plusを使わない連携方法をご紹介します。

※ この記事は別サイトで2021/3/20に投稿されたものを、2021/10/17にnoteに移行したものになります。

やりたいこと

Shopifyで管理する顧客情報の一部としてLINEの情報を保存することが、この記事のゴールです。

画像1

LIFF

Shopifyでは、LINE等外部のプラットフォームとセキュアに連携するためには、基本的にShopify Plusのプランに入ると使えるMultipass APIというしくみを使う必要があります。

前職でもMultipass APIの使用経験はあったので、エンジニアがいれば、Multipass APIを使うと容易にShopifyと連携できるという認識はありました。

ただ、Shopify Plusは月に2,000ドルかつ年契約で、2020年末にリリースされたソーシャルPLUSというアプリも月に800ドルかかるので、導入のハードルがとても高いです。

そこで考えたのが、LINEが提供するウェブアプリのプラットフォームであるLIFF（LINE Front-end Framework）の活用です。

Empty Dressyでは、5つのLIFFアプリを立ち上げることで、ユーザーにはShopifyを感じさせずに決済をしていただきつつ、LINEのIDを取得し、それをCRMに活用しています。

画像2

Shopifyで作成したショップのURLをLIFFアプリとして登録すると、LIFF URLが生成されます。

LIFFアプリでは、若干のJavaScriptを書くことで、LINEのユーザーIDを取得することができます。

LIFFをご存知ない方は、下記の公式ドキュメントをご覧ください。

はじめに、LIFFの便利機能がつまったLIFF SDKを使えるようにするため、<head>タグ内に以下のコードを入れます。

<!-- /Layout/theme.liquid -->

<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>

Customer note

Shopifyの顧客情報にLINEのユーザーIDを追加するために、Customer noteを使います。

Customer noteをご存知ない方は、下記のShopifyジャパンの公式ブログをご覧ください。

「Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！」

今回は「line-user-id」という独自のフィールドを追加し、そこにLIFF経由で取得するLINEのIDを登録できるようにします。

ユーザーには「line-user-id」を意識してもらう必要はないので、表示はさせておらず、下記のようにアカウントを登録することになりますが、裏側では「line-user-id」として、LINEのユーザーIDが登録されるようにします。

2_アカウントを登録_white

同ファイルに<script>タグを追加し、下記のコードを書くことで、LIFFのSDKを使い、上記でおいた<input>タグの値として、LINEのユーザーIDが入ることで、顧客情報としてLINEのユーザーIDが保存できるようになります。

// /Templates/customers/register.liquid

const lineUserIdInput = document.querySelector('#line-user-id');
liff
 .init({
   liffId: ''
 })
 .then(() => {
   liff.getProfile()
     .then((profile) => {
       lineUserIdInput.value = profile.userId;
     })
     .catch((err) => {
       console.error(err);
     })
 })
 .catch((err) => {
   console.error(err);
 })

LIFF経由でアカウントを登録しない人はどうするの？

Empty Dressyでは、レンタルのやりとりを全てLINEで行っているので、リッチメニューからLIFFでアカウントを登録する以外の導線を消しています。

それでも極稀に、URLの直打ちか何かで、通常のWebブラウザから会員登録をしてくる猛者もいるのですが、その場合は、自動的にアカウントを削除し、その旨をメールするという運用にしています。

通常のECサイトだと、全てをLINE経由にするという判断はなかなかしづらいかと思いますので、同様のしくみで後からでもLINEの情報を登録できるような機能を準備しつつ、LINEの情報を登録することにインセンティブを持たすという感じかなと思います。

いいなと思ったら応援しよう！