Track dynamic content while scrolling on the page in DTM

These days many websites have dynamic content loading feature whenever you scroll down to the bottom of the page. Ecommerce sites like flipkart, myntra loads the additional products when users scroll to the last row of the products detail page. Sometimes, few sites use this for search results. Google uses such dynamic content loading for its google image search result.

It is important for marketers to understand how far a user has gone to find their favorite products. After this they can optimize the additional content of the page which will be loaded later on.
Tracking on such dynamic is bit tricky and you can’t rely much on your developer. To deal with that, DTM is very much efficient to track such dynamic content loading.
Ask your dev team to add a unique “div” whenever a new set of content will be loaded on the page when user does complete scroll.
Create an event based rule with condition “enter viewport” and add your unique div id in the required field as shown in screenshot below-

Set your eVars, events or props accordingly. One of the tricky part here is how are you going to understand the behavior of this dynamic content. This can be a s.t () call or s.tl () call. If you think that additional content loading is an another pageview then keep this as s.t () call.
You can write a custom script to understand which category of product has been viewed deep.
Ex-
If user is on Men Shoes and the page url is- “www.xyz.com/category/men-shoe” then,
Take out the category name using javascript code from the URL and add this in an eVar. You should be able to attribute this additional dynamic loading with the purchase event which is quite cool and helpful for marketer to understand how deep user is surfing before purchasing a product.
I hope this will be helpful for many ecommerce sites and media sites.

Feel free to add your comments and thoughts in comment section or email me your queries to learnmics@outlook.com