It is built with PHP-MySQL & can be integrated into websites with JavaScript (like Google Analytics) or PHP.

For  the given period, the application can display:

• the number of visitors/pageviews
• referrer URLs, domains
• search terms
• browsers, OSs, countries, screen sizes

There is also a "paths" feature that shows a user's browsing path page-by-page.

You may be asking, "why to use SlimStat instead of Google Analytics?" The best answer would be "live stats".

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

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:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Google Analytics, Javascript, Php


Related posts

• Use PHP Functions In JavaScript: PHP.JS
• Use Any Font In Your Websites With FLIR
• Tracking New RSS Subscribers With Google Analytics (To Understand Them Better)
• Track Mouse Activities With JS And PHP: (smt)
• Tiny Content Management System: OneFileCMS
]]> http://www.webresourcesdepot.com/feedcount-like-google-analytics-counter/feed/ 11 http://www.webresourcesdepot.com/tracking-new-rss-subscribers-with-google-analytics-to-understand-them-better/ http://www.webresourcesdepot.com/tracking-new-rss-subscribers-with-google-analytics-to-understand-them-better/#comments Wed, 16 Dec 2009 05:01:08 +0000 Umut M. http://www.webresourcesdepot.com/?p=1338 For a website, gaining RSS subscribers requires hard work as visitors prefer to subscribe websites with fresh/quality content & expect this to be continious.

On the other hand, RSS subscribers are very valuable loyal readers which follow the website regularly.

So, for a website, it is very important to analyze "how visitors become RSS readers" like:

• from which websites do they reach to yours
• which page of yours is the one that gains you most subscribers, etc.

Google Analytics, besides all the simplicity it offers, has a very functional event tracking method for analyzing custom events which we will be using to track new RSS subscriptions and see how to analyzing them deeper.

 

Part 1 – Applying Event Tracking Code

---

There are currently 2 different versions of Google Analytics tracking code used:

• The standard tracking (gaJsHost)
• Asynchronous tracking – beta (_gaq)

The asynchronous tracking code has a major advantage over the standard version's event tracking which is: it will be able to track the clicks even if tha page is not fully loaded.

Codes for both versions will be mentioned.



No JavaScript frameworks version

Standard tracking


The standard Google Analytics event tracking code uses the _trackEvent method as follows

_trackEvent(category, action, opt_label, opt_value)

The code added to our RSS link will look like:

<a href="http://feeds2.feedburner.com/webresourcesdepot" onclick="pageTracker._trackEvent('rss', 'clicked')"Subscribe To Our RSS Feed</a>

You may have realized that we have used only 2 of the variables and didn't include opt_label & opt_value as it is optional.

Asynchronous tracking

The Google Analytics asynchronous tracking code uses the _gaq.push function to call the _trackEvent method:

<a href="http://feeds2.feedburner.com/webresourcesdepot" onclick="_gaq.push(['_trackEvent', 'rss', 'clicked'])">Subscribe To Our RSS Feed</a>

jQuery Version

Standard tracking


Let's assume that we have added the class="rss" to our RSS links for making it easier to find the clicked items:

jQuery('.rss').click(function() {
    pageTracker._trackEvent('rss', 'clicked');
});

Asynchronous tracking

jQuery('.rss').click(function() {
    _gaq.push(['_trackEvent', 'rss', 'clicked']);
});

MooTools Version

Again, we're thinking that the class="rss" is added to our RSS links.

Standard Tracking


$('.rss').addEvent('click', function(){
    pageTracker._trackEvent('rss', 'clicked');
});

Asynchronous tracking

$('.rss').addEvent('click', function(){
    _gaq.push(['_trackEvent', 'rss', 'clicked']);
});

 

Part 2 – Analyzing Events With Google Analytics

---

After we placed the event tracking as defined above, Google Analytics starts to collect that data and displays is under the Content>Event Tracking" menu.

We can easily see howmany clicks our RSS links gets everyday easily. It is even possible to use the optional values of the tracking codes and track RSS subscriptions with multiple labels like: mainRSSButton, footerRSSLink, etc.

In order to findout which visitors convert to RSS subscribers, "Custom Reporting" is exactly what we need.



Let's create 2 custom reports to see:

• which content results in more RSS subscribers
• visitors coming from which websites become subscribers

Which content results in more RSS subscribers:

• Click "Custom Reporting>Create new custom report".
• Select "Content>Total Events" as the metric.
• Select "Content>Page Title (or Page if your page titles don't define the content)" as the dimension. A good idea would be adding a 2nd dimension like "Traffic Sources>Keyword" to findout the keywords that forwarded users to the page.
• Give the report a name by clicking "edit" at the top of the "Create new custom report" & save the report.

Visitors coming from which websites become RSS subscribers:

• Click "Custom Reporting>Create new custom report".
• Select "Content>Total Events" as the metric.
• Select "Traffic Sources>Source" as the dimension. A good idea would be adding a 2nd dimension like "Content>Page Title (or Page if your page titles don't define the content)" to findout the most popular contents from that referrer that ended up in a new subscribers.
• Give the report a name by clicking "edit" at the top of the "Create new custom report" & save the report.

Both reports are very similar but they offer you the data from different point of views.

