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]

  • Bang. Awesome tut.

  • Very nice, I will definitely use this.

  • 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 😉

  • F4D

    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.

  • 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…

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

  • @Erwin,

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

  • i will use it thank u

  • thanks for sharing 🙂

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

    Thanks

  • 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’));

  • @Kriesel,

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

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

  • thomasjojo

    @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.

  • kari

    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

Search