使用GTM將表單填寫值送進GA

這是一個WordPress的表單,我實在是懶得自己刻啊
表單ID示意

前陣子到客戶端去提案時,在一個基本上沒我事的環節,客戶向業務聊到自己的煩惱。因為他們的表單資料都會送進Salesforce,但基於公司政策,這窗口沒有權限可以自如的存取裡面的資料,導致他們也搞不太清楚到底轉換率如何。

當下除了想著這公司制度到底在搞啥,另外也想,你們有GTM和GA權限,用來抓表單資料送進GA不好嗎?

不過我太菜了,加上自己也從來沒有試過,所以當下就沒有提出來,決定自己回辦公室之後試試看。

於是乎,上網搜尋一下,台灣似乎沒什麼人分享過類似的作法,不過國外倒是找到不少人也有這問題,最後選擇了這篇算是最容易懂的文章(雖然還是花了很多時間去了解)。

這篇:Capture Submitted Form Values With Google Tag Manager

如果上面這篇已經可以解決你的問題,那你就不用再看下去了。但如果這篇你還是看不懂很想要中文解說,或是雖然你已經懂了,但依然被我迷人的文采所吸引,你就可以繼續往下看。

第一步:你要有個真正的表單(Form)
你可能再努力也沒有妹妹,但只要你想,你就可以擁有一個表單。我相信不是真正的表單還是有不是真正的表單的做法,但目前我所需要用到的例子,以及這篇教學,都是針對使用<form>所製作出的表單來設定,所以如果你有其他做法的需求,歡迎分享一下。

第二步:找到你想要抓的那格的ID
以下面的例子,假設我想要抓Message這個欄位的資料,透過Chrome開發者工具可以抓出他的ID為「wpforms-118-field_4」

第三步:用JavaScript自訂變數,把資料抓出來
寫法這樣,用document.getElementById把剛剛記下的ID值給抓出來,然後return出來,你就得到表單值了,就是這麼簡單。(直接複製即可)

function () {
 var formcontent = document.getElementById('wpforms-118-field_4').value;
 if (formcontent)
 return formcontent;
 else
 return "formcontent empty";
 }

在GTM裡面,設定起來就會長這樣:

每張圖都要掰一段alt真的很累

第四步:開始設定代碼和觸發條件
現在GTM實在是蠻方便的,他已經內建表單觸發的設定和變數了。如果你很懶,可以依照下圖設定就好。標籤那邊,我就是用剛剛設定的JS自訂變數{{JS Contact Form Content}},把表單的內容給抓進來,其他就自由發揮。

觸發條件則使用表單提交。

這是代碼設定

觸發條件沒有很細的細節如下,因為GTM已經有表單提交的觸發條件可以選了,所以我們也沒太多事情可以做,如果你只有一個表單,那啟動時機就不需要特別設定,但如果你有指定表單要追蹤,就將表單的ID填進去,如下圖:

好了啦

第五步:記得儲存後發布
大Guy就4John,如果你們公司也是那種把資料送進Salesforce然後又不給行銷人員權限的天才公司,歡迎使用這個方法來取得表單值,這也會比只追蹤按鈕點擊次數的事件還要準確一些。