利用 GTM 追蹤捐款金額

執行行銷計畫的時候,總會很想知道這筆支出可以轉換成多少收入,目前 netiCRM 的活動頁和募款頁的感謝頁都已嵌入含有訂單資訊的 資料層 dataLayer。以募款頁來說,包含:募款頁名稱、定期或單筆捐款、總金額及交易編號,這些資訊在 dataLayer 中都能找到唷! 

這個單元要為大家說明如何利用 GTM 搭配 Google Analytics 和 Facebook Pixel 來追蹤募款頁和活動頁的結帳金額。為什麼是 GTM 呢?Goolge Tag Manager,簡稱 GTM ,讓網站分析師與行銷人員不用更改網站的程式碼,即能將各種追蹤程式碼以及第三方應用工具安裝到網站中,讓追蹤和管理都在同一個平台完成。因此,希望客戶們都能在第一次需要在網站埋設追蹤碼時,就埋入GTM,往後多數的追蹤碼就不用再透過我們(網絡行動科技)來處理,自己在 GTM 設定就能完成!

使用 GTM 搭配 Google Analytics 追蹤募款頁、活動頁結帳金額

使用 GTM 搭配 Pixel 追蹤募款頁、活動頁結帳金額

使用 GTM 搭配 Google Analytics 追蹤募款頁、活動頁結帳金額

首先,請確認以下都已完成,再接著進行代碼增設喔!
  1. 網站已埋入 GTM 嵌入碼 (如何在netiCRM後台埋設GTM嵌入碼,請參考相關章節:在頁首嵌入代碼(GTM、Facebook Pixel)
  2. 網站已埋設 GA 全域追蹤碼(透過 GTM 或直接埋入)(基本&重要!曾有客戶的行銷代理商未正確設置GA,來回數次才釐清此基本問題
  3. GA後台已開啟電子商務報表功能,參考 https://support.google.com/analytics/answer/1009612?hl=zh-Hant 「為資料檢視啟用電子商務功能」,請留意加強型電子商務報表也須開起來
    ※開起來之後,需等待 24-48 小時待 GA 蒐集足夠數據
  4. GTM 的變數設定 -> GA 變數已設定啟用電子商務

 

追蹤募款頁與活動頁的結帳金額

請進到 GTM 的後台,按照以下步驟加入代碼
  1. 選擇左欄選單的「代碼」,並按下右上角的「新增」
  2. 輸入代碼標題,例如「GA 電子商務 - 募款頁、活動頁結帳金額」
  3. 追蹤類型選「交易」,Google Analytics (分析) 選先前已增設完成的 GA 變數 ,完成後按「儲存」
  4. 點一下代碼下方的觸發條件,輸入相關設定:

    4-1 從右方彈出視窗點選右上角的「+」,先新增一個募款感謝頁的觸發條件:
      
    4-2 輸入觸發條件標題,例如「進入募款感謝頁」
    4-3 觸發條件類型選擇:網頁瀏覽 - DOM 就緒
    4-4 觸發條件啟動時機:部分的 DOM Ready 事件
    4-5 輸入條件:Page Url 包含 civicrm/contribute/transact?_qf_ThankYou_display
      

  5. 上述完成後,按右上角的儲存
  6. 如也需追蹤活動頁結帳金額,則
    6-1在此代碼的觸發條件區塊右上方點「+」,新增其他觸發條件

    6-2 進入編輯畫面後,按右上方的「+」

    6-3 另外再新增一個活動感謝頁的觸發條件,請重複 4-1 到 4-5 步驟,並在 4-5 輸入 Page URL 為 civicrm/event/register?_qf_ThankYou_display=
  7. 設定完成後,代碼畫面應該像下圖,代碼設定完成,亦含有兩個觸發條件
  8. 為代碼選擇好觸發條件並儲存代碼後,請務必按下「提交」,才是完成整個步驟唷!
 
 

使用 GTM 搭配 Pixel 追蹤募款頁、活動頁結帳金額

首先確認有自訂域名+進行過網域驗證,詳情請參考本文章:Facebook因應iOS 14的廣告新政策,NPO行銷人如何迎擊?

並且已在全站埋設基底程式碼 https://www.facebook.com/business/help/218844828315224?id=1205376682832…

 

  1. 進到 GTM 新增一個變數,此變數用於抓取結帳頁之金額。輸入變數標題「ecommerce」,變數類型選「資料層變數」,資料層變書名稱輸入「ecommerce.purchase.actionField.revenue」,完成後儲存。
  2. 新增一個代碼
    2-1 輸入標題
    2-2 代碼類型選「自訂 HTML」
    2-3 HTML 輸入以下原始碼(紅字部分一定要跟剛剛新增變數標題相同):
    <script>
    fbq('track', 'Purchase',{value:'{{ecommerce}}', currency:'TWD'});
    </script>
    2-4 觸發條件參考 上述 設定
  3. 儲存代碼並發布後即可。

其他補充資訊:

  1. 如何將利用 GTM 埋設 Google Analytics?請參考 Google 官方文件 https://support.google.com/tagmanager/answer/6107124?hl=zh-Hant
  2. 如何將利用 GTM 埋設 Pixel?請參考 Facebook 官方文件 https://www.facebook.com/business/help/1021909254506499
  3. 已經完成結帳追蹤,結帳前的各捐款階段(瀏覽募款頁、填完資料表單...等)怎麼處理呢?因為各組織想要追蹤的階段不同,目前 netiCRM 只在感謝頁埋設 dataLayer 供追蹤結帳金額。若需要追蹤其他捐款階段,得透過客服系統與我們聯繫,客製處理喔!

 

讓我們挺你,用聰明的方法改變世界