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

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

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

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

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

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

CTA経由で追加された友だちは、流入経路 「Webサイトの友だち追加CTA」 として記録されます。接点にはCTAの設置名が記録されるため、どのCTAから増えたかまで分かります（仕組みとしては、CTAごとに自動で作成されるQRコードが設置に紐づきます）。あわせて、追加が始まったページのURLも記録されます（スマホでボタンから進んだ場合も対象です）。記録した経路・接点・ページは、レポートやワークフロー・セグメントの条件にそのまま使えます。

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

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

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

Klaviyoなど他のツールのポップアップと併用できます。表示位置とタイミングを調整し、スマホとPCのプレビューで重なりがないか確認してください。

ストア以外の自社サイト（LPなど）にも同じCTAを出せます。CTAの 「表示するサイト」 にサイトのURLを追加し、そのサイトの各ページにトラッキングコードを貼り付けます。ストア以外のサイトでは友だち追加の案内だけを出します。手順は「Webサイトに友だち追加のCTAを設置する」の記事で説明しています。

CTA一覧を開く

CTAの一覧は、LINE公式アカウントのサイドメニューにあります。

ナビゲーションメニューから対象のLINE公式アカウントを選び、サイドメニューの 「CTA」 をクリックします（「QRコード」 のすぐ下にあります）。

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

CTAを作成する

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

基本設定

文言

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

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

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

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

特典

「特典」 で 「クーポン」 を選ぶと、クーポンキャンペーンと 「特典の表示名」 を設定できます。「表示名のみ」 を選ぶと、キャンペーンを選ばずに表示名だけを設定できます（特典は自分で用意したメッセージで届けます）。表示名は「10%OFFクーポン」のように、お客様に見せる名前です。本文の中の {coupon} は、この表示名に置き換わります。

CTAが行うのは、特典の案内までです。クーポン本体は、CTAに自動で作られるQRコードの応答メッセージか、ワークフローのメッセージで届けます。クーポンキャンペーンを選んだ場合は、メッセージにキャンペーンのキーに対応する変数（例: キーが welcome10 なら {{ shopify.discount_code_welcome10 }}）を入れます。「表示名のみ」 の場合は、自分で用意したメッセージで特典を送ります。

表示条件

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

計測

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

「流入経路」 には、このCTA用の経路が 「自動作成」 として表示されます。友だち追加の直後に送るあいさつや特典のメッセージは、「あいさつ・特典メッセージを設定」 から設定します。経路そのものの設定は 「経路の詳細（QRコード）を開く」 から確認できます。

プレビュー

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

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

Lumoで作成したCTAは、表示するテーマで「Lumo LINE CTA」のアプリ埋め込みを有効にすると表示されます。

英語・日本語のエディタでは、表示スイッチの項目名と説明を英語・日本語の併記で案内します。文言・特典・表示条件とフローティングやバーの位置は、Lumoの対象LINE公式アカウントの「CTA」で設定します。テーマ側に位置や接続環境を選ぶ設定はありません。

テーマごとに有効化が必要です。公開中のストアで表示するには公開テーマで設定し、テーマを変更したときは新しいテーマでも有効にしてください。

インラインを配置する

Lumoで種類をインラインにしたCTAを作成し、表示条件を設定します。テーマエディタで表示したいページを開き、アプリブロックに対応したセクションのブロック追加から「Lumo LINE CTA」を配置し、保存します。アプリブロックに対応しないセクションには配置できません。

インラインでも「Lumo LINE CTA」のアプリ埋め込みと表示スイッチの両方が有効である必要があります。配置場所には、そのページの表示条件に合うインラインのCTAが表示されます。ブロック側では文言や表示条件を設定しません。

「Lumo LINE ID Link」は、新しい購入完了・注文状況ページと、新しいお客様アカウントのプロフィール・注文一覧に設置できます。従来のお客様アカウントのマイページには設置できません。 設置手順はShopify連携方法を参照してください。

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

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

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

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

Free・Starterプランでは、PC向けのQRコード表示に「Powered by Lumo」の表記が入ります。

結果を確認する

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

• 一覧の数値: 直近30日の表示回数・クリック数・友だち追加数・ID連携数を、CTAごとに確認できます
• 友だち追加経路: CTA経由の友だちは経路 「Webサイトの友だち追加CTA」、接点はCTAの設置名として記録されます。レポートの友だち追加経路で「どのCTAから増えたか」が分かります
• 獲得ファネルレポート: レポートの獲得ファネルデータセットで、CTAの表示→クリック→友だち追加→ID連携→注文の到達数を、経路・接点の軸で分析できます。ページの軸も使えます（友だち追加以降が対象で、CTAの表示・クリックにはページの情報がありません）
• ワークフロー・セグメントの条件: 経路の種別・QRコード（CTA設置）・追加が始まったページURLを条件にして、そのCTAから追加された友だちにだけ特典のメッセージを送るといった使い方ができます
• 外部サービスへの反映: Klaviyo・HubSpotと連携している場合、最初の友だち追加の経路とページが 「LINE Acquisition Route」・「LINE Acquisition Page」 プロパティに反映されます

うまくいかないときは

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