如何使用jQuery或JavaScript在Google Analytics中準確跟蹤表單放棄

我（並且可能有人曾要求解決此任務）想要準確地通過使用jQuery（Google Analytics）跟蹤「表單放棄」或JavaScript）。這允許Google Analytics生成報告，顯示用戶在離開或未提交表單之前進入表單填寫流程的程度。如何使用jQuery或JavaScript在Google Analytics中準確跟蹤表單放棄

有沒有更好的方法來跟蹤下面的＃1的& 2（其他步驟的建議是額外的功勞），通過使用jQuery事件觸發器來覆蓋下面的場景，但並不需要涉及表單驗證的複雜腳本？下面的例子是我到目前爲止使用的：

1.）跟蹤每個表單字段上的點擊。當事件發生時，它將「形式 - 佔位符文本」傳遞給GA。問題在於，有些用戶將使用Tab鍵在字段中循環，從不單擊或僅在域上單擊一次。例如：

$("form field").click(function(event){ fire event code here });

2.）我試圖一個。對（「KEYDOWN」）添加到每個事件，從而當用戶點擊或當用戶開始在輸入的字段，相同的值在步驟1中傳遞給GA。這裏的問題是，有些用戶使用Chrome自動填充數據，而不會觸發按鍵或點擊。當用戶在瀏覽器或插件中保存表單數據時，會出現這種情況，並且這些字段都是自動填充的。例如：

$("form field").keydown(function(event){ fire event code here });

3.）爲下拉選擇菜單我使用：

$("form select").on('change',function(){ fire event code here });

這通常就足夠了。

4.）對於文本區域，我有同樣的問題，可以使用tab鍵。註釋部分通常不會自動填充（並且它們不是必填字段，因此實際上並不重要）。爲此，我傾向於使用：（放置在同一個容器內，因此它只觸發一個事件或其他事件，但從來都不會）。

$("form textarea").click(function(event){ fire event code here });

和

$("form textarea").keydown(function(event){ fire event code here });

5）無線電菜單我通常使用：

$("form input[type='radio']").click(function(event){ fire event code here });

這往往因爲它們通常不會觸發通過自動填充很好地工作。

在所有事件中，我都會使用3分鐘的超時時間，以防再次觸發事件，以防止/減少每頁加載的重複觸發（我還會根據Google Analytics中的獨特事件進行過濾以確保不顯示每個用戶的重複事件）。

如果所有場景都可以通過簡單的$（「」）。on（「something」）{fire event values}來覆蓋，這樣它就可以在Tag Manager中實現或在JS腳本中使用。

對於這種情況，我們假設我們只有以下表單，並且我們想要跟蹤與元素的所有可能的交互，以便我們可以知道用戶在哪裏放棄（請不要評論提交跟蹤）：三個輸入，一個選擇drop向下，三個無線電菜單和一個文本區域（請記住嘗試並考慮自動填充和Tab鍵）。

<form> 

<input name="Name" type="text" placeholder="Name *" title="Name *" class="form-field"> 

<input name="E-mail" type="text" placeholder="E-mail *" title="E-mail *" class="form-field"> 

<input name="Phone Number" type="text" placeholder="Phone Number *" title="Phone Number *" class="form-field"> 

<select title="dropDown" name="dropDown" class="form-field"> 
    <option value="0">Select Something</option> 
    <option value="1">Select Something Else</option> 
    <option value="2">Select Another Something</option> 
</select> 

<input type="radio" name="gender" value="male"> Male</input> 
<input type="radio" name="gender" value="female"> Female</input> 
<input type="radio" name="gender" value="other"> Other</input> 

<textarea name="Comments" placeholder="Comments" title="Comments" class="form-field"></textarea> 

</form>

任何提示或建議將是非常有益的。

謝謝！

來源

2017-06-05 Timonious

你可以檢查重點以及 – Huangism

焦點確實工作得很好。看來焦點將修復標籤和自動填充數據問題。謝謝！ – Timonious

您可以跟蹤focus而不是其他事件，焦點更可靠一點，因爲這些字段必須專注於使用。

來源

2017-06-09 12:24:47 Huangism

如何使用jQuery或JavaScript在Google Analytics中準確跟蹤表單放棄

回答

相關問題