Javascript - determining specific urls clicked

Question

I have a survey in which there are 3 URLs (see HTML below) within the question. We want to track which specific URLs are clicked rather than just a URL was clicked. I have this code for that with the embedded data of clicked=0

Qualtrics.SurveyEngine.addOnload(function() {
  jQuery('#extLink').click(function(event) {
    Qualtrics.SurveyEngine.setEmbeddedData("clicked", "1");
    jQuery("#NextButton").click();
  });
});

But I can't figure out a good way to modify this to be able to know the specific URL clicked, since the jQuery is #extLink and really this code is only counting if something is clicked but not specifically what.

Any advice?

The HTML code is for each option in the survey question.

<div><a href="https://www.directrelief.org/" id="extLink" rel="noopener" target="_blank">Direct Relief</a> - Support for people affected by emergencies</div>

<div><a href="https://water.org/" id="extLink" rel="noopener" target="_blank">Water.org</a> - Provision of safe and accesible water</div>

<div><a href="https://www.feedingamerica.org/" id="extLink" rel="noopener" target="_blank">Feeding America</a> - Works on hunger relief</div>

I don't see any modification in the second version of the code. What am I missing? — Barmar, Jul 26 '23 at 16:59

score 0 · Answer 1 · answered Jul 26 '23 at 21:10

The id of each link should be unique (e.g., extLink1, extLink2, extLink3). id should always be unique on an html page.

Then instead of having to do a separate event handler for each, you can add class='extLink' to all the links. Then:

Qualtrics.SurveyEngine.addOnload(function() {
  jQuery('.extLink').click(function(event) {
    Qualtrics.SurveyEngine.setEmbeddedData(this.id+"_clicked", "1");
    jQuery("#NextButton").click();
  });
});

score 0 · Answer 2 · answered Jul 26 '23 at 21:22

id needs to be unique for each element on page, to style elements together or fetch a group of them with javascript please use classes.

any way this code may solve your problem:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div><a href="https://www.directrelief.org/" class="extLink" id="extLink1" rel="noopener" target="_blank">Direct
            Relief</a> -
        Support for people affected by emergencies</div>

    <div><a href="https://water.org/" class="extLink" id="extLink2" rel="noopener" target="_blank">Water.org</a> -
        Provision of safe and
        accesible water</div>

    <div><a href="https://www.feedingamerica.org/" class="extLink" id="extLink3" rel="noopener" target="_blank">Feeding
            America</a> -
        Works on hunger relief</div>

    <script src="jquery.min.js"></script>
    <script>
        $('.extLink').on('click', (e) => {
            console.log($(e.target).attr("id"))
        })
    </script>
</body>

</html>

score 0 · Answer 3 · answered Jul 28 '23 at 04:02

As others have mention, don't reuse ids, instead use a class.

The easiest way to store data about an element is to just create a property on that element.

In jQuery, this in the callback function references the element itself, so here we just give this a property of click_count and then increment that every time the link is clicked.

jQuery('.extLink').click(function(event) {
  event.preventDefault(); //just for this example, remove for production
  this.click_count = (this.click_count ?? 0) + 1;
  //Qualtrics.SurveyEngine.setEmbeddedData("clicked", this.click_count); //uncomment this for production
  jQuery(this).siblings('span').text(this.click_count); //remove this for production too
  jQuery('#NextButton').click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a href="https://www.directrelief.org/" class="extLink" rel="noopener" target="_blank">Direct Relief</a> - <span>0</span> - Support for people affected by emergencies</div>
<div><a href="https://water.org/" class="extLink" rel="noopener" target="_blank">Water.org</a> - <span>0</span>  - Provision of safe and accesible water</div>
<div><a href="https://www.feedingamerica.org/" class="extLink" rel="noopener" target="_blank">Feeding America</a> - <span>0</span>  - Works on hunger relief</div>

Although the challenge with this approach for this scenario is that the client also has access to the element properties, so they could changed click count to whatever they want, which would have unintended consequences.

Since we're using jQuery, a great work around to this is to use the .data() method. This allows us to store data with the element, with the benefit that the client has no access to it.

jQuery('.extLink').click(function(event) {
  event.preventDefault();  //just for this example, remove for production
  let $link = jQuery(this);
  
  $link.data('click_count', ($link.data('click_count') ?? 0) + 1);
  //Qualtrics.SurveyEngine.setEmbeddedData("clicked", this.click_count); //uncomment this for production
  jQuery(this).siblings('span').text($link.data('click_count')); //remove this for production too
  jQuery('#NextButton').click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a href="https://www.directrelief.org/" class="extLink" rel="noopener" target="_blank">Direct Relief</a> - <span>0</span> - Support for people affected by emergencies</div>
<div><a href="https://water.org/" class="extLink" rel="noopener" target="_blank">Water.org</a> - <span>0</span>  - Provision of safe and accesible water</div>
<div><a href="https://www.feedingamerica.org/" class="extLink" rel="noopener" target="_blank">Feeding America</a> - <span>0</span>  - Works on hunger relief</div>

Javascript - determining specific urls clicked

3 Answers3