手機來電按鈕：實作、位置與追蹤

來電型生意的網站，八成以上的價值集中在一個元件上：那顆可以按下去撥號的按鈕。它很簡單，但實務上錯誤率高得驚人。

基本實作

電話必須是可點擊的連結，格式是 tel: 開頭：

• <a href="tel:0212345678">02-1234-5678</a> —— 號碼裡不要有空格或括號
• 顯示的文字可以有格式（分隔符號讓人好讀），但 href 裡只留數字
• 有分機的話，用 , 表示停頓：tel:0212345678,102
• 國際格式加 +886 並去掉開頭的 0，適合有海外客戶的情況

位置：手機上要固定

急件使用者不會捲頁找號碼。做法是在手機版把撥號按鈕固定在畫面下緣，全站每一頁都在。

• 固定在底部，寬度佔滿或接近佔滿，拇指單手可及
• 不要蓋住頁面內容 —— 底部要留出對應高度的內距
• 桌機版不需要固定按鈕，但號碼要出現在頁首與頁尾
• 首屏也要有一次號碼，不要只依賴固定按鈕

號碼旁邊一定要有「現在」的狀態

這一點的效果常常被低估。使用者在按下之前想知道的是「現在打會不會有人接」。

桌機使用者怎麼辦

桌機點 tel: 的體驗不好（可能跳出不存在的程式，或什麼都沒發生）。處理方式：

• 桌機版把號碼顯示成可選取的文字，不做成連結
• 或者做成連結但點擊後顯示號碼與「請用手機撥打」的提示
• 桌機同時提供第二個管道（Email 或線上訊息），因為桌機使用者本來就比較不急

各種號碼格式怎麼寫

• href 裡只留數字（加號與逗號除外），顯示文字才加分隔符號。
• 分機用逗號表示停頓，一個逗號約兩秒。撥不通就多加一個。
• ⛔ 不要用全形數字或全形連字號 —— 部分裝置會直接失效。
• ⛔ 不要把號碼做成圖片 —— 不能點、不能被搜尋引擎讀、不能被複製。

電話與 LINE 並列時的排法

台灣多數在地生意兩個都會放。並列會稀釋，所以要分主次。

桌機與平板的處理

桌機點 tel: 的行為不一致 —— 可能開啟不存在的程式、可能沒反應。做法：

• 最簡單的做法：不做裝置判斷，號碼一律是連結。桌機使用者看到號碼會自己抄，點了沒反應不會造成困擾。
• 比較講究的做法：用 CSS 媒體查詢，寬螢幕時把連結樣式改成一般文字（仍可選取複製）。
• 不要做的：用 JavaScript 偵測裝置後隱藏號碼。判斷失準時會讓真的想打電話的人找不到。

把撥號算成轉換

沒有追蹤，你永遠不知道網站有沒有用。最低限度要做到：

1. 記錄點擊事件把「按下撥號」送成分析工具裡的轉換事件。
2. 分來源看知道這些點擊來自搜尋、廣告還是直接進站。
3. 分頁面看哪一頁產生最多撥號 —— 通常會顛覆你的猜測。
4. 另外量接通率按了但沒接通是很大的漏水點，這要從你的話務端看，不是網站端。

來電型官網怎麼做 →　來電追蹤建置 →　修繕・水電・鎖匠官網 →