前陣子到客戶端去提案時,在一個基本上沒我事的環節,客戶向業務聊到自己的煩惱。因為他們的表單資料都會送進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裡面,設定起來就會長這樣:
第四步:開始設定代碼和觸發條件
現在GTM實在是蠻方便的,他已經內建表單觸發的設定和變數了。如果你很懶,可以依照下圖設定就好。標籤那邊,我就是用剛剛設定的JS自訂變數{{JS Contact Form Content}},把表單的內容給抓進來,其他就自由發揮。
觸發條件則使用表單提交。
觸發條件沒有很細的細節如下,因為GTM已經有表單提交的觸發條件可以選了,所以我們也沒太多事情可以做,如果你只有一個表單,那啟動時機就不需要特別設定,但如果你有指定表單要追蹤,就將表單的ID填進去,如下圖:
第五步:記得儲存後發布
大Guy就4John,如果你們公司也是那種把資料送進Salesforce然後又不給行銷人員權限的天才公司,歡迎使用這個方法來取得表單值,這也會比只追蹤按鈕點擊次數的事件還要準確一些。