追蹤 Email、電子報、EDM 的開信率
如果說透過 UTM 可以追蹤使用者點擊連結的事件,那麼透過 Measurement Protocol API 就能追蹤 Email、電子報、EDM 的開信率,這篇文章會介紹如何使用 Google Apps Script 以及 Python,搭配 Measurement Protocol AP,實作可以追蹤 Email、電子報、EDM 的開信率的功能。
原本通用版 GA 的 Measurement Protocol 追蹤 Email 方式 ( 參考「Google Analytics 追蹤 Email 與點擊成效」 ),在進入 GA4 之後已經無法使用,必須要自行架設簡單的伺服器環境才能再次進行追蹤。
快速導覽:
追蹤使用者開信的原理
因為 Email、EDM、電子報的本質都是「網頁」,如果要追蹤使用者是否開信,通常會按照下方流程進行追蹤:
- 在發送信件的網頁裡,放入一張「假的,帶有網址參數」的圖片
- 使用者開啟信件時,HTML 的 img 標籤為了讀取圖片,會向伺服器發送 http request ( 請求 )。
- 發送請求時,會將圖片網址參數發送給圖片伺服器。
- 當伺服器收到參數,就能確認使用者是否開信。
追蹤開信率的限制與注意事項
雖然透過 HTML img 標籤的做法可以發送參數資訊,但仍有下列的限制需要注意:
- 某些行動裝置只要收到信,就等於開信,例如 iPhone 為了加快開信速度,收到信之後就會自動下載圖片,這時就會發送請求,等同開信。
- 無法判斷使用者重複開信,每次讀取信件就會發送一次請求。
- 某些收信軟體會阻擋圖片,因為圖片被阻擋就無法發送請求,也就無法得知使用者是否開信。
使用 Measurement Protocol API
參考「使用 Measurement Protocol API 收集資料」,前往 GA4 的「管理 > 資源 > 資料串流」,點擊已經建立好的資料串流。
進入資料串流後,在最上方能夠看見「評估 ID」,點擊下方「Measurement Protocol API 密鑰」開始建立密鑰。
點擊「建立」按鈕,建立一組 Measurement Protocol API 密鑰。
使用 Apps Script
如果沒有後端伺服器,就必須透過 Apps Script 進行實作 ( 前往 Apps Script ),輸入下方的 Apps Script 程式碼後,替換成自己的 Measurement Protocol 評估 ID 和密鑰。
function doGet(e) {
var param = e.parameter; // 取得網址參數
var cid = param.cid; // 取得 cid 內容
var event = param.event; // 取得 event 事件名稱內容
var p1 = param.p1; // 取得 event 事件參數 p1 內容
var uid = '你的評估 ID'
var secret = '你的 api secret'
var url = 'https://www.google-analytics.com/mp/collect?measurement_id='+uid+'&api_secret='+secret;
UrlFetchApp.fetch(url, {
'headers': {
'Content-Type': 'application/json',
},
'method': 'post',
'payload': JSON.stringify({
'client_id': cid,
'events': [{
'name': event,
'params': {
'p1':p1
},
}]
})
});
var img = Utilities.base64Decode('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') // 使用 base64 網址 ( 實際使用會失效,但沒有關係 )
return ContentService.createTextOutput(img); // 回傳文字
}
如果是第一次使用,因為要發送 http request 到外部環境,所以需要允許權限才能操作。
點擊右上方「部署」按鈕,選擇「新增部署作業」。
點擊上方齒輪圖示,設定部署為「網頁應用程式」,「誰可以存取」的下拉選單選擇「所有人」,完成後點擊「部署」。
部署後,出現的網址就是要追蹤是否開信的「假」圖片網址。
使用網頁編輯器或是 JSBin 線上網頁編輯器,輸入下列 HTML 程式碼,將剛剛的網址貼在 img 標籤裡 src 屬性內,並在後方加上網址參數,cid 參數為 cient_id,範例中使用 123.321,event 為事件名稱,範例使用 oxxo_apps_script,params 參數使用 p1,設定自行要追蹤的內容 ( 為什麼要使用這三個參數,因為剛剛 Apps Script 裡就是設定這三個 )。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<img src="剛剛的網址?cid=123.321&event=oxxo_email_apps_script&p1=p1">
</body>
</html>
開啟網頁後 ( 或執行網頁 ),會看見一張無法顯示的圖片,如果開啟瀏覽器的開發者工具,也會看到「cross-origin」跨域的錯誤,這是因為瀏覽器的安全性限制,這並不影響追蹤的傳遞,因為 https request 已經發送到 Apps Script,只是無法顯示回傳的文字而已。
前往 GA4 的即時報表,應該就能看見出現 oxxo_email_apps_script 事件。
回到 html 程式碼,替 img 標籤加上下列的 style,讓圖片變小但是又能夠「讓滑鼠可以選取」。
<img src="剛剛的網址?cid=123.321&event=oxxo_email_apps_script&p1=p1" style="width:10px; height:10px;">
使用滑鼠選取圖片 ( 或使用鍵盤快速鍵 ctrl + a 全選 ),使用鍵盤快速鍵 ctrl + c 複製,前往寄信的程式,將圖片貼入寄信編輯器裡 ( 需要支援 HTML 的信件編輯器 ),就可以將帶有追蹤圖片的信件寄出,開啟信件後就會回傳開信事件。
由於整個操作過程,會不斷的觸發追蹤代碼,建議寄信的時候可以使用寄信程式處理,也可以自動修改不同的追蹤參數,參考「串接 Gmail 寄送電子郵件」
使用 Python
如果使用 Python 架設伺服器,則可以使用下方程式碼產生追蹤圖片網址。
from flask import Flask, request, send_file
import base64, io
import requests, json
app = Flask(__name__)
@app.route("/gif")
def gif():
gif = 'R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
gif_str = base64.b64decode(gif) # 轉換成位元
cid = request.args.get('cid') # 取得 cid 參數內容
event = request.args.get('event') # 取得 event 參數內容
p1 = request.args.get('p1') # 取得 p1 參數內容
uid = '你的串流 ID'
secret = '你的 secret'
url = 'https://www.google-analytics.com/mp/collect?measurement_id='+uid+'&api_secret='+secret
payload = {
'client_id': cid,
'events': [{
'name': event,
'params': {
'p1':p1
},
}]
}
requests.post(url,data=json.dumps(payload),verify=True)
return send_file(io.BytesIO(gif_str), mimetype='image/gif') # 回傳圖片
if __name__ == "__main__":
app.run()
執行後程式後,就會產生一個圖片網址 ( 不是 http://127.0.0.1 開發環境網址,是部署後對外有網域的網址 ),按照下方的格式添加參數。
你產生的網址?cid=456.654&event=oxxo_email_apps_script&p1=p1
前往 Gmail 寄信編輯畫面,使用「網址」方式插入圖片。
完成後將帶有追蹤圖片的信件寄出,開啟信件後就會回傳開信事件。
由於整個操作過程,也會觸發追蹤代碼,建議寄信的時候可以使用寄信程式處理,也可以自動修改不同的追蹤參數,參考「串接 Gmail 寄送電子郵件」
小結
因為 GA4 的 Measurement Protocol API 不支援 GET 方法,導致所有過程一定要經過「後端」,因此追蹤的過程相較通用版 GA 就會麻煩許多,但如果熟悉原理,和後端工程師通力合作,就能夠輕鬆實現追蹤 Email 的功能。
參考
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~