javascript - 我是否正确处理此按钮单击事件？

Question

我在页面上有一个按钮(id =“searchButton”)，单击该按钮会提交表单(帖子)。在发帖之前，我想将一些信息记录到 Google Analytics。所以我有以下 JS 代码来执行此操作:

$(document).ready(function () {
    // Log some information to GA
    $('#searchButton').click(function (e) {
        LogSearch();
        LogDestinations();
        LogTourTypes();
        LogIndependent();
    });
});

我想知道我这样做是否正确？具体来说，我很好奇实际的帖子是否发生在所有四个函数调用之前。或者，所有四个函数调用是否会在表单实际在所有浏览器上一致地发布之前完成？我希望表单能够发布，但我也希望这四个 JS 函数首先执行。

如果有帮助，我将使用 Google Analytics 发送事件的标准方法来调用它们:

ga('send', 'event', "Accommodation Search", "Accommodation Search Counter", "", 0);

以及定义按钮的 HTML:

    <div class="col-xs-12">
        <input type="submit" value="Search" class="btn btn-primary" id="searchButton" />
    </div>

Answer 1

通常他们“可能不会”成功，因为页面正在开始卸载。

如果您的目标是 modern brosers ，您可以使用transport: beacon旨在解决此特定问题的标志:

ga('send', 'event', 'click', 'download-me', {transport: 'beacon'});

但是，这不适用于较旧的浏览器或 IE。

如果您想定位这些浏览器，通常只需将重定向延迟一小段时间，以希望请求能够在此时完成:

$(document).ready(function () {
    $('#searchButton').click(function (e) {
        // Prevent the link from working normally
        e.preventDefault();

        // Log some information to GA
        LogSearch();
        LogDestinations();
        LogTourTypes();
        LogIndependent();

        // Fire up the link after 500 milliseconds
        var href = $(this).attr("href");
        setTimeout(function() {
            document.location.href = href;
        }, 500);
    });
});

如果您确实想要确保发送所有事件，则可以使用 analytics event callback ，将其包装为 promises并像上面一样启动链接。这应该看起来像这样:

$(document).ready(function () {
    $('#searchButton').click(function (e) {
        // Prevent the link from working normally
        e.preventDefault();

        // Log some information to GA, return a promise
        var allEventsSentPromise = SendAllEvents();

        // Fire up the link after promise has resolved
        var href = $(this).attr("href");
        allEventsSentPromise.then(function() {
            document.location.href = href;
        });
    });
});

...但这需要您研究 promise 。