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

用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.

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 上看到的資料就會是這樣:

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> 包住。

JavaScript

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
本篇大綱:為什麼要自己開發一個按鈕、按鈕樣式部份、按鈕功能部份、判斷使用者語系、在 Google Apps Script 上寫 API、cookies、發 Google Analytics 事件、埋程式碼HTML、CSS、JS、結論。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
最舊
最新
Inline Feedbacks
看所有留言