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;
        });
    });
});

...但这需要你研究承诺。

我正确处理此按钮点击事件吗？

1 个答案: