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:
<?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!
Tags:
Google Analytics,
Javascript,
Php
Related posts
In a report examining quarterly mobile device sales, research firm Gartner found that sales of mobile devices have increased by nearly 14% since the same period in 2009, with smartphone sales accounting for 19% of worldwide devices sales. 
Digital platform company Akamai has released its latest 
Out of the seven social media platforms considered in web analyst firm 
