Track form events with Matomo

Matomo Analytics is a powerful tool that our team uses every day. In this article, we will demonstrate how we send contact-us form information to Matomo.

We will use 2 great features in our example:

• Event trigger to view the form submit action and its subject: Event Trigger JS docs
• Custom Variables to link lead name to the visit: Custom Variable JS docs

HTML Code:

<form id="contact-us-form" action="#" method="post">
    <!-- NAME -->
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name">
    </div>
    <!-- EMAIL -->
    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" name="email">
    </div>
    <!-- SUBJECT -->
    <div class="form-group">
        <label for="subject">Subject</label>
        <select class="form-control" name="subject">
            <option value="analytics">Analytics</option>
            <option value="crm">CRM</option>
            <option value="other">Other</option>
        </select>
    </div>     
    <!-- BODY -->
    <div class="form-group">
        <label for="body">Comment</label>
        <input type="text" class="form-control" name="body">
    </div>    

    <!-- on button click call function sendFormData() before submit form -->
    <button type="submit" onclick="sendFormData();">
        Send
    </button>
</form>

---

Main Javascript code in your CMS Layout:

<script type="text/javascript">
  var _paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://XXXXX/"; //set your matomo url
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'XXXX']); // set your matomo id
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

---

Javascript code in your CMS page:

<script type="text/javascript">

function sendFormData(){

    //get form data field values

    var formElement = document.getElementById('contact-us-form');    
    var formData = new FormData(formElement);

    if(formData.has('name')){ 
        name = formData.get('name'); 

        //assign custom variable name to the visitor
        _paq.push(['setCustomVariable',1,"name",name,"visit"]);
    }

    if(formData.has('subject')){ 
        subject = formData.get('subject'); 

        //trigger event Contact Form with subject as action
        _paq.push(['trackEvent', 'Contact Form', subject]);

        //assign custom variable subject to the visitor
        _paq.push(['setCustomVariable',2,"subject",subject,"visit"]);    
    }

}

</script>

On Matomo dashboard, we can now collect custom variables and events on:

• Contact Form Event Category: Conversion rate per visits by linking a goal to this event.
• Subject Event Action: We know why visitors/leads contacted us the most. Note that we used a dropdown select to ensure consistent metrics.
• Name variable: Understand how the lead interacted and landed on our website.