單擊鏈接時執行異步AJAX調用，然後跟隨鏈接

我們在我們的頁面上有一個鏈接，我們要跟蹤其用法。目前，這不是一個真正的鏈接。這是一個<div>標記，其數據屬性包含目標和綁定的點擊處理程序。單擊鏈接時執行異步AJAX調用，然後跟隨鏈接

點擊時，我們將數據發送到谷歌Analytics（分析），然後觸發與window.location = url頁面加載在短暫的延遲之後，因此，我們相信該數據已經走過了。

此方法可行，但它有一個主要缺陷：clickable元素實際上並不是一個鏈接，並且只是部分行爲。例如，我無法使用鼠標滾輪點擊它並在單獨的選項卡中打開鏈接（如您所期望的那樣），或者我無法右鍵單擊它並獲得與上下文關聯的菜單鏈接（因爲它不是鏈接）。

是否有一種方法可以使用<a>標記並獲取真實鏈接的行爲，攔截點擊事件，與Google Analytics進行交互，然後在延遲一段時間後正常關注鏈接（以確保數據通過），而不必重新定向自己，而不必失去功能？

來源

2013-11-27 Gabriele Cirulli

問題似乎是有關獲取鼠標中鍵點擊，而比執行異步調用。 – Blexy

一般來說，我想說的是讓鏈接在執行ajax調用時具有正常行爲。 –

您可以使用event.preventDefault()以防止跟着鏈接：

$('a').click(function(e){ 
    e.preventDefault(); 
    var href = this.href; 
    setTimeout(function(){ 
     window.location = href; 
    }, 2000) 
});

來源

2013-11-27 16:10:55 levi

這仍然不能解決問題。理想的解決方案應該是阻止鏈接執行自己的行爲，而不是強制進行頁面更改。 –

除了頁面更改外，您還期待什麼行爲？ – levi

我遇到的問題是，如果我使用鼠標滾輪而不是左側按鈕單擊鏈接，我希望它在單獨的選項卡中打開。只有當點擊事件沒有通過javascript被篡改時，或者至少沒有停止過。這也意味着如果我右鍵點擊鏈接並點擊「在新標籤中打開」，它應該可以正常工作。 –

隨着new HTML5 standards，不能你換你<div>在<a>標籤？然後，你可以這樣做：

內聯：

<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);"> 
    <div id ="blah"></div> 
</a>

的jQuery：

$('gaEvent').on('click', function(){ 
    _gaq.push(['_set', 'hitCallback', function(){ 
     window.location = url; // you'll still have to define this somewhere 
    }]); 

    _gaq.push(['_trackEvent','category','action','label']); 
});

我完全引用這個SO後 - Track event in google analytics upon clicking form submit

來源

2013-11-27 16:13:14 Blexy

這仍然行不通。中間點擊這樣的鏈接仍然會在同一個標籤中打開。沒有辦法在鏈接上擁有正確的href並自然地「執行」嗎？ –

我很困惑。中間點擊是什麼意思？如果你擔心它在同一個標籤中打開，爲什麼不把'target ='_ blank''添加到錨點。然後你可以添加你的onclick內聯。我跟着你嗎？ – Blexy

如果您使用鼠標滾輪單擊鏈接，在大多數瀏覽器和大多數計算機上，它將在不同的選項卡中打開，即使它沒有target =「_ blank」。這是我使用了很多東西，我希望擁有它。如果該機制起作用，這也意味着可以右鍵單擊鏈接並單擊「在新選項卡中打開」來執行此操作。 –

單擊鏈接時執行異步AJAX調用，然後跟隨鏈接

回答

相關問題