CODEWITHSUNDEEP
javascriptfunctioneventsgoogle-analyticstracking
user3160260
user3160260

Reputation: 41

Add Google analytics event tracking to javascript function

Is it possible to add google analytics event tracking to the folowing javascript function?

 $("#wScratchPad3").wScratchPad({

      scratchDown: function(e, percent) {if(percent > 80)window.location.href = 'http://www.url.com';},
      scratchMove: function(e, percent) {if(percent > 80)window.location.href = 'http://www.url.com';},
      scratchUp: function(e, percent) {if(percent > 80)window.location.href = 'http://www.url.com';}

    });

I use the following analytics code:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xx', 'xx');
ga('send', 'pageview');

</script>

Upvotes: 2

Views: 5586

Answers (2)

Josh
Josh

Reputation: 830

Yeah, it's possible. You should use the latest version of Google Analytics (the analytics.js snippet). According to Google:

The analytics.js snippet is part of Universal Analytics, which is currently in public beta. New users should use analytics.js. Existing ga.js users should create a new web property for analytics.js and dual tag their site. It is perfectly safe to include both ga.js and analytics.js snippets on the same page.

once the analytics snippet is called on your page, you can just call the following function in your code wherever you want to track a particular event. You can give it custom category, action, and label names.

ga('send', 'event', 'category', 'action', 'label', value);  //label and value are optional

you can read all about it here: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

in your example, you could do:

$("#wScratchPad3").wScratchPad({

    scratchDown: function(e, percent) {
        if(percent > 80) {
            ga('send', 'event', 'ScratchPad', 'scratchDown');
            window.location.href = 'http://www.url.com';
        }
    },
    scratchMove: function(e, percent) {
        if(percent > 80) {
            ga('send', 'event', 'ScratchPad', 'scratchMove');
            window.location.href = 'http://www.url.com';
        }
    },
    scratchUp: function(e, percent) {
        if(percent > 80) {
            ga('send', 'event', 'ScratchPad', 'scratchUp');
            window.location.href = 'http://www.url.com';
        }
    }

});

Upvotes: 4

ru3sch
ru3sch

Reputation: 796

Depending on which Google Analytics script you're using, you may be able to get away with this. I formatted your code a bit as well to make it easier to read.

$("#wScratchPad3").wScratchPad({

    scratchDown: function(e, percent) {
        if(percent > 80) {
            _gaq.push(['_trackPageview', 'http://www.url.com']);
            window.location.href = 'http://www.url.com';
        }
    },
    scratchMove: function(e, percent) {if(percent > 80)window.location.href = 'http://www.url.com';},
    scratchUp: function(e, percent) {if(percent > 80)window.location.href = 'http://www.url.com';}

});

Can you post which analytics code you're using? Make sure to remove the UA code.

Upvotes: 0

Related Questions