Using Custom HTML Attributes To Help Track Clicks With Google Analytics
Tags: javascript, tutorial
Published: 2020-01-29 05:37:25

We will be utilizing a simple event listener to help us track when elements are clicked on our websites. This can give us a free birds-eye view of how people are interacting with our elements! Google Analytics will do all the heavy lifting, we just need to initialize a simple script and stick to proper markup. The scope of this article is not using Google Analytics, rather getting relevant data to it!
More on installing GA here: [https://developers.google.com/analytics/devguides/collection/gtagjs]

Here is the problem! We have added a phone number as a button to the header template of our site and we want to know if it is leading to calls or if other buttons containing our company number are getting all the attention. We can do this easily by adding some basic markup and our script.

First the HTML.

For every element we want to track clicks on we will give it the class `click-tracking-ga` and a custom attribute defined as `data-ga-id`. Our markup on elements we want to track should always follow this pattern:

```html
<a class="click-tracking-ga" data-ga-id="Header Phone Button" href="tel:1-855-555-5555" type="button">Click To Call Now!</a>
```

Next lets look at our JavaScript:

```javascript
/* Send click event to Google Analytics via custom attribute tags
 * @param  {Object} e Event object
 */

document.addEventListener('click', (e) => {
    // check that our element has the tracking class, return early if it doesn't
    if (!e.target.classList.contains('click-tracking-ga')) {
        return;
    }
    //use the gtag function passing the event target elements attribute tag we generated on the HTML
    //the 'data-ga-id' will be the same name you use in GA to flag these clicks
    //pass the action as 'Clicked', can be whatever you set up but that is descriptive
    gtag('event',
        'clicks', {
            event_category: `${e.target.getAttribute('data-ga-id')}`,
            event_action: 'Clicked'
        });
});

```


This event handler returns early if the class `click-tracking-ga` is not present but if it is we call the `gtag()` function, passing in the `data-ga-id` of the event target element. It is worth noting that our `event_action:` is predefined to `Clicked` which is important and should not be changed.

Now we will review our setup in Google Analytics to register this event.

First go to your admin panel for the domain property you want to track.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/24gqhzuf7odwl0rvf767.png)

Next click the `Goals` under the View tab

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m4qfgivco6qnwj4o7zme.png)

Next we will make a new goal, using custom

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p7ht44qqkj8cewrkq8n4.png)

We will name our goal with the string from our `data-ga-id`
`Header Phone Button`, select 'Event', and hit continue.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/umavuin4fc4bdwsvnt4y.png)

Next we have to define our parameters. This is very important we only fill in the first two fields. In the first field we enter in our `data-ga-id`, which is
`Header Phone Button` in the 'Category' field. Next input `Clicked` in your 'Action' field. Then hit save and you're done!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ctq0v7w7mgt1p2f62qn.png)

Now you can view this event from within GA from many different views including real-time. Remember to adjust to the 'Today' time view for goals or events or you will not see the for another 24-48 hours!