How to make an ajax request before following a link?

Question

JavaScript

Hello!
There is a task to track the click on certain links on the page and record the data on these clicks in the storage.

Suggested scenario:

• Loading Document
  
• Select the necessary elements (for example, by class)
  
• We hang a handler on them
  
• When clicking on a link, we collect the necessary data (what element was clicked on, click coordinates, etc.)
  
• Sending data to the server (via Ajax)
  
• Link going through
  

The problem is that the request does not work out (the link is followed earlier). I suspect that there is some tricky magic to solve this problem. Perhaps there is some way to make the transition happen after the Ajax request is completed. Unfortunately JS is not my forte.

Additionally:

• Tracking the transition through the final page ("passing" get variables, making "pads" with redirects, etc.) is not suitable, I want to do it exactly according to the described scenario (this is how metrics and analytics do it)
  
• The behavior when clicking on a link should not change (here it means that links should normally open in a new window when ctrl is pressed, etc.).
  

Tried doing things like this:

$(document).ready(function () {
   jQuery(".class_name a").click(function(){
      pushClickEvent(this);
      return false;
   });
});

function pushClickEvent(element){
    jQuery.ajax({
        type: "POST",
        dataType: "json",
        url: "some_url",
        data: "some_url",
        success: function(response){
            window.location =  $(element).attr('href');
        }
    });
}

But with this solution, there are problems with opening in a new tab, if you do window.open, then it seems like it is blocked by browsers and the solution is not reliable.

Answer 1

window.open($(this).attr('href'), '_blank');
So have you tried it?

Answer 2

After clicking on the button, call a function in which asynchronous ajax performs the actions you need and if the request is successful, open the link you need.

function pushClickEvent(element){
    jQuery.ajax({
        type: "POST",
        async: true,
        dataType: "json",
        url: "some_url",
        data: "some_url",
        success: function(response){
            window.location =  $(element).attr('href');
        }
    });
}

Answer 3

...
jQuery(".class_name a").click(function(e){
      e.preventDefault();
      pushClickEvent(this);
...

Answer 4

it's not entirely clear what you are trying to do, but before sending ajax, you can execute the function
beforeSend - fires before sending the request
error - if an error occurred
success - if no errors occurred
complete - fires at the end of the request
https://habr.com/ru/post /42426/

function pushClickEvent(element) {
    jQuery.ajax({
        type: "POST",
        dataType: "json",
        url: "some_url",
        data: "some_url",
        success: function(response) {
            //code
        },
        beforeSend: function(xhr) {
            //code
        }
    });
}

if there are transitions within the same site, then the data between pages can be saved in LocalStorage https://learn.javascript.ru/localstorage

Answer 5

Thanks to everyone for the answers, unfortunately I still had to do it through the "rolling" of the label in the GET parameters (it turned out to be easier this way). The reason - in the process of research, scenarios were revealed in which users can open a link to a new window through the context menu and even by dragging the link to a new tab.