CODEWITHSUNDEEP
javascriptgoogle-analyticssettimeoutgoogle-tag-manager
Doug Fir
Doug Fir

Reputation: 21282

Javascript function as a variable

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?

Upvotes: 0

Views: 282

Answers (3)

Tom
Tom

Reputation: 1041

$('.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.

Upvotes: 0

psg-1
psg-1

Reputation: 211

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!

Upvotes: 1

Paul S.
Paul S.

Reputation: 66364

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

Upvotes: 1

Related Questions