I’m surprised that more integrations and systems don’t automatically include Google Analytics Event Tracking in their platforms. Much of my time working on clients’ sites is developing tracking for Events to provide the client with the information they need on what user behaviors are working or not working on the site.
Most recently, I wrote about how to track mailto clicks, tel clicks, and Elementor form submissions. I’m going to continue to share the solutions that I’m writing with the hopes that it helps you to better analyze your site or web application performance.
This example provides a very simple means of incorporating Google Analytics Event Tracking into any anchor tag by adding a data element that includes the Google Analytics Event Category, Google Analytics Event Action, and Google Analytics Event Label. Here’s an example of a link that incorporates the data element, called gaevent:
<a href="https://martech.zone#" data-gaevent="Category,Action,Label">Click Here</a>A prerequisite for your site is including jQuery in it… which this script is powered with. Once your page is loaded, this script adds a listener to your page for anyone clicking on an element with gaevent data… then it captures and parses the category, action, and label you specify within the field.
<script>
$(document).ready(function() {
$(document).on('click', '[data-gaevent]', function(e) {
var $link = $(this);
var csvEventData = $link.data('gaevent');
var eventParams = csvEventData.split(',');
if (!eventParams) { return; }
eventCategory = eventParams[0]
eventAction = eventParams[1]
eventLabel = eventParams[2]
gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
//alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
});
});
</script>Notice: I’ve included an alert (commented out) so that you can test what’s actually passed.
If you’re running jQuery on WordPress, you’ll want to modify the code just a little since WordPress doesn’t appreciate the $ shortcut:
<script>
jQuery(document).ready(function() {
jQuery(document).on('click', '[data-gaevent]', function(e) {
var $link = jQuery(this);
var csvEventData = $link.data('gaevent');
var eventParams = csvEventData.split(',');
if (!eventParams) { return; }
eventCategory = eventParams[0]
eventAction = eventParams[1]
eventLabel = eventParams[2]
gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
//alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
});
});
</script>It’s not the most robust script and you may need to do some additional clean-up, but it should get you started!
© 2021 DK New Media, LLC, All Rights Reserved
