用Firebase、Google Apps Script、GTM自己做一個讚按鈕

用Firebase、Google Apps Script、GTM自己做一個讚按鈕

為什麼要自己開發一個按鈕

為什麼要模仿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.


按鈕功能部份

統計一下按鈕的功能,總共有以下:

  • 確認使用者語系,文字給中文/英文
  • 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上看到的資料就會是這樣:

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都支援,是個好物:

nsertAdjacentHTML在瀏覽器的支援呈度
nsertAdjacentHTML在瀏覽器的支援呈度

用GTM加html的方法很簡單,開啟GTM後,按代碼 -> 新增,代碼類型就選「自訂HTML」。

貼進上面的js後,觸發條件的部份建議選「視窗已載入」,因為按鈕的位置是抓分享按鈕那一排,不用視窗已載入的話,有可能執行js時,分享那排還沒出現在頁面上,造成js抓不到目標。

加入css的部份一樣是用「自訂HTML」,記得要用<style>包住。

js

js跟html、css一樣都是自訂HTML,不過不一樣的是,要多一個觸發順序的設定。

在進階設定裡面,可以選擇在哪一段代碼之後才執行,由於js必須要在加進了按鈕的html之後才執行,所以順序要選擇「在加入js 啟動前先啟動一個代碼。」然後代碼就選剛加進html的代碼名稱。下面寫的如果html的代碼執行不了就跟著不執行的選項打勾。以下是設定的截圖:

代碼觸發順序
代碼觸發順序

html、css、js 三個代碼都設定好後,最後按下「提交」就行了,回到頁面並重整就會看到按鈕出現。

如果重整後沒看到,有可能是快取問題,沒抓到新的GTM,清掉快取後重整就行。


結論

如果看完了整篇,會發現「有幫助」這個按鈕單純就是計數而已,不像FB的讚背後還綁了許多功能,像登入會員之類的。

這個主要是讓我看一下哪種類型的筆記文是對大家來說有幫助的,給以後寫筆記文一個參考。


Summary
用Firebase、Google Apps Script、GTM自己做一個讚按鈕
Article Name
用Firebase、Google Apps Script、GTM自己做一個讚按鈕
Description
用Firebase、Google Apps Script、GTM自己做一個讚按鈕 本篇大綱:為什麼要自己開發一個按鈕、按鈕樣式部份、按鈕功能部份、判斷使用者語系、在google apps script上寫API、cookies、發Google Analytics事件、埋程式碼html、css、js、結論
Augustus
Let's Write
Let's Write
Publisher Logo

留言