Now, you know which type of posts convert to RSS subscribers & which websites are referring you new RSS subscribers.

And, you got the point. There are 100s of possibilities in creating reports. It is totally up to what you are in need of.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Google Analytics, Javascript


Related posts

• FeedCount-Like Google Analytics Counter
• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• What You See Is What You Ajax: WaveMaker
]]> http://www.webresourcesdepot.com/tracking-new-rss-subscribers-with-google-analytics-to-understand-them-better/feed/ 10 http://www.webresourcesdepot.com/new-google-analytics-code-for-better-load-times/ http://www.webresourcesdepot.com/new-google-analytics-code-for-better-load-times/#comments Thu, 03 Dec 2009 05:01:33 +0000 Umut M. http://www.webresourcesdepot.com/?p=1318 Google Analytics has recently announced a new asynchronous tracking code that can "optionally" be replaced with the old one.

The new code does not block the website while it loads which will improve the loading times.

It also aims to provide more accurate results as it can be installed inside <head></head> tags (rather than before the </body> tag) and will be able to collect data from visitors that quit the webpage before it loads fully. This way, "any possible tracking errors from dependencies when the JavaScript not being fully loaded" are also eliminated.

More information can be found in the official announcement & the "Asynchronous Tracking Usage Guide".

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Google Analytics


Related posts

• Tracking New RSS Subscribers With Google Analytics (To Understand Them Better)
• Record Your Visitors As A Video With RobotReplay
• Open Source And Live Web Analytics: SlimStat
• JW FLV Media Player: A Feature-Rich Solution
• FeedCount-Like Google Analytics Counter
]]> http://www.webresourcesdepot.com/new-google-analytics-code-for-better-load-times/feed/ 3 http://www.webresourcesdepot.com/css-only-rounded-corners/ http://www.webresourcesdepot.com/css-only-rounded-corners/#comments Mon, 05 May 2008 05:42:27 +0000 Umut M. http://www.webresourcesdepot.com/?p=268 There are several options for creating rounded corners like: with one image, four images, javascript and plain CSS (and more).

Ask The CSS Guy puts the CSS rounded corners used in Google Analytics under scrutiny.



The technique works by leaving a 1px notch in every corner which creates the rounded corner effect .

This is definitely a nice way of creating rounded corners as it is always more flexible working with CSS rather than static images.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Google Analytics


Related posts

• Tracking New RSS Subscribers With Google Analytics (To Understand Them Better)
• Record Your Visitors As A Video With RobotReplay
• Open Source And Live Web Analytics: SlimStat
• New Google Analytics Code For Better Load Times
• JW FLV Media Player: A Feature-Rich Solution
]]> http://www.webresourcesdepot.com/css-only-rounded-corners/feed/ 4 http://www.webresourcesdepot.com/jw-flv-media-player-a-feature-rich-solution/ http://www.webresourcesdepot.com/jw-flv-media-player-a-feature-rich-solution/#comments Thu, 10 Apr 2008 05:01:01 +0000 Umut M. http://www.webresourcesdepot.com/?p=230 JW FLV Media Player is a complete solution for adding video and audio to your website.

Some features:

• supports playback of any format the Adobe Flash Player can handle (FLV, but also MP3, H264, SWF, JPG, PNG and GIF).
• supports RTMP and HTTP (Lighttpd) streaming, RSS, XSPF and ASX playlists.
• has a JavaScript API.
• accessibility features.



This FLV player has so many other features like Youtube support or Google Analytics support for tracking the statistics.

JW FLV Media Player also provides an online setup wizard which can be used to create a ready-to-use configuration file.

The application is free for personal use and licences needed for commercial uses.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: FLV, Google Analytics, MP3, PNG, SWF, Youtube


Related posts

• Tiny And Chic Flash Mp3 Player: Audio Player
• Stunning Ajax File Manager: AjaXplorer
• Simple And Free Flash Mp3 Player
• Open Source Flash-XML Photo Album
• One Button Flash MP3 Player: AudioPlay
]]> http://www.webresourcesdepot.com/jw-flv-media-player-a-feature-rich-solution/feed/ 3 http://www.webresourcesdepot.com/record-your-visitors-as-a-video-with-robotreplay/ http://www.webresourcesdepot.com/record-your-visitors-as-a-video-with-robotreplay/#comments Fri, 14 Dec 2007 18:09:42 +0000 kayka http://www.blog3.webiket.net/?p=16 Google Analytics or other web statistic services can give you the detailed analysis of the visitors. That’s good. But what about a video of the every move a visitor makes on your website?

RobotReplay is a free service with a different website analysis approach.

Here is the demo:


Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
FindIcons.com – Ultimate Free Icon Search Engine
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Analysis, Google Analytics, Robotreplay, Statistic, Visitor


Related posts

• Tracking New RSS Subscribers With Google Analytics (To Understand Them Better)
• Track Website Activities From Your Desktop With Snoop
• Open Source And Live Web Analytics: SlimStat
• New Google Analytics Code For Better Load Times
• JW FLV Media Player: A Feature-Rich Solution
]]> http://www.webresourcesdepot.com/record-your-visitors-as-a-video-with-robotreplay/feed/ 2