Googleアナリティクスのイベントコールバック

Question

私は、次のGoogleアナリティクスのコードをコールバックするために苦労しています。フォームを送信すると、ページがリフレッシュされ、何も起こりません。私はJavaScriptが新しく、なぜイベントが作成されないのか、なぜコールバックが返されないのかについて少し犠牲になっています。私がアイデアを使い果たしているので、援助は非常に高く評価されます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-redacted for SO-1', 'auto'); 
    ga('send', 'pageview'); 
    ga('set', 'transport', 'beacon'); 
</script> 

<script> 
var formSubmitted = false; 
    function submitForm() { 
    if (!formSubmitted) { 
     formSubmitted = true; 
     alert("called back"); 
     $("#test").submit(); 
    } 
    } 
$("#signUpFree").click(function(e) { 
    e.preventDefault; 
    setTimeout(submitForm, 1000); 
    ga('send', 'event', { 
    eventCategory: 'registration', 
    eventAction: 'submit', 
    eventLabel: 'NewFreeUser', 
    eventValue: 1, 
    hitCallback:submitForm}); 
    }); 

</script> 

<form action="GATest.html" method ="post" id="test"> 
    <input type="text" name="FName"><br> 
    <input type="submit" id="signUpFree" value="submit"> 
</form> 

Answer 1

ので、ここでの問題は、あなたがボタンがページ上に存在する前に、あなたのクリックハンドラを定義しようということです...非常に少なくとも、あなたは「$を（含むスクリプトタグの上にフォームを移動する必要があります#signUpFree "）。クリックハンドラ。

(function($) { 
    $(function() { // <== this is the onload handler; code in here will only run once the DOM (or page) is ready 
     var formSubmitted = false; 
     .... 
    }); 
})(jQuery); // good practice to scope your "$" variable 

そして、それはそれを行う必要があります。

しかし、より良いアプローチは、ページがそれらを受け入れる準備ができている場合にのみ、あなたのハンドラをアタッチするjQueryの「オンロード」のハンドラを使用することです！お役に立てれば！