Javascript extention does not sett variable

[Bknapstad]

Hi guys hope you can help.

I'm trying to implement scrolltracking using the javascript extention, but ive encountered a problem.

var scrolledPast75 = false;
var scrolledPast50 = false;
var scrolledPast25 = false;
var scrolledTo100  = false;

var startscroll = Date.now();


polls = window.setInterval(function()
{
try {
		var winmax = document.body.scrollHeight - window.innerHeight
    	scrolled = window.pageYOffset/winmax;
    	
	if ( scrolled > 0.97 && scrolledTo100 == false){
		scrolledTo100 = true;
		scrolled100Time=Date.now();
		utag.link({ 
			event_category:"Scroll Depth", 
    		event_action:"Scroll", 
    		event_lable:"100%",
    		event_value:String(100),
    		time_to_action: String((scrolled100Time-startscroll)/100/60),
    		pixel_depth: String(window.innerHeight)
  		});
		
		
    }
	if(  scrolled > 0.75 && scrolledPast75 == false){
		scrolledPast75 = true;
		scrolled75Time=Date.now();
		utag.link({ 
			event_category:"Scroll Depth", 
    		event_action:"Scroll", 
    		event_lable:"75%", 
    		event_value:String(75),
    		time_to_action: String((scrolled75Time-startscroll)/100/60),
    		pixel_depth: String(window.innerHeight)
  		});
	
    }
	if(scrolled > 0.50 && scrolledPast50 == false){
		scrolledPast50 = true;
		scrolled50Time=Date.now();
		utag.link({ 
			event_category:"Scroll Depth", 
    		event_action:"Scroll", 
    		event_lable:"50%", 
    		event_value:String(50),
    		time_to_action: String((scrolled50Time-startscroll)/100/60),
    		pixel_depth: String(window.innerHeight)
  		});
	

    }
    if(scrolled > 0.25 && scrolledPast25 == false){
		scrolledPast25 = true;
		scrolled25Time=Date.now();
		utag.link({ 
			event_category:"Scroll Depth", 
    		event_action:"Scroll", 
    		event_lable:"25%", 
    		event_value:String(25),
    		time_to_action: String((scrolled25Time-startscroll)/100/60),
    		pixel_depth: String(window.innerHeight)
  		});
	
    }
    if(scrolledPast75 == true && scrolledPast50 == true && scrolledPast25 == true && scrolledTo100 == true){
    window.clearInterval(polls);
    }
    }
catch (err){
}
}, 500);

this is the code I'm using, and if i enter it in to the console it works like a charm.

but if i use the javascript extention

var scrolledPast75 = false;
var scrolledPast50 = false;
var scrolledPast25 = false;
var scrolledTo100  = false;

 these vars are not set, and my script loops every 500 ms if any condition is met.

Can you guys see what im doing wrong?

[Bknapstad]

If I use the Tealium custom container the exact same script works.

Is there a reson why thats the case?

[davidcreason · Accepted solution]

@Bknapstad try wrapping your code in an anonymous function and pass it window. Should be scoped to DOM Ready in the extension.

(function(){

  //your code here

})(window);

[Bknapstad]

Thank you!

This worked. Do you recomend using the javascript extention or a custom tag?

[davidcreason]

An extension would be the proper place because it not loading any kind of tag or making any request. It's just providing data to the tags.