iT邦幫忙

2023 iThome 鐵人賽

0
Modern Web

跟著 OXXO 一起學 GA4 ( Google Analytics 4 )系列 第 73

( Day 39 ) GA4 追蹤 Email、電子報、EDM 的開信率

  • 分享至 

  • xImage
  •  

如果說透過 UTM 可以追蹤使用者點擊連結的事件,那麼透過 Measurement Protocol API 就能追蹤 Email、電子報、EDM 的開信率,這篇文章會介紹如何使用 Google Apps Script 以及 Python,搭配 Measurement Protocol AP,實作可以追蹤 Email、電子報、EDM 的開信率的功能。

原文參考:追蹤 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 的「管理 > 資源 > 資料串流」,點擊已經建立好的資料串流。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 資料串流

進入資料串流後,在最上方能夠看見「評估 ID」,點擊下方「Measurement Protocol API 密鑰」開始建立密鑰。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 評估 ID 與建立密鑰

點擊「建立」按鈕,建立一組 Measurement Protocol API 密鑰。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - Measurement Protocol API 密鑰

使用 Apps Script

如果沒有後端伺服器,就必須透過 Apps Script 進行實作 ( 前往 Apps Script ),輸入下方的 Apps Script 程式碼後,替換成自己的 Measurement Protocol 評估 ID 和密鑰。

參考:簡易後端實作 ( Google Apps Script )

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 到外部環境,所以需要允許權限才能操作。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - Apps Script 允許權限

點擊右上方「部署」按鈕,選擇「新增部署作業」。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 部署 Apps Script

點擊上方齒輪圖示,設定部署為「網頁應用程式」,「誰可以存取」的下拉選單選擇「所有人」,完成後點擊「部署」。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 部署為「網頁應用程式」

部署後,出現的網址就是要追蹤是否開信的「假」圖片網址。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 部署網址

使用網頁編輯器或是 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 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 執行網頁

前往 GA4 的即時報表,應該就能看見出現 oxxo_email_apps_script 事件。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 出現 oxxo_email_apps_script 事件

回到 html 程式碼,替 img 標籤加上下列的 style,讓圖片變小但是又能夠「讓滑鼠可以選取」。

<img src="剛剛的網址?cid=123.321&event=oxxo_email_apps_script&p1=p1" style="width:10px; height:10px;">

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 讓圖片變小

使用滑鼠選取圖片 ( 或使用鍵盤快速鍵 ctrl + a 全選 ),使用鍵盤快速鍵 ctrl + c 複製,前往寄信的程式,將圖片貼入寄信編輯器裡 ( 需要支援 HTML 的信件編輯器 ),就可以將帶有追蹤圖片的信件寄出,開啟信件後就會回傳開信事件。

由於整個操作過程,會不斷的觸發追蹤代碼,建議寄信的時候可以使用寄信程式處理,也可以自動修改不同的追蹤參數,參考「串接 Gmail 寄送電子郵件

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 將帶有追蹤圖片的信件寄出

使用 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 寄信編輯畫面,使用「網址」方式插入圖片。

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 使用「網址」方式插入圖片

完成後將帶有追蹤圖片的信件寄出,開啟信件後就會回傳開信事件。

由於整個操作過程,也會觸發追蹤代碼,建議寄信的時候可以使用寄信程式處理,也可以自動修改不同的追蹤參數,參考「串接 Gmail 寄送電子郵件

GA4 教學 ( Google Analytics 4 ) - 追蹤 Email、電子報、EDM 的開信率 - 使用「網址」方式插入圖片

小結

因為 GA4 的 Measurement Protocol API 不支援 GET 方法,導致所有過程一定要經過「後端」,因此追蹤的過程相較通用版 GA 就會麻煩許多,但如果熟悉原理,和後端工程師通力合作,就能夠輕鬆實現追蹤 Email 的功能。

參考

更多教學

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^


上一篇
( Day 38 ) GA4 同時使用多組 GA4 資料串流
下一篇
( Day 40 ) GA4 追蹤網頁捲動高度
系列文
跟著 OXXO 一起學 GA4 ( Google Analytics 4 )79
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言