FeedCount-Like Google Analytics Counter
FeedBurner's popular chicklet FeedCount is the most-used way to display the number of subscribers for a feed.
Also, a similar design is used by TwitterCounter to display your Twitter followers.
We'll be creating a dynamic FeedCount-like interface that can display your website's statistics like pageviews, visits, etc. (one or all of them) using PHP.
At the end of this tutorial, we'll have 2 different counters:
- a counter that can display only one metric – basic version
- a counter that can display multiple metrics (some jQuery fun here) – advanced version
Basic Counter
Let's start with the PHP part:
How To Fetch Google Analytics Data With PHP?
We'll be using a PHP class named GAPI that makes using Google Analytics API so easy.
There are 3 variables we need to start using GAPI:
- Google Analytics user that has access to the website stats to be displayed (I suggest creating a new Google Account specifically for this purpose and provide only read access to that website's data. This will prevent using your real Google account in your code which is a good step for security).
- Google Analytics user password.
- Profile ID of the website (it is not the one that starts with UA, rather, it is the ID that appears on browser's address bar when a report of that website is clicked).
GAPI offers a simple usage to access Google Analytics data:
<?php
define('ga_email','yourGoogleEmail');
define('ga_password','yourGooglePass');
define('ga_profile_id','yourProfileID');
require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$ga->requestReportData(ga_profile_id,array('browser','browserVersion'),array('pageviews'));
?>
Now we have the pageviews data of the last 30 days (it is possible to define custom dates, check the GAPI docs.)
(If you want to read more on GAPI, code-diesel has a great article on this class.)
Here is the HTML:
<div id="statsWrap"> <div id="statsDetailsWrap"> <div id="statsCount"> <?php echo $ga->getPageviews() ?> </div> <div id="statsMetric"> pageviews </div> </div> <div id="byGoogle">By Google Analytics</div> </div>
And CSS
#statsWrap {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#statsDetailsWrap {
background: #333333;
float: left;
padding: 1px 3px 1px 1px;
border: #666666 1px inset;
}
#statsCount {
float: left;
padding: 1px 3px;
background: #999999;
color: #FFFFFF;
border: #666666 1px inset;
}
#statsMetric {
float: left;
padding: 3px;
color: #FFFFFF;
}
#byGoogle {
clear: both;
color: #666666;
font-size: 10px;
}
Advanced Counter (With jQuery)
It is possible to fetch multiple data with GAPI & we'll be creating an auto-rotating counter that can display multiple metrics (visits & pageviews).
Let's use a little improved version of the PHP code:
<?php
define('ga_email','yourGoogleEmail');
define('ga_password','yourGooglePass');
define('ga_profile_id','yourProfileID');
require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$ga->requestReportData(ga_profile_id,array('browser','browserVersion'),array('pageviews','visits'));
?>
And a tiny update to the HTML by adding few spans to wrap every metric so we can show/hide them.
<div id="statsWrap"> <div id="statsDetailsWrap"> <div id="statsCount"> <span id="statsPageviews"><?php echo $ga->getPageviews() ?></span> <span id="statsVisits"><?php echo $ga->getVisits() ?></span> </div> <div id="statsMetric"> <span id="statsPageviewsText">pageviews</span> <span id="statsVisitsText">visits</span> </div> </div> <div id="byGoogle">By Google Analytics</div> </div>
I have also updated the CSS a little bit by adding hard-coded width-heights to elements to make sure they will look ok when rotating:
#statsWrap {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#statsDetailsWrap {
background: #333333;
float: left;
padding: 1px 3px 1px 1px;
border: #666666 1px inset;
}
#statsCount {
float: left;
padding: 1px 3px;
background: #999999;
color: #FFFFFF;
border: #666666 1px inset;
width: 40px;
height: 12px;
}
#statsMetric {
float: left;
padding: 3px;
color: #FFFFFF;
width: 50px;
height: 12px;
}
#byGoogle {
clear: both;
color: #666666;
font-size: 10px;
}
And here is the jQuery part which rotates metrics:
<script type="text/javascript">
$(document).ready(function() {
$("#statsPageviews").hide();
$("#statsVisits").hide();
$("#statsPageviewsText").hide();
$("#statsVisitsText").hide();
rotateMetrics();
function rotateMetrics() {
$("#statsPageviewsText").slideDown("slow");
$("#statsPageviews").slideDown("slow", function() {
setTimeout(function() {
$("#statsPageviewsText").slideUp("slow");
$("#statsPageviews").slideUp("slow", function() {
$("#statsVisitsText").slideDown("slow");
$("#statsVisits").slideDown("slow", function() {
setTimeout(function() {
$("#statsVisitsText").slideUp("slow");
$("#statsVisits").slideUp("slow", function() {
rotateMetrics();
});
}, 3000);
});
});
}, 3000);
});
}
});
</script>
In the jQuery part, although it may look complicated, it is definitely not. We used callbacks for the slideUp/slideDown functions & added a little delay between transitions.
That’s all.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!