Handling extra attributes and logging - when redirecting to external URI from Django app

Question

I recently added an HTML-based share on whatsapp button to my mobile web application built via the Django framework:

<a rel="nofollow" target="_blank" href="whatsapp://send?text=https://example.com" data-link="whatsapp://send?text=https://example.com" data-action="share/whatsapp/share">
<button><img src="whatsapp.svg">Share</span></button>
</a>

Now I'd like to track all the clicks on this share button. Being a server-side developer, an obvious way is to POST to a view, log the click, and then redirect from there. Specifically, in the template:

<form method="POST" action="{% url 'whatsapp_share' %}">
{% csrf_token %}
<button><img src="whatsapp.svg">Share</span></button>
</form>

In the view:

def whatsapp_share(request):
    if request.method == 'POST':
        clicker_id = request.user.id
        # log the click and clicker_id, preferably asynchronously
        return redirect("whatsapp://send?text=https://example.com")

This looks simple enough. But look at the <a> tag closely in the original snippet at the top. It contains data-link and data-action attributes as well.

How do I include these data-* attributes in the redirect as well?

---

Secondly, I feel one drawback of using the aforementioned view-based approach is a server roundtrip. Ergo, in the pure HTML case, the client took care of everything, however, with the Django view involved, the server has to be invoked first (adding latency).

Is there an alternative way to do this such that the client doesn't have to wait for the click to be logged? If so, a simple, quick illustrative example to get me started would be a great.

Answer 1

I'd suggest you to leave link as it is. You don't need form.

Simplest solution is to make ajax call to whatsapp_share url. And ypu don't even need POST request as you're not sending any data

add onclick event to element: <a onclick="logWhatsappClick()">> and then:

function logWhatsAppClick() {
    $.ajax({
      url: your-application.com/log_whatsapp_share,
      method: 'GET',
      success: function(data){
           console.log('Sent log request')
     },
     error: function() {
           console.log('Error') 
     }
     });
}

So when user clicks on your button - application sends log request in background and don't wait for it to complete. In your django view code do not return redirect, just HTTP 200 OK.

Note, that there is no protection for the case when someone will send these requests from other place rather than from your website. It's easy to implement, but I think that it's not very important for this small feature.