Webサイトに友だち追加のCTAを設置する

友だち追加CTAを使うと、自社のWebサイトにLINEの友だち追加の導線を出せます。文言や表示条件はLumoの管理画面で決め、サイトにトラッキングコードを貼り付けて表示します。フローティング・ポップアップ・バー・インラインの4種類から選べます。

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

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

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

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

Shopifyストアに出す場合は、お客様のログイン状態に合わせて、友だち追加に加えてID連携の案内まで自動で切り替わります。ストアでの使い方は「ストアにLINE友だち追加CTAを表示する」の記事で説明しています。

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

CTAを出すには、Starterプラン以上とLINEログインの設定が必要です。

• Starterプラン以上のワークスペースであること
• LINE公式アカウントにLINEログインの設定が済んでいること（友だち追加の導線に使います）
• Webサイトの各ページにトラッキングコードを貼り付けられること（制作会社に依頼しても構いません）

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

CTA一覧を開く

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

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

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

CTAを作成する

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

基本設定

CTAの名前と種類、表示する位置を決めます。

文言

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

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

特典

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

CTAが行うのは、特典の案内までです。クーポンなどの特典そのものは、CTAに自動で作られるQRコードの応答メッセージか、ワークフローのメッセージで届けます。

表示条件

どのサイト・どのページに、いつCTAを出すかを決めます。

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

計測

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

「流入経路」 には、保存後にこのCTA用の経路が 「自動作成」 として表示されます。このCTAから追加された友だちは、経路「Webサイトの友だち追加CTA」・接点「CTAの名前」として記録されるため、レポートやワークフローの条件にそのまま使えます。

友だち追加の直後に送るあいさつや特典のメッセージは、「あいさつ・特典メッセージを設定」 から設定します。QRコードの応答メッセージの編集画面が開くため、メッセージを追加して保存します。経路そのものの設定は 「経路の詳細（QRコード）を開く」 から確認できます。

設置

「設置」 には、サイトに貼り付けるトラッキングコードが表示されます。

• トラッキングコード: 「コピー」 ボタンでコピーして、「表示するサイト」の各ページの </body> タグの直前に貼り付けます。コードはワークスペース共通のため、すでに貼り付け済みのサイトでは追加の作業はありません
• インラインの貼り付けHTML: 種類でインラインを選ぶと表示されます。インラインを表示したい位置に、このHTML（<div data-lumo-cta="inline"></div>）を貼り付けます

プレビュー

右側のプレビューでは、「デバイス」 でスマホとPCを切り替えて、実際の見え方を確認できます。

サイトにトラッキングコードを貼り付ける

CTAを保存したら、「表示するサイト」に登録したサイトの各ページにトラッキングコードを貼り付けます。

トラッキングコードはワークスペース設定 「トラッキング」 にあるものと同じです。ワークスペース設定で 「指定したサイトだけでトラッキングする」 をオンにしている場合は、「トラッキング対象サイト」 に登録したサイトにだけCTAが出ます。トラッキングコードの役割と設置の詳しい手順は「トラッキングコードの設定」の記事で説明しています。

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

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

QRコードを読み取ると、スマホのLINEアプリで友だち追加が完了します。Webサイトではお客様のログイン状態が分からないため、ID連携は行いません。安全のため、QRコードはポップアップやパネルを開くたびに新しく発行します。

QRコードを読み取るのが難しい場合は、「PCで続ける →」 からPCのブラウザでLINEにログインして進めます。友だち追加が終わると元のページに戻り、そのブラウザではCTAを表示しなくなります。

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

結果を確認する

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

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

うまくいかないときは

CTAが出ないときは、表示するサイトの登録とトラッキングコードの貼り付けから順に確認します。