Javascript function as a variable

Question

I'm a digital analyst and am attempting to learn Javascript, especially as our organization now uses Google Tag Manager.

This morning my site was set to track certain outbound links (clicks to the app store) as events. The custom HTML was:

  <script type="text/javascript"> 

$(document).ready(function(){ 

    $('.app-cta a').click(function(){ 
        dataLayer.push({ 'event':'GAevent', 'eventCategory':'App', 'eventAction':'Click to App Store', 'eventLabel':'iOS' }) 
    }); 

});

</script>

But there was an issue (apparently pretty common) where when an individual clicked the exit link, the browser hit the new site before the Javascript had time to pass the parameters to Google Analytics. The suggested workaround was to add a 500 millisecond delay thus:

<script type="text/javascript"> 

setTimeout(function(){
$(document).ready(function(){ 

    $('.app-cta a').click(function(){ 
        dataLayer.push({ 'event':'GAevent', 'eventCategory':'App', 'eventAction':'Click to App Store', 'eventLabel':'iOS' }) 
    }); 

});
},500);

</script>

This worked which made me feel great because it's the second or 3rd time I'd ever used Javascript.

Then I wanted to be a little bolder. I wanted to make the code "neater" and tried to create a variable out of the analytics function, then run setTimeout method against that variable. This is what I tried:

<script type="text/javascript"> 

setTimeout(function(){track_app},500);


var track_app = $(document).ready(function(){ 

    $('.app-cta a').click(function(){ 
        dataLayer.push({ 'event':'GAevent', 'eventCategory':'App', 'eventAction':'Click to App Store', 'eventLabel':'iOS' }) 
    }); 

});


</script>

I realize that this must appear very basic but I'd be grateful if someone could point out why this last attempt did not work? Was my initial attempt (That was working and that I could easily revert to) the "neatest" way of adding the 500 millisecond delay to the analytics function? What would be the best way to integrate the setTimout method?

Have you confirmed that the workaround actually works? To me it doesn't make sense that you'd add the 500ms delay to the function that pushes the data to Analytics. It would make it even more likely to fail. — JJJ
– JJJ, Commented Aug 11, 2013 at 19:17
@Juhana I cannot explain the logic more fully but yes, it does work. — Doug Fir
– Doug Fir, Commented Aug 11, 2013 at 19:21
setTimeout() is not required here. How's dataLayer.push() implemented? — Ravi K Thapliyal
– Ravi K Thapliyal, Commented Aug 11, 2013 at 19:23
@Juhana I just spoke to my buddy. He told me that the setTimeout here actually sets a delay on the outbound link $('.app-cta a'), thus allows 500 milliseconds for the data to transfer — Doug Fir
– Doug Fir, Commented Aug 11, 2013 at 19:25

Paul S. · Accepted Answer · 2013-08-11 19:23:32Z

1

You almost did it; track_app has to be a whole function, not just the function body

var track_app = function () {
        $(document).ready(function () {
            $('.app-cta a').click(function () { 
                dataLayer.push({'event': 'GAevent', 'eventCategory': 'App', 'eventAction': 'Click to App Store', 'eventLabel': 'iOS'});
            });
        });
    };

setTimeout(track_app, 500);

answered Aug 11, 2013 at 19:23

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Doug Fir Over a year ago

Thanks Paul makes sense I'll remember that

psg-1 · Accepted Answer · 2013-08-11 19:31:37Z

1

You're basically setting a timeout on a function that executes track_app, that is, the return value of the .ready() function (whatever that is), not the function itself.

That's why the second iteration of your code is not behaving like the first. You can change that into:

setTimeout(track_app,500);

var track_app = function () {
    $(document).ready(function(){ 
        $('.app-cta a').click(function(){ 
            dataLayer.push({ 'event':'GAevent', 'eventCategory':'App', 'eventAction':'Click to App Store', 'eventLabel':'iOS' }) 
        }); 
    });
});

EDIT: Paul beat me to it!

answered Aug 11, 2013 at 19:31

psg-1

2111 silver badge3 bronze badges

Comments

Tom · Accepted Answer · 2013-08-11 23:09:27Z

0

$('.app-cta a').on('click', function (event) {
    event.preventDefault();

    //do your Google Analytics stuff here

    var href = $(this).closest('a').attr('href');
    setTimeout(function () {
        window.location = href;
    }, 500);
});

The above is off the top of my head, but the idea is that when someone clicks a link, you stop the browser from naturally following the link (that's the preventDefault method call). Once you've stopped the browser from following the link, you do your GA stuff, then set a timeout to navigate the browser to the link's href attribute.

I don't know GA that well, but I wouldn't be surprised if there wasn't something in there already that deals with this scenario - i.e. the browser follows the link before the JS can execute.

edited Aug 11, 2013 at 23:09

answered Aug 11, 2013 at 20:29

Tom

1,0598 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript function as a variable

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related