The Product List Performance report in Google Analytics V3 is the place where you can see how many times a product showed up within a list (product impressions), how many times was clicked (product clicks), added to cart, went to checkout and how many times was bought. Pretty cool, right?<\/p>\n
But how exactly the product impressions are counted? Can we trust those numbers in the report or should we question that metric?<\/p>\n
Let\u2019s look at this process in more detail.<\/strong><\/p>\n All started when a client of ours in the real estate vertical wanted to implement an internal system which will provide a widget containing fitted properties for the users when browsing their website. How will the client know if a user is suited to receive a personalized recommendation? Well, we had implemented a system which attributed points to that user depending on his actions on the website but this is a subject to another article.<\/p>\n Having this recommendation system in mind we started to develop the tracking plan and picture how the data will be reported in Google Analytics in a manner that could offer insights for the business. The main idea was to raise the number of leads per user meaning that a user will contact more agencies than before because it is supposed that he will receive better properties recommendations within that widget.<\/p>\n After analyzing the tracking plan we concluded that a big issue will be the Product List Performance report and let\u2019s see why.<\/p>\n The widget itself is a list because it loads a list of properties so we had to implement product impressions and product clicks from enhanced ecommerce.<\/p>\n When a list of products is loaded <\/em>we send this information to Google Analytics by sending a request containing the object structure as described in the Enhanced Ecommerce documentation for Product Impressions.<\/p>\n This object can be composed by scratching the DOM and grabbing the product info or by reading the information from dataLayer if available.<\/p>\n This request is sent when a product is loaded<\/strong> in the DOM, not when a user is actually seeing the product which makes a huge difference.<\/p>\n We wanted to measure the performance of the widget but it will be correct to compare 2 widgets in this scenario:<\/p>\n This example wouldn\u2019t have told us the widget performance.<\/p>\n So what did we do?<\/strong><\/p>\n First of all we had to be sure that we will collect product impressions only when a widget enters in the user\u2019s viewport. For that to happen we\u2019ve created a script (custom HTML type in GTM) that can detect when a property is in viewport and grabs product information that we need to build productImpressions object.<\/p>\n This is how it works:<\/strong><\/p>\n window.scrollingTracker = { <\/p>\n In the above code we\u2019ve declared the keys that we will use to structure the data we need.<\/p>\n itemSelector: ‘.box-recomandate\u2019<\/em><\/p>\n Is selecting the element where the recommended properties appeared. It is implementation dependent so you should change its value.<\/p>\n currentItemSelector: null<\/em><\/p>\n This key is set null<\/strong> by default because further in the script it will be assigned a value of \u201citemSelector\u201d. Why? Because we will collect the value of properties entered in the viewport only once even though the user is scrolling up and down and the property is viewed multiple times.<\/p>\n itemIdAttr: ‘data-id-cod’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemNameAttr: ‘data-name’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemPriceAttr: ‘data-price’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemPositionAttr: ‘data-position’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemBrandAttr: ‘data-camere’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemCategoryAttr: ‘data-judet’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemSourceAttr: ‘data-recomandation-source’, \/\/Implementation DEPENDENT<\/em><\/p>\n itemListAttr: ‘data-id-list’,<\/em><\/p>\n itemVariantAttr: ‘data-zona’,<\/em><\/p>\n These are the property attributes that will be used in building the productImpressions object.<\/p>\n itemOffsetLimit: 0.3, <\/em><\/p>\n This means that we are collecting the property information when is 70% visible in the viewport<\/p>\n scrollTimeLimit: 500, <\/em><\/p>\n We set a minimum time limit for a property to stay in the viewport. You can change this at whatever time you want but we considered if a property stays half a second in the user\u2019s view port it is enough time for that property to be noticed and to attract the user’s attention.<\/p>\n function gaIsElementInViewport(el) {<\/p>\n var top = el.offsetTop;<\/p>\n var left = el.offsetLeft;<\/p>\n var width = el.offsetWidth;<\/p>\n var height = el.offsetHeight;<\/p>\n \/\/ console.log(top + ” ” + left + ” ” + width + ” ” + height);<\/p>\n while (el.offsetParent) {<\/p>\n el = el.offsetParent;<\/p>\n top += el.offsetTop;<\/p>\n left += el.offsetLeft;<\/p>\n }<\/p>\n var itemOffsetHeightMargin = window.scrollingTracker.itemOffsetLimit * height;<\/p>\n return (<\/p>\n top >= (window.pageYOffset – itemOffsetHeightMargin) &&<\/p>\n left >= window.pageXOffset &&<\/p>\n (top + height) <= (window.pageYOffset + window.innerHeight + itemOffsetHeightMargin) &&<\/p>\n (left + width) <= (window.pageXOffset + window.innerWidth)<\/p>\n );<\/p>\n }<\/p>\n Afterwards we\u2019ve declared a function that will help us further in the script to calculate the distance from the page top and left to the selected widget.<\/p>\n function getElementsInViewport() {<\/p>\n if(window.scrollingTracker.currentItemSelector === null) {<\/p>\n window.scrollingTracker.currentItemSelector = window.scrollingTracker.itemSelector;<\/p>\n }<\/p>\n var elems = document.querySelectorAll(window.scrollingTracker.currentItemSelector);<\/p>\n var el = [];<\/p>\n for (var i = 0; i < elems.length; i++) {<\/p>\n var elId = elems[i].getAttribute(window.scrollingTracker.itemIdAttr);<\/p>\n var elName = elems[i].getAttribute(window.scrollingTracker.itemNameAttr);<\/p>\n var elPrice = elems[i].getAttribute(window.scrollingTracker.itemPriceAttr);<\/p>\n var elPosition = i + 1;<\/p>\n var elBrand = elems[i].getAttribute(window.scrollingTracker.itemBrandAttr);<\/p>\n var elVariant = elems[i].getAttribute(window.scrollingTracker.itemVariantAttr);<\/p>\n var elList = elems[i].getAttribute(window.scrollingTracker.itemListAttr);<\/p>\n var elCategory = elems[i].getAttribute(window.scrollingTracker.itemCategoryAttr);<\/p>\n var elSource = elems[i].getAttribute(window.scrollingTracker.itemSourceAttr);<\/p>\n if (window.scrollingTracker.visitedElems[elId] !== 1) {<\/p>\n if (gaIsElementInViewport(elems[i])) {<\/p>\n \/\/console.log(elId);<\/p>\n window.scrollingTracker.visitedElems[elId] = 1;<\/p>\n el.push({<\/p>\n ‘id’: elId,<\/p>\n ‘name’: elName,<\/p>\n ‘price’: elPrice,<\/p>\n ‘position’: elPosition,<\/p>\n ‘category’: elCategory,<\/p>\n ‘variant’: elVariant,<\/p>\n ‘brand’: elBrand,<\/p>\n ‘list’: elList,<\/p>\n ‘dimension53’: elSource,<\/p>\n ‘metric5’: 1<\/p>\n });<\/p>\n }<\/p>\n }<\/p>\n }<\/p>\n if (el.length != 0) {<\/p>\n \/\/ console.log(el);<\/p>\n dataLayer.push({<\/p>\n ‘ecommerce’: {<\/p>\n ‘impressions’: el<\/p>\n },<\/p>\n ‘event’: ‘productVisibility’,<\/p>\n });<\/p>\n }<\/p>\n }<\/p>\n This is where the magic happens.<\/p>\n The script is pushing to the dataLayer the enhanced ecommerce product impressions object <\/strong>that we need to collect only when the property is visible for the user in the viewport.<\/p>\n You can see that we are also sending \u00a0‘metric5’: 1 <\/strong>in order to count how many times a property was viewed in the viewport. We use this metric for calculation of the following metrics:<\/p>\n To collect the data we created the following tag in GTM in which we checked the \u201cUse Data Layer\u201d feature so the information we sent by the custom HTML tag to be read and sent in Google Analytics.<\/p>\n Last step was to create a custom report with the setup like the one below.<\/p>\n And this is the report that we got in the end.<\/p>\n As you can see, only 12.34% of the properties loaded in the website are visible to the user. This is a great insight that can be used in many ways:<\/p>\n You can find this report under Conversions section > Ecommerce > Product List Performance. Of course, you wouldn\u2019t find it if you don\u2019t have: enhanced ecommerce enabled website tagged with the enhanced ecommerce tracking code product lists defined within the website (ex. Search list, Category list, Recently Viewed Products list, etc.) The Product List Performance […]<\/p>","protected":false},"author":1,"featured_media":1159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[24],"tags":[],"class_list":["post-7244","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics"],"yoast_head":"\n\n
\nitemSelector: ‘.box-recomandate’, \/\/Implementation DEPENDENT
\ncurrentItemSelector: null,
\nitemIdAttr: ‘data-id-cod’, \/\/Implementation DEPENDENT
\nitemNameAttr: ‘data-name’, \/\/Implementation DEPENDENT
\nitemPriceAttr: ‘data-price’, \/\/Implementation DEPENDENT
\nitemPositionAttr: ‘data-position’, \/\/Implementation DEPENDENT
\nitemBrandAttr: ‘data-camere’, \/\/Implementation DEPENDENT
\nitemCategoryAttr: ‘data-judet’, \/\/Implementation DEPENDENT
\nitemSourceAttr: ‘data-recomandation-source’, \/\/Implementation DEPENDENT
\nitemListAttr: ‘data-id-list’,
\nitemVariantAttr: ‘data-zona’,
\nitemOffsetLimit: 0.3, \/\/Implementation DEPENDENT
\nscrollTimeLimit: 500, \/\/Implementation DEPENDENT
\nlastScrollTimestamp: 0,
\ntimeoutID: null,
\nvisitedElems: {}
\n};<\/p>\n\n
![\"use-data-layer-gtm\"](\"https:\/\/datarevolt.agency\/wp-content\/uploads\/2022\/10\/use-data-layer-gtm.png\")
<\/p>\n![\"edit-custom-report\"](\"https:\/\/datarevolt.agency\/wp-content\/uploads\/2022\/10\/edit-custom-report-1024x724.png\")
<\/p>\n![\"report-gtm\"](\"https:\/\/datarevolt.agency\/wp-content\/uploads\/2022\/10\/report-gtm-1024x429.png\")
<\/p>\n\n