使用 LINE 加好友 CTA，可以在 Shopify 商店的頁面上放置加入好友與 LINE 連結的導引。文案與顯示條件在 Lumo 管理畫面設定，在 Shopify 佈景主題中開啟後，導引就會依訪客的狀態自動切換。
LINE 加好友 CTA 能做什麼
可以從 4 種類型中選擇，讓造訪商店的人當場加入 LINE 好友或完成 ID 連結。
| 類型 | 呈現方式 | 適合的情境 |
|---|---|---|
| 「浮動按鈕」 | 常駐在畫面角落的按鈕。在 PC 上點擊會顯示 QR Code | 想在所有頁面低調地提醒時 |
| 「彈出視窗」 | 在一定時間後或捲動到指定比例時顯示的視窗，可關閉 | 想突顯優惠、推動加入好友時 |
| 「橫幅」 | 固定在畫面頂部或底部的橫條 | 想讓提醒隨時可見，又不干擾瀏覽時 |
| 「內嵌區塊」 | 嵌入頁面任意位置的區塊（在佈景主題編輯器中放置） | 想放在商品說明或頁尾等固定位置時 |
顯示的內容會依訪客狀態自動切換。
| 訪客狀態 | 顯示的導引 | 點擊後的動作 |
|---|---|---|
| 尚未登入商店 | 加入好友 | 前往 LINE 的加入好友流程 |
| 已登入，尚未加入好友 | 加入好友與 ID 連結 | 加入好友的同時，將 Shopify 顧客資料與 LINE 連結 |
| 已登入，且此瀏覽器已知是好友 | ID 連結 | 一次點擊即完成連結 |
| 已連結 ID | 不顯示 | — |
在手機上點擊按鈕會開啟 LINE 應用程式，並直接完成加入好友或連結。在 PC 上則以 QR Code 為主，引導訪客用手機掃描。QR Code 旁會顯示「在 PC 上繼續 →」，也可以在 PC 的瀏覽器登入 LINE 後繼續。
每個 CTA 都會自動建立專屬的 QR Code，因此可以將「哪個 CTA 帶來了好友」記錄為流量來源。記錄的來源可直接用於報表與工作流程的條件。
使用此功能的條件
要顯示 CTA，需要先完成 Shopify 整合與 LINE Login 的設定。
- Shopify 商店已與 LINE 官方帳號完成整合
- LINE 官方帳號已完成 LINE Login 設定（ID 連結需要）
- 可以編輯 Shopify 的佈景主題編輯器（用來開啟應用程式嵌入）
即使正在使用 Klaviyo 等其他工具的彈出視窗，也可以同時使用。只要分開位置，畫面上就不會重疊。
開啟 CTA 清單
CTA 清單位於 Shopify 整合的設定畫面中。
在導覽選單中選擇目標 LINE 官方帳號，開啟「顧客資料管理」>「Shopify」。在 Shopify 整合畫面中，點擊側邊選單的「CTA」。
清單中會列出每個 CTA 的名稱、類型、狀態，以及最近 30 天的顯示次數、點擊次數、加入好友數與 ID 連結數。要新增時，點擊「建立 CTA」。
建立 CTA
建立 CTA 時，依序設定類型與文案、優惠、顯示條件、成效衡量，最後點擊「儲存 CTA」即完成。變更設定時右側的預覽會同步更新，可以一邊確認外觀一邊進行。
基本設定
| 設定項目 | 說明 |
|---|---|
| 「CTA 名稱」 | 管理用的名稱，不會顯示在商店 |
| 「類型」 | 從浮動按鈕、彈出視窗、橫幅、內嵌區塊中選擇 |
| 「位置」 | 浮動按鈕可選右下或左下，橫幅可選頂部或底部 |
文案
標題、內文、按鈕文字留空時，會顯示 Lumo 的預設文案。切換「編輯的語言」可分別編輯日文、英文、繁體中文與泰文，並依訪客瀏覽器的語言自動切換。
文案分為以下兩組。
- 加入好友（未登入的訪客）：顯示給尚未登入的顧客
- LINE 連結（已登入的顧客）：顯示給已登入的顧客，同時引導加入好友與連結
也可以設定按鈕下方的小字「備註」，以及彈出視窗上方的「圖片」。
優惠
在「優惠」選擇「優惠券」後，可設定優惠券活動與「顯示給訪客的優惠名稱」。優惠名稱是顯示給顧客的名稱，例如「10% 折扣優惠券」。內文中的 {coupon} 會替換為此名稱。
CTA 只負責宣傳優惠。優惠券本身由 CTA 自動建立的 QR Code 回應訊息，或工作流程的訊息發送。請在訊息中加入對應活動識別鍵的變數（例如識別鍵為 welcome10 時，使用 {{ shopify.discount_code_welcome10 }}）。
顯示條件
| 設定項目 | 說明 |
|---|---|
| 「頁面類型」 | 從首頁、商品、商品系列、購物車、一般頁面、部落格、文章、搜尋中選擇。未選擇時顯示於所有頁面 |
| 「網址包含」 | 每行一筆。只在網址包含該文字的頁面顯示 |
| 「排除的網址」 | 每行一筆。指定的網址不顯示 |
| 「顯示時機」 | 從立即顯示、延遲後顯示、捲動到指定比例時顯示中選擇（主要用於彈出視窗） |
| 「目標裝置」 | 全部、僅手機、僅 PC |
| 「顯示頻率」 | 關閉後不再顯示的天數，以及同一次造訪是否僅顯示一次 |
| 「關閉後」 | 彈出視窗與橫幅關閉後的動作。選擇「保留為浮動按鈕（預設）」時，畫面角落會留下小按鈕，隨時可以重新開啟。選擇「不顯示」時，在不再顯示的天數過去前都不會出現。保留時可在「浮動按鈕位置」選擇右下或左下 |
若同一頁面另外放置了浮動按鈕類型的 CTA，關閉後的小按鈕不會顯示。彈出視窗每頁只顯示一個。
成效衡量
設定「對照組（不顯示）比例」後，為了衡量成效，會對部分訪客不顯示 CTA。設為 0% 即停用。
「流量來源（QR Code）」會顯示為此 CTA 自動建立的 QR Code。從「開啟 QR Code」可以變更回應訊息等設定。
預覽
在右側的預覽中，可用「預覽對象」切換「未登入」「已登入但尚未加入好友」「已登入但尚未連結 ID」「已連結 ID」，並用「裝置」切換手機與 PC，確認實際的呈現方式。
在 Shopify 佈景主題中開啟顯示
在 Lumo 建立的 CTA，只要在 Shopify 佈景主題編輯器中開啟應用程式嵌入，就會顯示在商店。
| 步驟 | 操作 |
|---|---|
| 1 | 在 Shopify 管理介面開啟「網路商店」>「佈景主題」>「自訂」 |
| 2 | 在左側面板開啟「應用程式嵌入」 |
| 3 | 開啟「Lumo LINE 加好友」的「顯示 LINE 加好友 CTA」 |
| 4 | 點擊「儲存」 |
開啟一次之後，浮動按鈕、彈出視窗、橫幅都只需在 Lumo 端設定即可切換。應用程式嵌入的「浮動按鈕位置」用於在佈景主題端固定位置。「連線環境」通常維持「正式」即可。
放置內嵌區塊
內嵌區塊類型的 CTA，會在佈景主題編輯器中將區塊「LINE 加好友（Lumo）」加入想顯示的區段後出現。放置區塊的位置會自動顯示符合該頁面顯示條件的內嵌區塊 CTA。區塊本身沒有需要設定的項目。
在 PC 上掃描 QR Code 時的動作
對於在 PC 上瀏覽的顧客，會引導用手機掃描 QR Code。
已登入商店的顧客掃描 QR Code 後，會在手機端同時完成加入好友與 ID 連結。未登入時只會加入好友，不會進行 ID 連結。為了安全，QR Code 會在每次開啟彈出視窗或面板時重新發行，並在 10 分鐘後失效。
難以掃描 QR Code 時，可從「在 PC 上繼續 →」在 PC 的瀏覽器登入 LINE 後繼續。
確認成效
CTA 的成效可以在清單數值、報表與工作流程的條件中確認與運用。
- 清單數值：可依 CTA 確認最近 30 天的顯示次數、點擊次數、加入好友數與 ID 連結數
- 加入好友來源：每個 CTA 的 QR Code 會記錄為流量來源，因此在報表的加入好友來源中可以看出「由哪個 CTA 帶來」
- 工作流程的條件：以流量來源為條件，例如只對從此 CTA 加入的好友發送優惠訊息
- 反映至外部服務：與 Klaviyo、HubSpot 整合時，也會反映至流量來源屬性
遇到問題時
CTA 沒有顯示時，請依序確認佈景主題的應用程式嵌入與顯示條件。
| 症狀 | 確認事項 |
|---|---|
| 商店完全沒有顯示 | 確認佈景主題編輯器的「應用程式嵌入」中「Lumo LINE 加好友」已開啟並儲存。也確認 CTA 的「狀態」為啟用 |
| 特定頁面沒有顯示 | 確認「頁面類型」「網址包含」「排除的網址」「目標裝置」的設定 |
| 關閉一次後就不再出現 | 在「顯示頻率」設定的不再顯示天數內，不會自動出現。將「關閉後」設為「保留為浮動按鈕」，就可以從小按鈕重新開啟 |
| 自己看得到但部分顧客看不到 | 「對照組（不顯示）比例」的比例會刻意不顯示給部分訪客。已連結 ID 的顧客也不會顯示 |
| 內嵌區塊沒有顯示 | 確認區段中已加入區塊「LINE 加好友（Lumo）」，以及該頁面符合內嵌區塊 CTA 的顯示條件 |
| 在 PC 掃描 QR Code 後沒有連結 ID | 確認是在登入商店的狀態下開啟 QR Code。超過 10 分鐘前開啟的 QR Code 已失效，請重新開啟後再掃描 |
| 優惠券沒有送達 | 優惠券由 CTA 的 QR Code 回應訊息或工作流程發送。確認訊息中是否包含優惠券變數，以及活動是否為發放中 |
| 刪除 CTA 後 QR Code 會怎樣 | 即使刪除 CTA，自動建立的 QR Code 與流量來源記錄仍會保留 |