Jason Jason - 7 months ago 15
Javascript Question

Using multiple google analytics events on the same page

I am trying to create a script where multiple events are fired and sent to google analytics based on the adverts showing on a page. So far I came up with this however only the first, leader board banner is working while the rest are not. I am sure my code can be simplified as I am no expert in jquery but the issue are the events since neither the click events are working. When I include an alert for debugging this gets fired so not sure whats wrong with my code.

<!-- Tracking -->
<script>
jQuery(document).ready(function($) {

//leaderboard
$(".ad_leaderboard").ready(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_leaderboard_term']; ?>', 'view', '<?php echo $GLOBALS['ad_leaderboard_title']; ?>');
});

$(".ad_leaderboard").click(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_leaderboard_term']; ?>', 'click', '<?php echo $GLOBALS['ad_leaderboard_title']; ?>');
});

//medium-rectangle
$(".ad_medium_rectangle").ready(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_medium_rectangle_term']; ?>', 'view', '<?php echo $GLOBALS['ad_medium_rectangle_title']; ?>');
});

$(".ad_medium_rectangle").click(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_medium_rectangle_term']; ?>', 'click', '<?php echo $GLOBALS['ad_medium_rectangle_title']; ?>');
});

//skyscraper
$(".ad_skyscraper").ready(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_skyscraper_term']; ?>', 'view', '<?php echo $GLOBALS['ad_skyscraper_title']; ?>');
});

$(".ad_skyscraper").click(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_skyscraper_term']; ?>', 'click', '<?php echo $GLOBALS['ad_skyscraper_title']; ?>');
});

//halfbanner
$(".ad_halfbanner").ready(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_halfbanner_term']; ?>', 'view', '<?php echo $GLOBALS['ad_halfbanner_title']; ?>');
});

$(".ad_halfbanner").click(function() {
ga('send', 'event', '<?php echo $GLOBALS['ad_halfbanner_term']; ?>', 'click', '<?php echo $GLOBALS['ad_halfbanner_title']; ?>');
});
});
</script>

Answer

You can use .on() to bind a function to multiple events, but you can't use php variable for dynamic event. that because PHP is server side and jQuery is client side. you need collect your PHP data first.

var ad_data_term =  {
    ad_leaderboard:"<?php echo $GLOBALS['ad_leaderboard_term']; ?>", 
    ad_medium_rectangle:"<?php echo $GLOBALS['ad_medium_rectangle_term']; ?>", 
    ad_skyscraper:"<?php echo $GLOBALS['ad_skyscraper_term']; ?>", 
    ad_halfbanner:"<?php echo $GLOBALS['ad_halfbanner_term']; ?>"
    }; 
var ad_data_title = {
    ad_leaderboard:"<?php echo $GLOBALS['ad_leaderboard_title']; ?>", 
    ad_medium_rectangle:"<?php echo $GLOBALS['ad_medium_rectangle_title']; ?>", 
    ad_skyscraper:"<?php echo $GLOBALS['ad_skyscraper_title']; ?>", 
    ad_halfbanner:"<?php echo $GLOBALS['ad_halfbanner_title']; ?>"
    }; 

$(".ad_leaderboard, .ad_medium_rectangle, .ad_skyscraper, .ad_halfbanner").on('ready click', function() {
    var myClass = $(this).attr("class");
    ga('send', 'event', ad_data_term[myClass], 'view', ad_data_title[myClass]);
});

Hope this can help :)