Google Analytics has a suite of Enhanced Ecommerce tools that let you see which products are getting viewed and clicked on in pages that aggregate them, such as category pages. It can include position so you can see how much of a boost it is to be first in line. There’s some work involved in setting this up, though, and I thought I’d record it for my own and others’ reference.
The simplest way to do this is to push all of the products as one big group impression, which is how the Enhanced Ecommerce documentation tells you to do it. We wanted to be more subtle, though, and use impressions to learn whether people were interacting with the page; i.e., to send impressions only when the products had actually been in view.
Let’s suppose three carousels of products for which we want to track impressions and clicks. I’ll assume a very simple carousel markup, where the items inside the carousel div are links that have data attributes with all the product information. Throughout this I’ll be simplifying so that the core ideas aren’t muddied by syntax.
I’m going to walk through the JavaScript top down. First, the document.ready call; inside it we keep track of which carousel panels have been visible on the visitor’s screen, and push product impression information for the visible products when a carousel is first scrolled into view or is clicked through on to a previously-unviewed panel. We also push product click information when a product is clicked on.
Each of our three carousels in this example has three panels. If the number of panels per carousel changes depending on the size of the viewer’s screen, you’ll want to put in some window size checks and adjust accordingly.
What are those things being sent to the pushProductClick and pushProductImpressions functions? They are objects or arrays of objects, where the object properties are information about the product, which list it is in, and where in the list it occurs. I’ve used the namespacing syntax for a jQuery plugin here (I’ll also point you to a short and sweet Stack Overflow about the difference between $.myFunction and $.fn.myFunction).
Finally, we have the push functions themselves, which take the product object or array and execute the appropriate dataLayer.push command. The product click push is more complex than the product impression push; one gotcha I ran into is that the productObj object must be enclosed in square brackets, despite being only a single thing. The eventCallback is typically a window.location, but if you set that, a visitor who tries to open a link in a new tab will also get it in the current tab. Making that a simple return statement and not preventing default in the click handler (above) allows the data to be sent to GA while also allowing the visitor to interact with the link in the way they choose.
The Google Tag Manager side of the setup is pretty standard. It matches the setup in the Enhanced Ecommerce documentation except for one detail: the trigger for the product impressions is not the event gtm.dom but the event productImpressions, mirroring the product click setup. You have to dig down a bit to get the data layer turned on, and you can’t test it in preview mode, unfortunately, but the GTM side is simple enough that it’s not too worrisome once you’ve console.debugged your way to confidence that your product objects and arrays are correct.
Photo of beach sand on Baltrum Island, Germany by grafik_design on Pixabay.