Question

当用户向表单提交（POSTs）表单时，我想传递选定的复选框值，以便在Google Analytics信息中心内跟踪自定义指标。

用户将他们的选择提交给服务器，服务器将首先调用JS sendDataToGA(selectedOption) {函数将该数据传递给GA，然后POST将运行。

我如何做到这一点？似乎POST正在触发并且没有调用JS函数。

PHP / HTML：

    <?php if (!empty($_POST)): ?>
        Selection: <?php echo htmlspecialchars($_POST["option"]); ?><br>

    <?php else: ?>
        <!-- On form submit, fire a custom GA function to capture the selected option -->
        <form action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post" > 
          <input type="checkbox" name="option" value="option 1">Option 1<br>
          <input type="checkbox" name="option" value="option 2">Option 2<br>
          <input type="submit" value="Submit" id="submitBtn" onclick="sendDataToGA(selectedOption);">
        </form>
    <?php endif; ?>

JS：

function sendDataToGA(selectedCheckboxValue) {
    ga('send', 'event', 'category', 'action', {
        'metric1': selectedCheckboxValue,
            'hitCallback': function () {
            console.log("data has been sent to Google Analytics");
        }
    });
}

Answer 1

如果您为表单指定了id属性，则可以使用jQuery

执行以下操作

$("#myForm").submit(function () {
    ga(...);
});

或没有jQuery：

<form action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> onsubmit="sendDataToGA(selectedOption)" method="post"> 
    ...
</form>

Answer 2

您可以在将提交事件发布到服务器之前拦截它。在jQuery中，这是您在domReady事件中附加的处理程序。这假设你的表单有id =＆＃34; formid＆＃34;，你可以通过设置everythingIsOkay = false来暂停回发。

＆＃13;

$(document).ready(function () {
    $("#formid").submit(function(event) { //Catch form submit event
        event.preventDefault(); //Stop it from posting back unless you tell it to
        var everythingIsOkay = true;
      
        //Do your processing here
      
        if(everythingIsOkay){
            document.forms["formid"].submit(); //Go ahead and postback
        }
    });
});

＆＃13;

在http请求发生之前，在表单提交上调用JS函数

2 个答案: