CODEWITHSUNDEEP
jquerygoogle-analytics
Jason
Jason

Reputation: 433

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>

Upvotes: 0

Views: 141

Answers (2)

Jason
Jason

Reputation: 433

Never mind I have done the below but if you could help me simplify it it would be great :P 

if ($('.ad_leaderboard').length && $('.ad_leaderboard').css('display') != 'none')

{    
    var viewClass = $(".ad_leaderboard").attr("class");
    alert(ad_data_title[viewClass]);
    ga('send', 'event', ad_data_term[viewClass], 'view', ad_data_title[viewClass]);
}

Upvotes: 0

Rhega
Rhega

Reputation: 104

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

Upvotes: 1

Related Questions