Skip links
Go to nilly.io
nilly.io - hub for support and updates
Published in: Help

Track button clicks and form submissions

Author
Published on:

Tracking user interactions on your website can provide valuable insights into how visitors engage with your content and help you make informed decisions about how to improve your website’s user experience – all while maintaining the privacy of your visitors!

Tracking a button click

If you want to track button clicks without a value, you can use the ny.track() function with an object that contains the name key. Here’s an example of how to track a button click on a web page:

<button onclick="ny.track({ name: 'Button Clicked' })">Click me</button>

In this example, the ny.track() function is called when the button is clicked. The object passed to the ny.track() function contains only the name key, which is set to a descriptive string value that identifies the event being tracked. In this case it’s set to Button Clicked. You can add this code directly to the HTML of your web page wherever you want to track the button click event.

Tracking a button with a value

If you want to track a button that contains a value, for example a button on a shopping website that contains the unit price of $20, we can use the following code:

<!-- The HTML -->
<button id="my-button">Click me!</button>

/* The Javascript */ 

// Get a reference to the button
var button = document.getElementById("my-button");

// Add an event listener to the button
button.addEventListener("click", function() {
    ny.track({
        name: "Added to cart",
        value: 20,
        unit: "USD"
    });
});

In this example, we have a simple button element with the ID my-button. Inside the script tags, we’ll get a reference to the button element and add an event listener to it. Inside the event listener, we’ll call the ny.track() function with an object that contains a „name“ value to identify the event, a „value“ value to specify the value of the button, and a „unit“ value to specify the currency unit.

Tracking multiple buttons with different values

If you have multiple buttons with different values, you can use data attributes to store the values and retrieve them inside the event listener:

// Add event listeners to each button
document.querySelectorAll(".trackable-button").forEach(function(button) {
    button.addEventListener("click", function() {
        var value = parseFloat(button.getAttribute("data-value"));
        ny.track({
            name: "Added to cart",
            value: value,
            unit: "USD"
        });
    });
});
In this example, we’ll use the querySelectorAll() method to select all elements with the .trackable-button class and add an event listener to each of them. Inside the event listener, we’ll retrieve the value of the button from the „data-value“ attribute using the getAttribute() method and convert it to a float using parseFloat(). We’ll then pass this value to the ny.track() function, along with a „name“ and „unit“ value to identify the event and the currency unit.

Tracking form submissions

Last but not least, if you want to track how many people have submitted a contact form or subscribed to a newsletter, you can use the ny.track() function:

<form onsubmit="ny.track({ name: 'Form Submitted' })">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Submit</button>
</form>

In this example, the ny.track() function is called when the form is submitted. The object passed to the ny.track() function contains only the name key, which is set to a descriptive string value that identifies the event being tracked. In this case it’s set to Form Submitted.

You can see all the events you have set up in your nilly.io dashboard under the Events section. Let us know if you’re missing something or if you’d like to track another element of your website, we’re happy to help!

More articles