Skip to main content

Tracking Clicks

Beyond form submissions, tracking other interactive elements such as buttons, links, etc. is vital for a comprehensive understanding of user behavior. Associating actions like a button click with specific conversion events can provide deeper insights into user engagement.

To track interactions with e.g. a button, add an event listener that triggers an analytics event upon clicking. Below is an example using the analytics object:

document.addEventListener('DOMContentLoaded', function () {
  // Replace '.some-button' with your button's selector.
  // Ensure that the selector is unique, so you don't accidentally track clicks on other elements
  const button = document.querySelector('.some-button')
  button.addEventListener('click', function () {
    dreamdata.track('Clicked button') // Replace 'Clicked button' with your specific event name
  })
})

Ensure to replace .some-button with the actual CSS selector for the button you are tracking and 'Clicked button' with a descriptive event name that reflects the action. You will need to map this event to a conversion inside the Dreamdata product.

Tracking clicks on any other element, such as a link, can be done in a similar way. Just replace the selector and event name accordingly.

Example: Tracking All PDF Clicks on Your Website​

This script helps track when users click on links that point to PDF files on your website.

document.addEventListener('DOMContentLoaded', function() {
    var links = document.querySelectorAll('a');
    links.forEach(function(link) {
        link.addEventListener('click', function(event) {
            var href = link.getAttribute('href');

            if (!href || !href.endsWith('.pdf')) {
                return;
            }

            var fileName = href.substring(href.lastIndexOf('/') + 1);

            dreamdata.track('PDF file clicked: ' + fileName);
        });
    });
});

How It Works:​

  • The script waits until the DOM content is fully loaded before attaching the event listeners to all anchor (<a>) tags on the page.
  • For each link, it checks whether the href attribute is defined.
  • If the href ends with .pdf, the script extracts the PDF file name from the URL and sends the event to Dreamdata.

Use the code in your codebase (Recommended)

If you are technical and have access to your codebase, you can add the above code snippet to your website's JavaScript file. This will allow you to track button clicks and other interactions on your website.

Trigger a tracking event in Google Tag Manager​

If you have set up tracking with Google Tag Manager, you can still trigger an individual tracking event from a script using similar to the one below:

<script>
  ;(function () {
    dreamdata.track('Clicked button')
  })()
</script>