Issue with custom code in Extension (scroll tracking)

Bronze Contributor
Bronze Contributor

Hi all,

I have recently added some "scroll tracking" code into tealium via a new extension but for some reason the code does not fire when using the tealium tools chrome extension. The code works when running in the console, but not inside tealium. Any ideas?

 

//scroll tracking
var maxScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var percentageObj = {};
var percentagesArr = [25,50,75,100];
window.addEventListener("scroll", function (event) {
    var scrollVal = this.scrollY;
    for(var i =0; i<percentagesArr.length;i++){
        var currentPercentage = percentagesArr[i];
        var scrollPercentage = parseInt((maxScrollHeight/100) * currentPercentage);
        if(scrollVal >= scrollPercentage && !window.percentageObj[scrollPercentage.toString()]){
            console.log("scrolled past - " + currentPercentage.toString() + "%");
			utag.link({
				"eventCategory": location.pathname,
				"eventAction": "Scroll Depth",
				"eventLabel": currentPercentage.toString() + "%",
			});
            window.percentageObj[scrollPercentage.toString()] = true;
        }
    }
});
2 REPLIES 2

Issue with custom code in Extension (scroll tracking)

Tealium Expert
Tealium Expert

Hi

the issue seems to be around this. 

window.percentageObj

changed to 

percentageObj

as you defined it locally. 

Here is the updated code

//scroll tracking
var maxScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var percentageObj = {};
var percentagesArr = [25,50,75,100];
window.addEventListener("scroll", function (event) {
    var scrollVal = this.scrollY;
    for(var i =0; i<percentagesArr.length;i++){
        var currentPercentage = percentagesArr[i];
        var scrollPercentage = parseInt((maxScrollHeight/100) * currentPercentage);
        if(scrollVal >= scrollPercentage && !percentageObj[scrollPercentage.toString()]){
            console.log("scrolled past - " + currentPercentage.toString() + "%");
			utag.link({
				"eventCategory": location.pathname,
				"eventAction": "Scroll Depth",
				"eventLabel": currentPercentage.toString() + "%",
			});
            percentageObj[scrollPercentage.toString()] = true;
        }
    }
});

Gavin

Research your Experience | Improve and Evolve | Leave no one behind
- Don't forget to mark a solution as accepted if it hits the mark -

Issue with custom code in Extension (scroll tracking)

Bronze Contributor
Bronze Contributor

Thanks for the help Gavin.

The code works (again in the developer console) but stops after the console log inside tealium when testing.

console.log("scrolled past - " + currentPercentage.toString() + "%");

It doesn't fire the utag.link after the above console log :(

The scope I am using is "DOM Ready Extensions".