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.

Google Analytics Counter

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

Google Analytics Counter DemoDownload

 

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:

GAPI offers a simple usage to access Google Analytics data:

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:

[sourcecode language=”php”]

getPageviews() ?>
pageviews

By Google Analytics

[/sourcecode]

And CSS

[sourcecode language=”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;
}
[/sourcecode]

 

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:

And a tiny update to the HTML by adding few spans to wrap every metric so we can show/hide them.

[sourcecode language=”php”]

getPageviews() ?> getVisits() ?>
pageviews visits

By Google Analytics

[/sourcecode]

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:

And here is the jQuery part which rotates metrics:

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.

  • 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).

[sourcecode language=”php”]


requestReportData(ga_profile_id,array(‘browser’,’browserVersion’),array(‘pageviews’,’visits’));
?>

getPageviews() ?>
getVisits() ?>
pageviews
visits

By Google Analytics

[/sourcecode]

16 Comments
  1. Reply Saad Bassi February 3, 2010 at 8:00 AM

    Bang. Awesome tut.

  2. Reply Jordan Walker February 3, 2010 at 9:06 AM

    Very nice, I will definitely use this.

  3. Reply Paul Grill February 3, 2010 at 9:27 AM

    What a great idea! It looks really cool…

    But maybe you should consider caching the results of the API calls. Google Analytics data isn’t real-time anyways and during the time the Google API is taking to respond, your server won’t do anything (i.e. not serve). Worst case scenario is the Google API timing out and thus making your web site unusable. Plus Google will love you for not requesting the same data five thousand times per hour 😉

  4. Reply F4D February 4, 2010 at 7:00 AM

    sounds great . unfortunatly for very beginner users it doesn’t have a readme or something, i’m sure that is very easy to include this script in blog’s widget for those who have minimal knowledge.

    if someone could write a few “step-by-step” instructions and what should we do with that css code.

    i’ll prefer the “advanced version”.where should i put those 2 php files after i modify them with my analytics email account & pass , and also the js file where should be located ?

    sorry if i annoy someone with my solicitations.thanks in advance.

  5. Reply Erwin Schro February 6, 2010 at 2:18 AM

    Hi thanks for the tutorial and css of this counter badge. I use this css-based badge (or button?) for my Twitter Counter Follower Joomla module. I was looking for this badge for so long thanks finally you provide it. oh yes…this twitter follower counter Joomla module is released for free….so thanks again from the J! Community…

  6. Reply Erwin Schro February 8, 2010 at 7:53 AM

    Updated…Now this Google Analytics counter already converted as a Joomla module. thanks.

  7. Reply Umut M. February 8, 2010 at 9:32 AM

    @Erwin,

    That’s great job and thanks for linking back to the article.

  8. Reply ravena April 2, 2010 at 3:16 AM

    i will use it thank u

  9. Reply samm April 7, 2010 at 2:15 PM

    thanks for sharing 🙂

  10. Reply Kriesel July 8, 2010 at 9:48 AM

    Can I change the start date of the hit counter?
    I would put the total visits (not monthly).

    Thanks

  11. Reply Kriesel July 8, 2010 at 10:46 AM

    I solved.
    At line 191 of file gapi.class.php I replaced

    $start_date = date (‘Ym-d’, strtotime (‘1 month ago ‘));

    with an example:

    $start_date = date (‘2009-10-22 ‘, strtotime (‘1 month ago’));

  12. Reply Umut M. July 8, 2010 at 10:47 AM

    @Kriesel,

    Sure, check the start_date and end_date variables here: http://code.google.com/p/gapi-google-analytics-php-interface/wiki/GAPIDocumentation

  13. Reply plastik October 19, 2010 at 9:14 PM
  14. Reply Umut M. October 20, 2010 at 4:48 AM

    @plastik,

    Although not sure, it seems like PHP is not working on your site for a reason. Or, there may be missing PHP tags (< ?php?>), check them too.

  15. Reply thomasjojo June 16, 2011 at 4:49 PM

    @plastik,

    I get the same error, I add my code in my module, I allow php , but still this error..

    where is the step buy step guide?

    please.

  16. Reply kari September 11, 2012 at 6:34 AM

    this took a bit of modification but i finally got it working…. http://www.probeautyrewards.co.za right at the bottom 🙂

    google profile id url has changed it looks like https://www.google.com/analytics/web/?hl=en&pli=1#report/visitors-overview/a00000000w11111111p22222222/

    so to get your profile id number it’s the 8 numbers after the small p

    thanks for the article

Leave a reply

Search