Issue with custom code in Extension (scroll tracking)

[Callum_TheAA]

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;
        }
    }
});

[GavinAttard]

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

[Callum_TheAA]

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".