使用加好友 CTA,可以在自有網站上放置 LINE 加入好友的導引。文案與顯示條件在 Lumo 管理畫面設定,並在網站貼上追蹤程式碼後顯示。可以從浮動按鈕、彈出視窗、橫幅、內嵌區塊四種類型中選擇。
加好友 CTA 能做什麼
可以從四種類型中選擇導引,讓造訪網站的人當場加入 LINE 好友。
| 類型 | 呈現方式 | 適合的情境 |
|---|---|---|
| 浮動按鈕 | 常駐於畫面角落的按鈕。在 PC 上點擊後會顯示 QR Code | 想在任何頁面低調地引導時 |
| 彈出視窗 | 在一段時間後或捲動時顯示的視窗。可以關閉 | 想放大優惠、推動加入好友時 |
| 橫幅 | 固定在畫面上方或下方的橫條 | 不妨礙頁面、又能隨時看到引導時 |
| 內嵌區塊 | 嵌入頁面任意位置的區塊(在網站的 HTML 中放置標記) | 想放在文章內文或頁尾等固定位置時 |
在手機上按下按鈕會開啟 LINE 應用程式,直接完成加入好友。在 PC 上則以 QR Code 為主,引導訪客用手機掃描。QR Code 旁也會顯示「在電腦上繼續 →」,可以在 PC 的瀏覽器登入 LINE 後繼續。
經由 CTA 加入的好友,來源會記錄為「網站加好友 CTA」。接觸點會記錄 CTA 的名稱,因此能得知是由哪個 CTA 帶來(背後的機制是每個 CTA 會自動建立一個 QR Code,用於記錄來源)。同時也會記錄開始加好友的頁面 URL。記錄的來源、接觸點與頁面,可以直接用於報表、工作流程與受眾的條件。
在 Shopify 商店顯示時,會依顧客的登入狀態,自動切換為包含 ID 連結的引導。商店上的使用方式請參考「在商店顯示 LINE 加好友 CTA」一文。
使用此功能的條件
要顯示 CTA,需要 Starter 以上的方案與 LINE Login 的設定。
- 工作區為 Starter 以上的方案
- LINE 官方帳號已完成 LINE Login 設定(用於加入好友的導引)
- 能在網站的每個頁面貼上追蹤程式碼(也可以委託網站製作公司)
即使正在使用其他工具的彈出視窗,也可以同時使用。只要分開位置,畫面上就不會重疊。
開啟 CTA 清單
CTA 清單位於 LINE 官方帳號的側邊選單中。
在導覽選單中選擇目標 LINE 官方帳號,點擊側邊選單的「CTA」(就在「QR Code」的下方)。
清單中會列出每個 CTA 的名稱、類型、狀態,以及最近 30 天的顯示次數、點擊次數與加入好友數。要新增時,點擊「建立 CTA」。
建立 CTA
依序設定類型與文案、優惠、顯示條件、成效衡量、安裝,最後點擊「儲存 CTA」即完成。變更設定時右側的預覽會同步更新,可以一邊確認外觀一邊進行。
基本設定
決定 CTA 的名稱、類型與顯示位置。
| 設定項目 | 說明 |
|---|---|
| CTA 名稱 | 管理用的名稱,不會顯示在網站上 |
| 類型 | 從浮動按鈕、彈出視窗、橫幅、內嵌區塊中選擇。預設選取浮動按鈕 |
| 位置 | 浮動按鈕可選右下、左下,橫幅可選上方、下方 |
文案
標題、內文、按鈕文字即使留空,也會顯示 Lumo 的預設文案。切換「編輯的語言」後,可以分別編輯日文、英文、繁體中文與泰文。系統會依訪客瀏覽器的語言自動切換。
也可以設定按鈕下方的小字「備註」,以及彈出視窗上方的「圖片」。
優惠
在「優惠」選擇「顯示優惠」後,可設定「顯示給訪客的優惠名稱」。顯示名稱是給顧客看的名稱,例如「10% 折扣優惠券」。內文中的 {coupon} 會替換為此名稱。
CTA 只負責宣傳優惠。優惠券等優惠本身由 CTA 自動建立的 QR Code 回應訊息,或工作流程的訊息發送。
顯示條件
決定在哪些網站、哪些頁面、何時顯示 CTA。
| 設定項目 | 說明 |
|---|---|
| 顯示的網站 | 每行一個,輸入要顯示 CTA 的網站 URL(必填)。以 https:// 開頭,寫到網域為止。只有在這裡登錄的網站才會顯示 CTA。若在工作區設定「追蹤」中限制了對象網站,請在該範圍內登錄 |
| 網址包含 | 每行一個,指定後只會在 URL 包含該文字的頁面顯示 |
| 排除的網址 | 每行一個,指定的 URL 不會顯示 |
| 顯示時機 | 從立即顯示、延遲後顯示、捲動到指定比例時顯示中選擇(適用於彈出視窗) |
| 目標裝置 | 所有裝置、僅手機、僅電腦 |
| 顯示頻率 | 決定關閉後幾天內不再顯示,以及同一次造訪是否只顯示一次 |
| 關閉後 | 彈出視窗與橫幅關閉後的動作。選「保留為浮動按鈕(預設)」時,畫面角落會留下小按鈕,隨時可以重新開啟。選「不顯示」時,在不再顯示的天數過去前都不會出現。保留時可在「浮動按鈕位置」選擇右下或左下 |
若同一頁面另外放有浮動按鈕類型的 CTA,關閉後的小按鈕不會顯示。每個頁面只會顯示一個彈出視窗。
成效衡量
設定「對照組(不顯示)比例」後,為了衡量成效,部分訪客不會看到 CTA。設為 0% 即停用。
「流量來源」會在儲存後顯示為此 CTA 建立的來源,並標示「自動建立」。透過此 CTA 加入的好友會以來源「網站加好友 CTA」、接觸點「CTA 名稱」記錄,可直接用於報表與工作流程條件。
加入好友後立即傳送的問候或優惠訊息,從「設定問候與優惠訊息」設定。系統會開啟 QR Code 的回應訊息編輯畫面,新增訊息後儲存即可。來源本身的設定可從「開啟來源詳細資訊(QR Code)」確認。
安裝
「安裝」會顯示要貼到網站的追蹤程式碼。
- 追蹤程式碼:按「複製」按鈕複製後,貼到「顯示的網站」各頁面
</body>標籤的正前方。程式碼為整個工作區共用,已貼上的網站不需要額外作業 - 內嵌區塊的貼上 HTML:選擇內嵌區塊類型時顯示。將此 HTML(
<div data-lumo-cta="inline"></div>)貼到想顯示內嵌區塊的位置
預覽
在右側的預覽中,以「裝置」切換手機與電腦,確認實際的外觀。
在網站貼上追蹤程式碼
儲存 CTA 後,在「顯示的網站」登錄的網站各頁面貼上追蹤程式碼。
| 步驟 | 操作 |
|---|---|
| 1 | 在 CTA 的建立/編輯畫面的「安裝」中,按追蹤程式碼的「複製」按鈕 |
| 2 | 貼到網站各頁面 </body> 標籤的正前方(貼在共用範本或頁尾,就不必逐頁作業) |
| 3 | 開啟登錄的網站,確認 CTA 已顯示 |
追蹤程式碼與工作區設定「追蹤」中的程式碼相同。若工作區設定中已開啟「只在指定網站進行追蹤」,CTA 只會顯示在「追蹤目標網站」登錄的網站上。追蹤程式碼的作用與詳細安裝步驟,請參考「設定追蹤程式碼」一文。
在 PC 上掃描 QR Code 時的動作
對於在 PC 上瀏覽的顧客,會引導其用手機掃描 QR Code。
掃描 QR Code 後,會在手機的 LINE 應用程式中完成加入好友。網站無法得知顧客的登入狀態,因此不會進行 ID 連結。為了安全,每次開啟彈出視窗或面板時都會重新發行 QR Code。
若不方便掃描 QR Code,可以從「在電腦上繼續 →」在 PC 的瀏覽器登入 LINE 後繼續。加入好友完成後會回到原本的頁面,該瀏覽器不會再顯示 CTA。
Starter 方案中,PC 用的 QR Code 顯示會加上「Powered by Lumo」標示。
確認成效
CTA 的成效可以透過清單數值、報表與工作流程的條件確認與運用。
- 清單數值:可依 CTA 確認最近 30 天的顯示次數、點擊次數與加入好友數
- 加入好友來源:經由 CTA 加入的好友,來源會記錄為「網站加好友 CTA」,接觸點則記錄為 CTA 的名稱。在報表的加入好友來源中可以看出「由哪個 CTA 帶來」
- 獲取漏斗報表:在報表的獲取漏斗資料集中,能以來源與接觸點的軸線,分析 CTA 曝光→點擊→加入好友的到達數
- 工作流程與受眾的條件:以來源類型、QR Code(CTA)與加好友開始的頁面 URL 為條件,例如只對從此 CTA 加入的好友發送優惠訊息
- 反映至外部服務:與 HubSpot、Klaviyo 整合時,首次加好友的來源與頁面會反映至「LINE Acquisition Route」「LINE Acquisition Page」屬性,來源 CTA 的名稱則反映至「LINE Traffic Source」屬性
遇到問題時
CTA 沒有顯示時,依序確認顯示的網站登錄與追蹤程式碼的貼上位置。
| 症狀 | 確認事項 |
|---|---|
| 網站上沒有任何顯示 | 確認正在瀏覽的網站 URL 是否以 https:// 登錄在「顯示的網站」中、追蹤程式碼是否貼在各頁面 </body> 的正前方,以及 CTA 的「狀態」是否為啟用。若在工作區設定「追蹤」中限制了對象網站,也要確認該網站是否在「追蹤目標網站」中 |
| 特定頁面沒有顯示 | 確認「網址包含」「排除的網址」「目標裝置」的設定 |
| 關閉一次後就不再顯示 | 在「顯示頻率」設定的不再顯示天數內,不會自動出現。將「關閉後」設為「保留為浮動按鈕」,就能從小按鈕重新開啟 |
| 自己看得到但部分顧客看不到 | 「對照組(不顯示)比例」的部分訪客是刻意不顯示的。在 PC 上完成加入好友的瀏覽器也不會顯示 |
| 內嵌區塊沒有顯示 | 確認是否將「安裝」中的「內嵌區塊的貼上 HTML」貼到想顯示的位置,以及該頁面是否符合內嵌區塊 CTA 的顯示條件 |
| 優惠的優惠券沒有送達 | 優惠由 CTA 的 QR Code 回應訊息或工作流程發送。確認是否已設定訊息,以及活動是否為發放中 |
| 刪除 CTA 後 QR Code 會如何 | 即使刪除 CTA,自動建立的 QR Code 與來源紀錄仍會保留 |