ストアにLINE友だち追加CTAを表示する

LINE友だち追加CTAを使うと、Shopifyストアのページに友だち追加とLINE連携の導線を出せます。文言や表示条件はLumoの管理画面で決め、Shopifyのテーマでオンにするだけで、お客様の状態に合わせた案内が自動で切り替わります。

LINE友だち追加CTAでできること

ストアを訪れた人に、その場でLINEの友だち追加やID連携をしてもらうための導線を4種類から選んで設置できます。

表示される内容は、お客様の状態によって自動で切り替わります。

スマホではボタンを押すとLINEアプリが開き、そのまま友だち追加や連携が終わります。PCではQRコードを主役にして、スマホで読み取ってもらう形で案内します。QRコードの横には 「PCで続ける →」 も出るため、PCのブラウザでLINEにログインして進むこともできます。

CTAごとにQRコードを自動で作成するため、どのCTAから友だちが増えたかを流入経路として記録できます。記録した経路は、レポートやワークフローの条件にそのまま使えます。

この機能を使うための条件

CTAを出すには、Shopify連携とLINEログインの設定が済んでいる必要があります。

• ShopifyストアとLINE公式アカウントの連携が完了していること
• LINE公式アカウントにLINEログインの設定が済んでいること（ID連携に必要です）
• Shopifyのテーマエディタを編集できること（アプリ埋め込みをオンにするために使います）

Klaviyoなど他のツールのポップアップを使っていても、併用できます。位置を分ければ、画面上で重なりません。

CTA一覧を開く

CTAの一覧は、Shopify連携の設定画面の中にあります。

ナビゲーションメニューから対象のLINE公式アカウントを選び、「顧客データ管理」 > 「Shopify」 を開きます。Shopify連携の画面で、サイドメニューの 「CTA」 をクリックします。

一覧には、CTAごとに名前・種類・状態と、直近30日の表示回数・クリック数・友だち追加数・ID連携数が並びます。新しく作る場合は 「CTAを作成」 をクリックします。

CTAを作成する

CTAの作成は、種類と文言、特典、表示条件、計測の順に設定して 「CTAを保存」 で完了します。設定を変えると右側のプレビューが同時に変わるため、見え方を確かめながら進められます。

基本設定

文言

見出し・本文・ボタンの文言は、空欄のままでもLumoの既定文言が表示されます。「編集する言語」 を切り替えると、日本語・英語・繁体字中国語・タイ語をそれぞれ編集できます。訪問者のブラウザの言語に合わせて自動で切り替わります。

文言は次の2組を用意します。

• 友だち追加（未ログインの訪問者向け）: ログインしていないお客様に出す文言です
• LINE連携（ログイン済みのお客様向け）: ログイン済みのお客様に出す、友だち追加と連携を同時に案内する文言です

ボタンの下に出す小さな 「注記」 と、ポップアップの上部に出す 「画像」 も設定できます。

特典

「特典」 で 「クーポン」 を選ぶと、クーポンキャンペーンと 「特典の表示名」 を設定できます。表示名は「10%OFFクーポン」のように、お客様に見せる名前です。本文の中の {coupon} は、この表示名に置き換わります。

CTAが行うのは、特典の案内までです。クーポン本体は、CTAに自動で作られるQRコードの応答メッセージか、ワークフローのメッセージで届けます。メッセージには、キャンペーンのキーに対応する変数（例: キーが welcome10 なら {{ shopify.discount_code_welcome10 }}）を入れます。

表示条件

同じページにフローティングのCTAを別に置いている場合、閉じたあとの小さなボタンは出しません。ポップアップは1ページに1つだけ表示します。

計測

「コントロール群（非表示）の割合」 を設定すると、効果測定のために一部の訪問者にはCTAを出しません。0%にすると無効になります。

「流入経路（QRコード）」 には、このCTA用に自動で作られたQRコードが表示されます。「QRコードを開く」 から、応答メッセージなどの設定を変えられます。

プレビュー

右側のプレビューでは、「プレビューする訪問者」 で「ログインしていない」「ログイン済み・友だち追加なし」「ログイン済み・ID連携なし」「ID連携済み」を切り替え、「デバイス」 でスマホとPCを切り替えて、実際の見え方を確認できます。

Shopifyのテーマで表示をオンにする

Lumoで作ったCTAは、Shopifyのテーマエディタでアプリ埋め込みをオンにすると、ストアに表示されます。

一度オンにすれば、フローティング・ポップアップ・バーはLumo側の設定だけで出し分けられます。アプリ埋め込みの 「フローティングボタンの位置」 は、テーマ側で位置を固定したいときに使います。「接続先」 は通常「本番」のままにしてください。

インラインを配置する

インラインの種類は、テーマエディタで表示したいセクションにブロック 「LINE友だち追加（Lumo）」 を追加すると表示されます。ブロックを置いた位置に、そのページの表示条件に合うインラインのCTAが自動で出ます。ブロック側に設定する項目はありません。

PCでQRコードを読み取ったときの動き

PCで見ているお客様には、QRコードをスマホで読み取ってもらう形で案内します。

ストアにログインしているお客様がQRコードを読み取ると、スマホ側で友だち追加とID連携が同時に完了します。ログインしていない場合は友だち追加だけを行い、ID連携は行いません。安全のため、QRコードはポップアップやパネルを開くたびに新しく発行し、10分で無効になります。

QRコードを読み取るのが難しい場合は、「PCで続ける →」 からPCのブラウザでLINEにログインして進めます。

結果を確認する

CTAの効果は、一覧の数値とレポート、ワークフローの条件で確認・活用できます。

• 一覧の数値: 直近30日の表示回数・クリック数・友だち追加数・ID連携数を、CTAごとに確認できます
• 友だち追加経路: CTAごとのQRコードが流入経路として記録されるため、レポートの友だち追加経路で「どのCTAから増えたか」が分かります
• ワークフローの条件: 流入経路を条件にして、そのCTAから追加された友だちにだけ特典のメッセージを送るといった使い方ができます
• 外部サービスへの反映: Klaviyo・HubSpotと連携している場合、流入経路のプロパティにも反映されます

うまくいかないときは

CTAが出ないときは、テーマのアプリ埋め込みと表示条件から順に確認します。