為什麼要自己開發一個按鈕
為什麼要模仿 FB 的讚,自己開發一個「有幫助」按鈕?好吧,單純是因為有趣。
另一個原因是有一次在 FB 分享文章後,發現用 FB 的 WebView 下,點了讚卻沒反應,讚數一直沒往上加。
想了一下,之前用 LINE 的 WebView 下點讚也有沒反應的情況。
雖然讚很好用,但那畢竟是別人家的。
整合以上二點,就想自己開發一個來玩,順便再來複習一下 Google Apps Script 的使用。
按鈕樣式部份
首先,既然是自己的按鈕,就要先刻一個出來。
構想是分兩個部份,左邊是按鈕,右邊是多少人按的數字。
按鈕是左 icon、右文字。
文字分中文「有幫助」、英文「Helpful」二種,用 JS 判斷語系後丟不同結果。
照這個規劃,HTML 的部份如下:
<div id="helpful-btn-wrap"> <button type="button" id="helpful-btn" class="helpful-btn"> <div id="helpful-btn-icon"></div> <div id="helpful-btn-text" class="helpful-btn-text"></div> </button> <div class="helpful-count-wrap"> <div id="helpful-count"></div> </div> </div>
用 #helpful-btn-wrap
包整個按鈕,#helpful-btn
是按鈕部份、.helpful-count-wrap
是顯示人數部份。
之所以裡面沒寫內容,是因為內容的部份都會由 JS 去塞。
把 CSS 也寫好後,按鈕就出現了,像這樣:
See the Pen helpful button – Let’s Write by sean (@sean-su) on CodePen.
2020.03.07 更新:看了一下「有幫助」按鈕的使用狀況,以及考慮新改的社群分享按鈕樣式,今天開始本站停用「有幫助」按鈕的功能。按鈕的樣子會保留在上面的 CodePen 上。
按鈕功能部份
統計一下按鈕的功能,總共有以下:
- 確認使用者語系,文字給中文/英文
- POST 到 Firebase 的 API 部份,編寫在 Google Apps Script上
- 頁面載入完,判斷使用者有沒有點擊過按鈕,有的話按鈕 class name 加上 active
- 頁面載入完,從 Firebase 拿資料,判斷按鈕被按的次數,是 0 的話隱藏數字的 div
- 點擊後,顯示數字 + 1,Firebase 上的資料也 + 1
- 點擊後,加上 cookies,以便之後可以判斷使用者有沒有點過
- 點擊後,如果數字是被隱藏起來的,就拿掉隱藏用的 class name
- 點擊後,發一個事件給 Google Analytics
判斷使用者語系
主要用 navigator.language
這個值去判斷是不是 zh-TW、zh-Hant、zh-Hant-TW 這三個其中一個,是的話就寫「有幫助」,不是的話就寫「Helpful」:
let text = document.getElementById('helpful-btn-text'); const userLang = navigator.language || navigator.userLanguage; userLang == 'zh-TW' || userLang == 'zh-Hant' || userLang == 'zh-Hant-TW' ? text.textContent = '有幫助!' : text.textContent = 'Helpful!';
在 Google Apps Script(GAS)上寫 API
在 Google Apps Script 接收 / 推播訊息 這篇,有寫了如何讓 GAS 收到 POST 時,執行 function 並回傳,也有寫如何用 GAS 讀寫 Firebase 的資料,這篇就不另外寫了。
要寫的是,存在 Firebase 裡的 Key 值,就是用頁面的路徑。本站每一篇的路徑都是這樣:
https//letswrite.tw/文章名稱/
文章名稱都會取一個英文的當網址,很適合拿來當 Key。
最後在 Firebase 上看到的資料就會是這樣:
一眼就可以看出各篇的點擊狀況。
cookies
為了判斷使用者有沒有在這篇點擊過「有幫助」,前端常用的就是存在 cookies 裡。
上一段說拿每一篇的英文網址當 Key,存在 cookies 時,也是把這個 Key 存在 cookies 裡。
之後每一位使用者進到頁面時,拿網址去比對 cookies 的值,有相同的就代表曾經點過,就再把 .active
加在按鈕上就行。
發 Google Analytics 事件
之所以要發 GA 事件,是為了在看 GA 報表時可以順便看各頁的狀況,順便設個目標當轉換率來看。
怎麼埋 GA 事件有寫在這篇:
本篇就不寫了。
埋程式碼
寫完了 HTML、CSS、JS 後,最後就是要放進各頁裡。
本站是用 WordPress 架的,可以選擇直接打開佈景編輯器,把程式碼放上去。
但這麼做有一個壞處,就是當佈景一要更新時,這些手動埋的程式碼就全部會不見,要重放一次。
為了避免這個狀況,也為了以後好管理,就選擇了一個好用的工具:Google Tag Manager。
Google Tag Manager,簡稱 GTM,就是一個容器,裡面裝著想放進頁面裡的 code。
它還能寫 GA 事件,或是寫 JS 事件監聽等,是一套很方便的工具。
詳細的使用教學本篇就不寫了,直接 Google 可以 G 到很多,本篇就寫怎麼放「有幫助」按鈕的 code 上去。
HTML、CSS
HTML 的部份,用 insertAdjacentHTML
塞進指定的位置裡,原本的 HTML 改寫成 JS 如下:
<script> var helpfulBtn = '<div id="helpful-btn-wrap"><button type="button" id="helpful-btn" class="helpful-btn"><div id="helpful-btn-icon"></div><div id="helpful-btn-text" class="helpful-btn-text"></div></button><div class="helpful-count-wrap"><div id="helpful-count"></div></div></div>'; var beBefore = document.querySelector('.sharedaddy.sd-sharing-enabled'); beBefore.insertAdjacentHTML('beforebegin', helpfulBtn); </script>
insertAdjacentHTML
是很好用的 function,MBD 上說:
insertAdjacentHTML() 把傳入的字串解析成 HTML 或 XML,並把該節點插入到 DOM 樹指定的位置。它不會重新解析被使用的元素,因此他不會破壞該元素裡面原有的元素。這避免了序列化的複雜步驟,使得它比直接操作 innerHTML 快上許多。
Element.insertAdjacentHTML()
支援度也蠻高的,連 IE 都支援,是個好物:
用 GTM 加 HTML 的方法很簡單,開啟 GTM 後,按代碼 -> 新增,代碼類型就選「自訂 HTML」。
貼進上面的 JS 後,觸發條件的部份建議選「視窗已載入」,因為按鈕的位置是抓分享按鈕那一排,不用視窗已載入的話,有可能執行 JS 時,分享那排還沒出現在頁面上,造成js抓不到目標。
加入 CSS 的部份一樣是用「自訂 HTML」,記得要用 <style>
包住。
JavaScript
JS 跟 HTML、CSS 一樣都是自訂 HTML,不過不一樣的是,要多一個觸發順序的設定。
在進階設定裡面,可以選擇在哪一段代碼之後才執行,由於 JS 必須要在加進了按鈕的 HTML 之後才執行,所以順序要選擇「在加入 JS 啟動前先啟動一個代碼。」然後代碼就選剛加進 HTML 的代碼名稱。下面寫的如果 HTML 的代碼執行不了就跟著不執行的選項打勾。以下是設定的截圖:
HTML、CSS、JS 三個代碼都設定好後,最後按下「提交」就行了,回到頁面並重整就會看到按鈕出現。
如果重整後沒看到,有可能是快取問題,沒抓到新的 GTM,清掉快取後重整就行。
結論
如果看完了整篇,會發現「有幫助」這個按鈕單純就是計數而已,不像 FB 的讚背後還綁了許多功能,像登入會員之類的。
這個主要是讓我看一下哪種類型的筆記文是對大家來說有幫助的,給以後寫筆記文一個參考。