Tracking elements with dynamic attributes — A Voonik case study
By Deborah Arputham (originally for Zarget blogs)
Voonik’s problem
Voonik wanted to track the visitor interactions on their product listings page. They wished to view the visitor clicks on individual products on the product listings page.
When they ran heatmaps, they noticed that all the clicks were plotted on the very first product/slot. It seemed impossible to not track the clicks on individual products on a product listing feed.
The reason was that their product-display-elements did not have unique ids or names (in other words, a unique selector ID, or a unique ID with which it can be selected or referenced when a visitor clicks on it). Instead, they were all referenced as ‘Product-images.’
Why Voonik’s problem is not just Voonik’s
The above was a very specific use case requirement from Voonik and few other customers. But when we thought through, the difficulty applied to any site with dynamically loading elements which do not have unique IDs. For example, sliding banners (i.e., carousels which have dynamically assigned classes), options of a navigation menu et cetera.
The challenge also extended to all elements that have dynamically generated attributes (IDs or selectors). Such as the wish list icons, add to cart buttons and elements on single page Apps.
Tracking Dynamic elements with Zarget — How it works
Zarget introduced dynamic selectors (an advanced option) to make heatmaps more efficient for such dynamic websites, especially eCommerce sites.
While plotting visitor clicks on Heatmaps, Zarget uses an alternative unique ID to reference elements and ignores the common reference, which in Voonik’s case was ‘product_image’. So instead of using ‘product_image’ as an ID to reference the element, an alternative selector or ID will be used.
After using dynamic selectors, Voonik was able to accurately view Heatmaps for its product feed. They also used dynamic selectors to optimise their filters and navigation menus as well.
Sometimes the best features of a product are built from paying close attention to simple support requests. For us, this was one such enhancement.
Zarget’s heatmaps are innovative, and are accommodative of all kinds of interactive or new age websites, unlike any other competitor/Heatmap provider (Sounds like an open challenge? Well, it is!). The dynamic selector option has taken Zarget’s Heatmap a notch higher with more accuracy and efficiency.
Here’s a word of love from Voonik:
“Zarget helps us track visitor interactions on any dynamic site element. Being an e-commerce site, it proved highly useful to us. We were able to track our visitor’s interactions on the product feed accurately. It helped track clicks on our product filters and navigation menus as well. We were able to see the most used filters. It gave us an idea of the categories or price ranges sought by our customers.”
I don’t want to cliche’-finish this blog by pushing you to signup, but if you’d like to do so — SignUp here! Your first month will be on us
