Tracking URL clicks in a survey

@Kakaomame Your setup looks correct to me on first sight. Few things you can check:

• Is the next button clicked? This would at least indicate that the code including setEmbeddedData is executed.
• Is the embedded data „clicked1“ defined before the question block in your flow?
• Do you use simple layout? If yes, you will need setJSEmbeddedData method, need to rename the embedded data only in the flow to „__js_clicked1“ and you explicitly need to load jQuery in the header as it is Not loaded by default.
• Maybe try to implement the code in Qualtrics.SurveyEngine.addOnReady instead.
• When clicking a link, the default action is to navigate to that URL. This might prevent the setEmbeddedData function from executing properly. To prevent this, try using event.preventDefault() within your click function and manually trigger the navigation as shown below.

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery('#myclick1').click(function(event) {
        event.preventDefault(); // Prevent the default action
        Qualtrics.SurveyEngine.setEmbeddedData("clicked1", "1");
        jQuery("#NextButton").click();
        window.open(this.href); // Open the link in a new tab
    });
});

Best

Christian

Thanks, Christian. I have a follow up question. 

• Is the next button clicked? This would at least indicate that the code including setEmbeddedData is executed.  How do I tell whether the “next button is clicked”? I got this code from another question in the Community so I don’t fully comprehend what it is doing. 

I tried Qualtrics.SurveyEngine.addOnReady as well as the code you suggested that manually triggers the navigation--thank you--but unfortunately I still get a 0 click. I’d like to test whether the next button is clicked. 

@Kakaomame Well, the code adds a listener to the element with ID myclick1 when the question is loaded. This listener is executed when the element - in your case it seems to be a link to some Amazon page - is clicked. It then updates the embedded data clicked1 to 1 and automatically clicks the next button of the current page of your survey. So if the JavaScript is correctly embedded and executed, I would expect that the next survey page is shown (just as you would click the next button manually) when the Amazon link is clicked.

Can you provide screenshots of where you added the HTML link, where you added the JavaScript and how your survey flow looks like?

Additionally, it would be helpful to get a screenshot of your browser console (via developer tools) to check for errors.

And where do you check if embedded data clicked1 has changed? The survey must be completed to see this.

And did you check which survey layout you use? Your setup does not work for simple layout…

Best

Christian

Thank you so much for your response!

Starting from your last suggestion, I found that we are indeed using “simple” layout. So, I need to implement your earlier suggestion: “you will need setJSEmbeddedData method, need to rename the embedded data only in the flow to „__js_clicked1“ and you explicitly need to load jQuery in the header as it is Not loaded by default.”  Can you unpack this a bit more for me? Thanks in advance.

I am attaching the screenshots. 

@Kakaomame Good we found it you are using this layout as it behaves a little bit different. 

1. Please add the code below to the HTML editor (<>) of the header in the “Look & Feel” section of your survey to load jQuery.

   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

   Like this: 

   

2. Update your embedded data name in the survey flow to __js_clicked1. The embedded data must have the prefix ‘__js_’. If you later want to have an embedded data named clicked1 without the prefix, you can assign the value of __js_clicked1 back to clicked1 as shown in the second embedded data block in my example. The second block would need to be placed after the question block. If you are fine with __js_clicked1, you do not need a second embedded data block.

   

3. Update your JavaScript of the relevant question to use setJSEmbeddedData. 

   Qualtrics.SurveyEngine.addOnload(function()
   {
       jQuery('#myclick1').click(function(event){
           Qualtrics.SurveyEngine.setJSEmbeddedData("clicked1","1");
           jQuery("#next-button").click();
       });
   });

   Please note that this code automatically clicks the next button besides updating the embedded data field value. If you do not want to continue to the next page but only update the embedded data when the link is clicked, you need to remove the line of code containing #next-button. 

As a result, you should see this in “Data & Analysis” if someone clicks the link: 

To have it complete if someone else is in need of link tracking and does not work with simple layout…

• If you do not use simple layout, it is not necessary to load jQuery in the header.
• The embedded data in the survey flow should not be prefixed with ‘__js_’.
• The jQuery to get the next button element must be adjusted to #NextButton as the ID of the button is different.

Best
Christian