Track input of form submission

Data collection and tags
1

In the help section it is described how form submissions can be tracked. However, this only allows me to analyze how often and when forms are submitted if I understand it correctly. How am I able to track the actual text inputs done by users which have been submitted by a button click/submit action?
Is this even possible?

2

Hi! To capture values that your visitors are inputting in the form you need to run additional tag for Form Submission Trigger you mentioned.

I prepared an example of such tag that should work for standard forms, but remember you may need to adjust it for yours.

The script below considers input and select elements. If you use checkboxes or other input types - you may want to extend the script.

<script>
var formToTrack = document.querySelector("form"); //selectors of form elements you want to track
var formNameToTrack = formToTrack.id; //this can be ID, name, or other attribute

formToTrack.querySelectorAll("input:not([type='hidden'],[type='submit']), select").forEach(function(formInput){
    //below Custom Event is sent
    formInputName = formInput.name;
    formInputValue = formInput.value;
    _paq.push(['trackEvent','Form tracking: '+formNameToTrack,formInputName,formInputValue]);
});
</script>

If you want to run this for multiple forms, you can also parametrise it dynamically with form ID or other attribute, but it depends on how you want to arrange your setup. You can run the code just for all elements on your website if you like.

image
image426Ă—626 23.7 KB

So you would end up with tag looking like this:

image
image933Ă—359 54.6 KB

By default Piwik PRO tracks JS errors as Custom Events with “JavaScript Errors” category - remember to analyze them to be able to monitor whether the solution works for all forms on your website properly.

Let us know if you have any feedback or questions :wink:

2 Likes