Astagram Studios- A Creative Studio- Official Blog » Tutorial

Signup Form With PHP, jQuery and CSS3

admin — Wed, 07 Apr 2010 18:01:43 +0000

09 div>

10

`11`	`<div` `class="signupButton">`

`12`	`<input` `type="submit"` `name="submit"` `id="submit"` `value="Signup"` `/>`

13 div>

14

15 form>

16 div>

The carbonForm div is the main container for the form. It is centered in the middle of the page with the CSS margin property, and then centered vertically with jQuery (take a look at our MicroTut for more info about centering).

Inside it we have the heading and the form with the fieldContainer div. Inside it there are three formRow divs, which share the markup given below:

demo.html

view source

print ?

`1`	`<div` `class="formRow">`

`2`	`<div` `class="label">`

`3`	`<label` `for="name">Name:label>`

4 div>

5

`6`	`<div` `class="field">`

`7`	`<input` `type="text"` `name="name"` `id="name"` `/>`

8 div>

9 div>

Each pair of label and input elements is positioned inside its own wrapping divs, which are floated to the left. This allows for the layout of the form you can see in the demonstration page. It is important to have the text box names the same as their ids, because this is used to display the error tooltips as you will see in the next steps.

Carbon Fiber Signup Form

Step 2 – CSS

The form relies heavily on CSS to achieve the carbon fiber effect. A number of CSS3 rules are used as well, which successfully mimic the effects previously possible only in graphic suites as Photoshop. Only the most interesting styles are given here, you can see the rest in styles.css in the download archive.

styles.css

view source

print ?

`01`	`#carbonForm{`

`02`	`/* The main form container */`

`03`	`background-color:#1C1C1C;`

`04`	`border:1px` `solid` `#080808;`

`05`	`margin:20px` `auto;`

`06`	`padding:20px;`

`07`	`width:500px;`

08

`09`	`-moz-box-shadow:0` `0` `1px` `#444` `inset;`

`10`	`-webkit-box-shadow:0` `0` `1px` `#444` `inset;`

`11`	`box-shadow:0` `0` `1px` `#444` `inset;`

12 }

13

`14`	`.fieldContainer{`

`15`	`/* The light rounded section, which contans the fields */`

`16`	`background-color:#1E1E1E;`

`17`	`border:1px` `solid` `#0E0E0E;`

`18`	`padding:30px` `10px;`

19

`20`	`/* CSS3 box shadow, used as an inner glow */`

`21`	`-moz-box-shadow:0` `0` `20px` `#292929` `inset;`

`22`	`-webkit-box-shadow:0` `0` `20px` `#292929` `inset;`

`23`	`box-shadow:0` `0` `20px` `#292929` `inset;`

24 }

25

`26`	`#carbonForm,.fieldContainer,.errorTip{`

`27`	`/* Rounding the divs at once */`

`28`	`-moz-border-radius:12px;`

`29`	`-webkit-border-radius:12px;`

`30`	`border-radius:12px;`

31 }

32

`33`	`.formRow{`

`34`	`height:35px;`

`35`	`padding:10px;`

`36`	`position:relative;`

37 }

38

39 .label{

`40`	`float:left;`

`41`	`padding:0` `20px` `0` `0;`

`42`	`text-align:right;`

`43`	`width:70px;`

44 }

45

46 label{

`47`	`font-family:Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;`

`48`	`font-size:11px;`

`49`	`letter-spacing:1px;`

`50`	`line-height:35px;` `/* Neat line height trick */`

51 }

52

53 .field{

`54`	`float:left;`

55 }

56

`57`	`.field input{`

`58`	`/* The text boxes */`

`59`	`border:1px` `solid` `white;`

`60`	`color:#666666;`

`61`	`font-family:Arial,Helvetica,sans-serif;`

`62`	`font-size:22px;`

`63`	`padding:4px` `5px;`

`64`	`background:url("img/box_bg.png")` `repeat-x` `scroll` `left` `top` `#FFFFFF;`

`65`	`outline:none;`

66 }

67

`68`	`#submit{`

`69`	`/* The submit button */`

`70`	`border:1px` `solid` `#f4f4f4;`

`71`	`cursor:pointer;`

`72`	`height:40px;`

`73`	`text-indent:-9999px;`

`74`	`text-transform:uppercase;`

`75`	`width:110px;`

76

`77`	`background:url("img/submit.png")` `no-repeat` `center` `center` `#d0ecfd;`

78

`79`	`-moz-border-radius:6px;`

`80`	`-webkit-border-radius:6px;`

`81`	`border-radius:6px;`

82 }

83

`84`	`#submit.active{`

`85`	`/* Marking the submit button as active adds the preloader gif as background */`

`86`	`background-image:url("img/preloader.gif");`

87 }

88

`89`	`input:hover,`

`90`	`input:focus{`

`91`	`/* CSS3 glow effect */`

`92`	`-moz-box-shadow:0` `0` `8px` `lightblue;`

`93`	`-webkit-box-shadow:0` `0` `8px` `lightblue;`

`94`	`box-shadow:0` `0` `8px` `lightblue;`

95 }

Most of these rules are pretty straightforward. You may find interesting how we handle the submit button, as this element is quite tricky to style consistently cross-browser.

To hide the text of the button (in our case “Signup“), we can use the negative text-indent trick, but in IE it only works if we also specify the text-transform:uppercase rule. We also add a transparent background image consisting of the text “Submit” in Century Gothic, which is replaced with a rotating gif preloader if the button is assigned an “active” class.

We also use a number of CSS3 effects along with their vendor-specific versions for better compatibility. border-radius is for rounded corners, and with box-shadow we can mimic different glow and shadow effects.

CSS3 Rounded Corners & Glow

Step 3 – jQuery

After including the jQuery library and our own script.js file in the page, we can move on to writing the JavaScript code that will breathe some life into the form.

script.js

view source

print ?

`01`	`$(document).ready(function(){`

`02`	`// $(document).ready() is executed after the page DOM id loaded`

03

`04`	`// Binding an listener to the submit event on the form:`

`05`	`$('#signupForm').submit(function(e){`

06

`07`	`// If a previous submit is in progress:`

`08`	`if($('#submit').hasClass('active'))` `return` `false;`

09

`10`	`// Adding the active class to the button. Will show the preloader gif:`

`11`	`$('#submit').addClass('active');`

12

`13`	`// Removing the current error tooltips`

`14`	`$('.errorTip').remove();`

15

`16`	`// Issuing a POST ajax request to submit.php (the action attribute of the form):`

`17`	`$.post($('#signupForm').attr('action'),`

`18`	`$('#signupForm').serialize()+'&fromAjax=1',function(response){`

19

`20`	`if(!response.status)`

21 {

`22`	`// Some kind of input error occured`

23

`24`	`// Looping through all the input text boxes,`

`25`	`// and checking whether they produced an error`

`26`	`$('input[type!=submit]').each(function(){`

`27`	`var` `elem = $(this);`

`28`	`var` `id = elem.attr('id');`

29

`30`	`if(response[id])`

`31`	`showTooltip(elem,response[id]);`

32 });

33 }

`34`	`else` `location.replace(response.redirectURL);`

35

`36`	`$('#submit').removeClass('active');`

`37`	`},'json');`

38

`39`	`e.preventDefault();`

40 });

41

`42`	`$(window).resize();`

43 });

44

`45`	`// Centering the form vertically on every window resize:`

`46`	`$(window).resize(function(){`

`47`	`var` `cf = $('#carbonForm');`

48

`49`	`$('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)`

50 });

51

`52`	`// Helper function that creates an error tooltip:`

`53`	`function` `showTooltip(elem,txt)`

54 {

`55`	`// elem is the text box, txt is the error text`

`56`	`$('` `').html(txt).appendTo(elem.closest('.formRow'));`

57 }

Clicking the submit button (or pressing the enter key while entering text in one of the fields) submits the form. The function that is bound to the submit event prevents this from happening with e.preventDefault() and issues an AJAX request to submit.php instead.

The response that is returned is evaluated as JSON code (a JavaScript object), which contains a special status property. Depending on its value, the script either shows error tooltips on the fields, or redirects the browser to the specified URL in the response.

sample error response

view source

print ?

1 {

`2`	`"status"` `: 0,` `// Indicates that the response is an error`

`3`	`"email"` `:` `"Please fill in a valid email!",` `// Error message`

`4`	`"pass"` `:` `"Please fill in a valid password!"` `// Error message`

5 }

The error tooltips are generated by the script while looping though all the fields in the form and checking whether their ids exist as properties in the response object. If they do, a tooltip is created with the showTooltip() function.

Also notice how we use the serialize() method on line 18 to send all the form fields at once. Also, on this same line, we set fromAjax=1, which is going to tell PHP to return the response as JSON.

Now lets see how this response is generated and how the form is validated.

Dynamically Inserted Error Tooltips

Step 4 – PHP

The good thing about this form is that it is usable even if JavaScript is disabled. This works, because the action attribute of the form element is also set to submit.php. This means that we only have to implement the validation once no matter how the form is sent.

submit.php

view source

print ?

`01`	`// Error reporting:`

`02`	`error_reporting(E_ALL^E_NOTICE);`

03

`04`	`// This is the URL your users are redirected,`

`05`	`// when registered succesfully:`

06

`07`	`$redirectURL` `=` `'http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html';`

08

`09`	`$errors` `=` `array();`

10

`11`	`// Checking the input data and adding potential errors to the $errors array:`

12

`13`	`if(!$_POST['name'] \|\|` `strlen($_POST['name'])<3 \|\|` `strlen($_POST['name'])>50)`

14 {

`15`	`$errors['name']='Please fill in a valid name! Must be between 3 and 50 characters.';`

16 }

17

`18`	`if(!$_POST['email'] \|\| !preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/",` `$_POST['email']))`

19 {

`20`	`$errors['email']='Please fill in a valid email!';`

21 }

22

`23`	`if(!$_POST['pass'] \|\|` `strlen($_POST['pass'])<5)`

24 {

`25`	`$errors['pass']='Please fill in a valid password! Must be at least 5 characters long.';`

26 }

27

`28`	`// Checking whether the request was sent via AJAX`

`29`	`// (we manually send the fromAjax var with the AJAX request):`

30

`31`	`if($_POST['fromAjax'])`

32 {

`33`	`if(count($errors))`

34 {

`35`	`$errString` `=` `array();`

`36`	`foreach($errors` `as` `$k=>$v)`

37 {

`38`	`// The name of the field that caused the error, and the`

`39`	`// error text are grouped as key/value pair for the JSON response:`

`40`	`$errString[]='"'.$k.'":"'.$v.'"';`

41 }

42

`43`	`// JSON error response:`

`44`	`die` `('{"status":0,'.join(',',$errString).'}');`

45 }

46

`47`	`// JSON success response. Returns the redirect URL:`

`48`	`echo` `'{"status":1,"redirectURL":"'.$redirectURL.'"}';`

49

50 exit;

51 }

52

`53`	`// If the request was not sent via AJAX (probably JavaScript`

`54`	`// has been disabled in the visitors' browser):`

55

`56`	`if(count($errors))`

57 {

`58`	`echo` `'` `'.join(' ',$errors).'` `';`

59 exit;

60 }

61

`62`	`// Directly redirecting the visitor if JS is disabled:`

63

`64`	`header("Location: ".$redirectURL);`

All the encountered errors are added to the $errors array. This, depending on whether fromAjax was set or not, is later returned either as a JSON object, or directly printed to the screen.

With this our carbon fiber signup form is complete!

Conclusion

You can modify and build upon this form any way you like. At present, the form does not actually register users, but you can add the code necessary to do so. It will also do a great job as a contact form for your site.

A Guide to Google Analytics and Useful Tools

admin — Fri, 19 Mar 2010 13:07:38 +0000

Google Analytics is undoubtedly the most widely used web analytics application. Emerged from and based upon the analytics-package developed by Urchin Software Corporation (which was bought by Google in April 2005), the tool has become publicly available for free under the new flagship of Google Analytics. In May 2007 the application was heavily edited, developed and released; the design was simplified and more advanced featured were added. Over years Google Analytics managed to gain on popularity because of its simplicity and many advanced features for curious site owners and professional marketers.

You probably use Google Analytics on a regular basis, for basic stats tracking the performance of your site. And, just like most GA users, you probably very rarely venture far from the comfort of the reports shown on the dashboard. That’s all the analytical information you need, you may be thinking … or is it?

Did you know that Google Analytics can generate up to 85 different reports that will help you analyze all possible data about your website traffic. It not only tracks visitors to your site or the number of page views, it can be used to see which content gets the most visits, time on site per visit, which ads are driving the most visitors to your site, it track the performances of your marketing campaigns, including AdWords, Adsense and emails and much, much more.

This post is not a be-all-and-end-all look at GA, but a rough guide to its many under-used features and reports. It is an easy to read guide that will help you understand and use the full power of Google Analytics. Honestly, it’s not that daunting.

General resources: Google Analytics Help Center, official forum and official blog.

You may be interested in the following related posts:

Perform Better With AdSense: The Ultimate Round-Up

[By the way, did you know there is a brand new Smashing WordPress Book? Push WordPress past its limits!]

The GA Tracking Code

Google Analytics will only track pages that contain the Google Analytics tracking code, this is a small Javascript snippet that needs to be added to each page of your site, either manually or through the use of plugins or tool. You will find some tools and plugins to help you do this near the bottom of this post.

For a static webpage or if you want to manually install the code into your pages, copy and paste the code segment into the bottom of your content, immediately before the body tag of each page that you wish to track.

To access your tracking code

Sign in to Google Analytics.
From the Analytics Settings page, find the profile for which you would like to retrieve the tracking code. Please note that tracking code is profile-specific.
From that profile’s Settings column, click Edit.
At the top right of the Main Website Profile Information box, click Check Status.
Your tracking code can be copied and pasted from the text box in the Instructions for adding tracking section.

The Dashboard and Analytical Reports

Log into Google Analytics and you’ll arrive at dashboard, the central hub that gives you an overview of all the popular reports (visitors, content, traffic sources and the cool map overlay) generated by Google Analytics. You can customize this page by changing what reports are shown, as well as dragging and dropping the reports into a format that suits your needs.

Google Analytics Interface Tutorial
A brief overview of how to use the Google Analytics interface. If you are new to Google Analytics or you’d like to pick up a few tips on how to use some of the different features, this video is a good place to start.

Interpreting Reports

Google offers comprehensive tutorials and guides to using Analytics, in the form of a series of Adobe Breeze Presentations. Below you will find the guides and presentations to understanding and using the reports generated by GA.

Guidelines to interpreting GA Reports
In this presentation you will learn the best practices for analyzing data, how to analyze data trends and how to use the data visualizations in Google Analytics.

Pageviews, Visits, and Visitors
Learn where to find Pageviews, Visits, and Visitors metrics, how Pageviews, Visits, and Visitors are calculated, the difference between Pageviews and Unique Pageviews and the difference between Absolute Unique Visitors and New vs. Returning Visitors.

Time Metrics
How Time on Page and Time on Site are calculated, how Avg. Time on Page and Avg. Time on Site are calculated and learn about the Length of Visit report from this presentation.

Traffic Sources
Learn about the different kinds of traffic sources, how to identify quality traffic, how to identify revenue and conversion drivers, what kinds of information to look for in keyword reports, how campaign attribution works in Google Analytics

Content Reports
How to use and interpret the Top Content, Content by Title, and Content Drilldown reports; how to use the Top Landing Pages report; how to use and interpret the Navigation Summary report; how to use and interpret the Entrance Paths report.

Analyze Traffic Sources, Content, and Navigation
Use your Google Traffic Sources, Content, and Navigation reports effectively. In this video you will see the different sources of traffic, tracking content performance and analyzing visitor navigation.

Analytics and Flash and Flex Content

One of the most common Google Analytic implementation challenges has been tracking Flash content. In the past, Flash tracking was not provided out of the box, and every implementation had to be tailored to each individual site, developers who tracked Flash had to create their own processes to get it working.

Google now provides easy to implement tracking libraries for both Flash and Flex, the libraries include: Flash visual component, Flash AS3 library, Flex MXML component and Flex AS3 library.
Download: Flash and Flex Analytics Tracking Libraries.
Documentation: Developer Documentation.

Learn how easy it is to track Flash content using the new Google Analytics Tracking For Adobe Flash.

Analytics and Ecommerce

After you have enabled ecommerce transactions, Google Analytics will generate very detailed reports about every single transaction

Tracking Ecommerce with Google Analytics
By using Google Analytics with your Ecommerce website, you can gain valuable insights about your transactions, ROI, and customers.

Step-by-Step to enabling Ecommerce Reporting

The first step of tracking ecommerce transactions is to enable e-commerce reporting for your website’s profile.

Log in to your account.
Click Edit next to the profile you’d like to enable.
On the Profile Settings page, click edit next to Main Website Profile Information.
Change the E-Commerce Website radio button from No to Yes.

Analytical Goals

As a simplified explanation, Goals are only a page view, nothing complicated about that. If you define a goal in Google Analytics, you are telling it what page view constitutes the completion of a Goal, and Analytics then tracks it. It is an easier way to generate the reports that you need as well as a great way to measure your business objectives.

How to create Google Analytics Conversion Goals
In this video you will be shown how to create conversion goals in Google Analytics.

Step-by-Step to setting up Goals in Analytics

Log in to your Google Analytics account at https://www.google.com/analytics/.
Select the account that contains the profile you’ll be creating goals in from the Overview page.Find the profile for which you will be creating goals, and click ‘Edit’ under the ‘Actions’ column.
Under the ‘Conversion Goals and Funnel’ section, select one of the four goal slots available for that profile and click ‘Edit.’
Turn the goal ‘On’ or ‘Off.’ If you choose ‘On,’ that means you want Google Analytics should track this conversion goal at this time. Since there are no ways of deleting goals, turning it ‘Off’ can make the goal inactive.
Select from one of the three match types that Google Analytics uses to identify the goal.
Enter the Request URI in the Goal URL box. Reaching this page marks a successful conversion. For example, a registration confirmation page, a checkout complete page, or a thank you page.
Enter the ‘Goal name’ as it should appear in your Google Analytics account.
If your goal URL is case sensitive, this means your goal URLs are capitalized exactly like the visited goal URLs.
Enter the ‘Goal value.’

10 Must Track Google Analytics Goals
The author of this article gives you 10 ideas for using Analytics Goals. He advises to setup goals for visitor comments on your blogs, social bookmarking actions, newsletter subscriptions, track feed subscriptions… and much more.

Import your Google Analytics Goals into AdWords and use them with Conversion Optimizer
In order to track your ROI from AdWords, you need to be able to see which keywords, ads and campaigns lead to conversions on your site. If you use Google Analytics, you can now import your Google Analytics Goals and Transactions into your AdWords account to use as conversion actions. This lets you track the ROI from your AdWords campaigns directly inside the AdWords interface.

Custom Reporting

Custom reports in Analytics give faster access to the information you need and less data reports to sift through. Simply, they remove the data that is relevant to you, leaving you with the bare bones reports that you need. You choose the information and metrics you want to see, organized in the way you want to see it.

Quick Start Guide to Custom Reporting

If you are stepping into custom reporting you should really read this official guide, from Google Support. You’ll learn to get from conceptualizing your custom report to actually building it, and will give you a basic insight into concepts and terminology involved in analytics and custom reporting. Check out also Quick Start Guide for Custom Reporting and Google Analytics Glossary

Custom Reporting in Analytics Video
Learn how to create custom reports in Google Analytics that show the information you want to see, organized in the way you want to see it.

Spotlight on Google Analytics features Custom Reporting
Conversion Room has written a great overview on custom reporting. It includes basic tutorials and how-tos.

Eyes on the Prize with Custom Reports
This is an in-depth article covering custom reporting in Analytics.

Google Analytics, Adsense and Adwords

Google Analytics has lots of tools and can generate reports that can help you with AdWords and Adsense campaigns.

Adsense Reporting in Google Analytics
If you are an AdSense publisher, you can use Google Analytics to see and perform in-depth analysis on your AdSense data.

Step-by-step guide to linking Adsense and Analytics

Log in to AdSense (adsense.google.com).
Click the link that says “Integrate your AdSense account with Google Analytics” on the Reports > Overview tab.
Follow the on-screen instructions.

Campaign Tracking and AdWords Integration (Breeze Presentation)

This is an official lesson from the Google Analytics IQ Lessons series, in this presentation you will learn:

how to track campaigns using tagged links
how to track AdWords campaigns
when to use autotagging and how it works
how to enable autotagging
where to find AdWords data in your reports
the expected kinds of data discrepancies between AdWords and Analytics data
when and how to manually tag URLs
how to use the URL Builder
best practices for tagging links

Campaign Tracking and AdWords Integration (Breeze Presentation)

Linking Adwords with Google Analytics
Linking Google AdWords and Analytics helps provide insights on keywords, ROI, visitors, and more! Learn how to easily link your accounts.

Step-by-step guide to linking AdWords and Analytics

Below you will find the simple step-by-step guide from Google Support.

Login to your AdWords account at adwords.google.com
Click the Analytics tab.
If you don’t have an Analytics account, click the Continue button to sign up for one.
If you already have an Analytics account, click I already have a Google Analytics account.
From the Existing Google Analytics Account drop-down list, select the name of the Analytics account you’d like to link to. Can’t see it there? You’ll need to add your AdWords username to your Analytics account as an Account Admin ( Learn how).
Keep the checkboxes selected on this page, unless you’re sure you’d like to disable auto-tagging and cost data imports.
Click Link Account.

Google AdSense Reports in Analytics – Guide
This article gives you a basic guide to Adsense and Analytics, it covers top content, referrers, revenue, trending and revenue sharing.

Google Analytics Desktop Apps

Polaris for Google Analytics
The sleek and stylish Polaris is the most popular and quite possibly the best desktop application for Google Analytics. It has been developed using Adobe AIR, making it cross-platform desktop widget for Google Analytics. With 8 standard reports available, you can view your stats instantly.

Polaris is a free download for everyone who manages one website profile, and for those who are managing multiple profiles, the upgrade to the full version is $15 a year.

Analytics Reporting Suite
This is another useful and feature rich Adobe AIR app for Google Analytics. It uses it’s own custom API to interact with Google and nearly implements all features of Analytics. With Analytics Reporting Suite you can use multiple profiles from different Analytics accounts, all popular reports (visitors, traffic and content) are available and you can also view your goal values and data segmentation.

Dashalytics – MAC Dashboard Widget
Dashalytics is a free Dashboard Widget for your Apple Mac that offers quick access to Google Analytics statistics.

Google Analytics Firefox Extensions

Fire Analytics
The Fire Analytics extension allows you to view your Google Analytics reports within a popup from Firefox.

Is Google Analytics Installed
This is a great little utility for web developers, checks automatically that Google Analytics is installed on any given page.

Web Analytics Solution Profiler/Debugger (WASP)
WASP provides detailed information about the data being collected from Google Analytics, through Query String and Cookies by web analytics solutions (called “tags”, “trackers” or “web bug”), ad networks, behavioural targeting and multivariate testing tools.

Grease Monkey Firefox Extensions

Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function. You will need this extension to run the following useful little scripts.

Google Analytics Report Enhancer
Better reports with Greasemonkey

Integrate Google Analytics with Google Docs using Greasemonkey

Keyword Trends in Google Analytics With Greasemonkey

Greasemonkey: Automatically Show All Profiles

Social Media Metrics Greasemonkey Plugin For Google Analytics

Better Google Analytics Firefox Extension
Firefox Extension with Greasemonkey Scripts for Google Analytics.

The Better Google Analytics Firefox Extension (BetterGA)
BetterGA is a compilation of the best Greasemonkey userscripts from various authors, brought together to create this feature (Auto Access, Content Search, Cleaner Profile Switching, Export to Google Docs…) rich extension. Remember and install Greasemonkey first.

Auto Access Your Google Analytics Account
Bypass the “Access Analytics” button that is displayed to you on the Google Analytics login page automatically.

Google Analytics Full Screen Reports
With this easy add-on, you can quickly expand the reporting view by hiding the left-hand navigation.

Google Analytics Advanced Date Selection
With this script, an option is added for one click access to year-over-year reports.

Include Today in the Default Google Analytics Date Range
By default, Google Analytics shows you the statistics for a 30 day period up to the previous complete day. This Greasemonkey script includes the current in all reports.

Google Analytics Table Sorter
An easy to use table sorter for your analytic reports.

Add the Digg count of your page to your Content Details
This Greasemonkey script will retrieve the Digg count of a page and display it to you on the Content Detail report of your Google Analytics (?) console.

Google Analytics Referrers
This user script adds an external link to see referrers on Google Analytics.

CMS & Website Plugins & Extensions

Silverlight Analytics
SilverlightAnalytics lets you use the power of Google Analytics within your Silverlight application. You can track web stats such as button clicks, mouse-over’s, events, page views, or anything else you might want without having to call Invoke().

Insert Google Analytics’ code – Dreamweaver Extension
This extension allows you to Insert/Update, Remove, Report the Google Analytics’ Javascript code(”urchin.js”) on any static website.

WordPress Plugins

Google Analyticator
Google Analyticator is an easy to implement WP plugin that adds Google Analytics tracking support to all WordPress posts and pages. It comes with an easily customizable widget that can be used to display specific information from the Google Analytics API. It supports all of the tracking mechanisms that Google Analytics supports such as external link tracking, download tracking, tracking without counting administrative users, and any other advanced tracking the user wishes to add.

Google Analytics for WordPress
This useful plugin adds the ability to tag and segment all outgoing links, so you can see whether a click came from a comment or an article. It also adds the possibility to track just the domain, instead of the complete link, so you get a better view of how much traffic you’re sending where.

Dashboard Reports Plugin
Wordpress Google Analytics Reports plugin helps you to get real time live reports from Google Analytics using the data API, and viewed from the WordPress Dashboard.

Google Analytics and Feedburner Reports Plugin
This plugin allows you to easily view quick and basic Google Analytics and Feedburner reports in your WordPress admin area. It adds a top-level Reports tab and when you click on it, you’ll get a quick 7 day overview of what’s going on with your site (pageviews, visits, referrers, etc). You’ll have to login to Google Analytics or Feedburner directly if you want more detailed stats.

Drupal Module

Google Analytics Module
This powerful and feature rich Drupal module allows you to add the following statistics features to your site: Selectively track certain users, roles and pages; Monitor what type of links are tracked (downloads, outgoing and mailto); Monitor what files are downloaded from your pages; Cache the Google Analytics code on your local server for improved page loading times; Track user segmentation from Drupal profile data; Site Search support; AdSense support.

Installing & Configuring the Google Analytics Module for Drupal 6.x from Brian Stevenson on Vimeo.

Joomla Module

Google Analytics Tracking Module
Google Analytics Tracking Module is a simple module for Joomla! 1.0.x. and Joomla! 1.5 used for inserting Google Analytics tracking code into a Joomla site via a module. This module makes it possible to add the tracking code before the closing body tag in template, which is recommended by Google.

Mobile Apps

Analytics App for iPhone and iPod Touch

Ego — You’re important

myAnalytics – Google Analytics on the iPhone

Mobile GA for Android
Mobile GA for Android is a secure, fast and lightweight application for accessing your Google Analytics data. The app is intended to help you keep an eye on your key summary statistics while you’re on the move. The price for this app is only $2.99.

Google Analytics Tips and Ideas

The Google Analytics: Power User Guide
This guide is a compilation of VKI’s Google Analytics: Power User series, presenting an overview of several key features and uses of Google analytics—some basic, some advanced—and how you can use these features to analyze, interpret, and optimize your websites traffic. Also available as PDF.

Google Analytics Tips You Should Know AboutA round-up of six useful resources, with some of the handiest Google Analytics tips out there, starting from the simplest and moving on to trickier stuff.

50 Resources for Getting the Most Out of Google Analytics
Google Analytics is a very useful free tool for tracking site statistics. For most users, however, it never becomes more than just a pretty interface with interesting graphs. The resources below will help anyone, from the beginner to those who have been using Google Analytics for some time, learn how to get the most out of this great tool.

The Huge Collection of Google Analytics Tips
“I’ve been compiling the list of advanced Google Analytics tips that open up plenty of possibilities to track and evaluate.”

Youtube Channel
The official channel for all videos about and related to Google Analytics. 13 videos at this time.

Advanced use of Google Analytics and the new interface
Since Google Analytics was launched in 2005 it has become one of the top analytics packages for small to medium sized websites. Growth was initially slow due to the frustrating waiting list system initiated by Google to avoid over stretching their servers. Now that the waiting list has been removed anybody can sign up to use this great service.

8 Awesome Google Analytics Hacks, Tips and Tricks
There are a lot of things you need to tinker with in order to get some of the data you need from it.

5 Lesser Known Google Analytics Features
Google Analytics is a great program that can do a lot more than most people realize. Here are a few features that you may not know about.

Measure Online Advertising with Google Analytics
Google Analytics is a free web analytics application that is quickly becoming one of the most widely used web analytics tools around. A common misconception that many people have is that GA can only be used to track Google AdWords. That’s simply not true. GA can be used to track any online marketing activity.

Forcing Google analytics to show real time data
So here is how you can get real-time data from Google analytics.

Twitter and Google Analytics: What to Track
By default, traffic from Twitter will be tracked as referral traffic in Google Analytics. A better way to track a Twitter campaign would be to use GA’s campaign tracking feature.

Tracking Email with Google Analytics
Tracking email campaigns in Google Analytics is done using a process called link tagging. This process is the manipulation of the links in your emails.

PPC Management: AdWords Keyword Data Exposed With Google Analytics
You CAN expose your specific AdWords Keyword Data beyond the dreaded “other unique queries” in the AdWords Search Query Report with Google Analytics.

Speed Up Google Analytics
“Last year I wrote about hosting Google Analytics urchin.js file on your own server, to speed up the loading of your site. Well, google has migrated to a new analytics javascript, ga.js. You can read the urchin.js to ga.js migration guide if you want. They also wrote about the changes on the Google Analytics Blog. And if you want to learn about advanced features of ga.js check out this Google Analytics Documentation.”

Some Basic Setup Tips
Get you more effectively using your Google Analytics account.

Optimize Form Length with Input Analysis
In this post, I will share with you E-Nor’s technique in determining the forms fields that people are most likely not to complete. I will show you how to make this data available to decision makers and web optimizers so they are able to make the necessary changes.

Keyword Trends With Google Analytics and Greasemonkey

Google Analytics Reporting Suite
The Google Analytics Reporting Suite brings Google Analytics to the desktop, with a host of features that help you understand how your website is performing and where you can improve. From tracking your visitors, referrals and campaigns to viewing your AdWords ROI metrics, the Google Analytics Reporting suite is a must-have for every web business.

Articles, Tutorials and Tools

Introduction to Google Analytics
A screencast by Chris Coyier.

Forcing Google analytics to show real time data
Google Analytics generally updates your reports every 24 hours. This means that it could take 24 hours for data to appear in your account after you have first installed the tracking code. Learn how you can get real time data from Google Analytics.

Measure Online Advertising with Google Analytics
A common misconception that many people have is that GA can only be used to track Google AdWords. That’s simply not true. GA can be used to track any online marketing activity. And not only will Google Analytics track online marketing, it will also identify the conversion events that your online marketing creates.

5 Lesser Known Google Analytics Features
Google Analytics is a great program that can do a lot more than most people realize. Here are a few features that you may not know about.

The Ultimate Web Analytics Data Reconciliation Checklist

SiteScan
It may take some time to check the correct and complete code integration manually. This service helps you to check the correctness of the code snippet automatically.

No Google Analytics API? No Problem!
Learn how to read and use data, e.g. for the block with “Most Popular Posts”.

How to track Social Media Users with Google Analytics
One of the questions we are often asked is how we track various social media sites users and their interaction with sites the answer is in a variety of ways but here is just one of the techniques we use with Google Analytics.

Tracking regional Search Engines in Google Analytics
Google Analytics recognises 41 search engines by default. Although this is constantly being added to, there are of course a great many other search engines in the world – language and region specific, as well as price comparison and vertical portals.

Adding Business Data to Google Analytics Data
“We tried using Google Spreadsheets to store business info but it never worked. People did not take the time to open up a spreadsheet and add information. We figured that adding some type of ‘note’ functionality to GA would be the easiest way to change this behavior. That’s how GA Notes was born.”

How to Get Detailed PPC Keyword Data from Google Analytics
A new filter that shows exactly the Search Term (i.e. keywords that are searched on) rather than just the Bid Term (i.e. the keywords that triggered a PPC advert).

Google Analytics E-Commerce Tracking
This series of article has 4 parts: 1 | 2 | 3 | 4

Blogs about Google Analytics

The official Google Analytics Blog

Advanced Web Metrics
A blog of Brian Clifton’s blog about analytics, with many useful tips and ideas.

Google Analytics Results
A Google Analytics blog written by the company Mangold Sengers.

Luna Metrics Blog
A blog of an Internet consulting firm that specializes in configuring and evaluating Google Analytics.

Analytics Talk
Justin Cutroni’s blog about Google Analytics.

And finally…

Google Analytics may be lying to you, even though it tells the truth — simply because you’re not telling it how to track your site effectively. Are you guilty of any of the following?

Are those really your conversion rates?
Do customers actually find your site using that keyword?
Are you sure that Digg story sent you all that traffic?

If you are, you may want to read this article: 8 Stupid Things Webmasters do to mess up their analytics.

Paul AndrewPaul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic design resource blog.

How to design a print ready business card design in photoshop

admin — Tue, 09 Mar 2010 14:48:28 +0000

When you’re building your business, the ever overlooked business card is a piece of marketing material that I feel is very valuable. Today, people are focused on social media promotion and interacting with their clients over the internet, but what about when you come across a person in ‘real life’ who wants to know more about your business?

Do you stop, write your website, name and email address down or do you just whip out your business card? I hope that you’re wanting to utilize a business card for your business. Today’s photoshop tutorial will take you through the step by step process on how to design your very own business card (front and back). I’ve also included a couple of extra options in the downloadable photoshop file so you can play with them, edit them and make them your own.

Step 1: Setting up your document

Below you will see the spec’s were using for today’s tutorial. First, create a new document and plug these specs into your document and click ok.

Step 2: Creating your bleed guides

For your business card, the background design you use will touch the edge of the document, but for the text, you’re going to need to keep it within a ’safe zone’ in case things get cut different during the printing process. You don’t want to order 1,000+ business cards, only to see that half of your email address or phone number is cut off.

You’re going to create a new layer and name it “bleed”. We’re going to make a selection that is 38 pixels away from the edge, all the way around and add a 1px stroke in red. We’re going to have to keep our text and/or logos within this space so it doesn’t get cut off during the print process.

Note: The official bleed space for different printers differs. Please ensure that the safe zone you’re setting up works with the printer that you’re going to use.

Step 3: Setting up the background of our business card

First, we’re going to fill the background layer with a dark brown color (#311504). After you do this, create a new layer and name it “texture”. We’re going to fill this layer with a default texture that’s in adobe photoshop cs4 (seen in the image below) and changing the layer blending mode to multiply.

Step 4: Adding in your company name

Now that we’ve got the background set up, we’re going to add the company name. In this tutorial, we’re just going to use, you guessed it, Company Name, so make sure you add your business name in. For the font, we’re going to use the free font, You Are Loved from DaFont. We’re going to type in 24pt size and use two colors, one for each word of our company name. The first color is #de4549 and the second color is #d8a728.

Step 5: Adding in your information

Now that we’ve got the company name added into the top left, we’re going to add some more text onto the document. Create a new layer and name it ‘info’. In this layer, use your type tool and type in the following information, using the character options seen below. The color we’re using is #de4549. Make sure your text is aligned to the right so the right side of the text gives a flush area for you to put your information against.

Next, we’re going to make a new layer and name it ‘my info’. In this layer, we’re going to be putting in your personal information. The color for this font is # and we’re going to use the same character information as above, aligning the font to the left.

Step 6: Setting up folders for “front” and “back” designs

Now that we’ve got the business card designed and set up, we’re going to create a new folder for our layers to sit within. We’ll be naming this folder “Back”. Start by clicking the new folder button in your layers palette.

Now you’re going to place all of your text layers into this folder. It will look similar to below.

Next, create another new folder and name it “Front”. In this folder, you’re going to create a new layer and name it “company name”. Grab your text tool and type “CompanyName” just like we did in step 4. This time, we’re going to make the font 36pt.

For the front, we’re going to want to keep things clean and mostly logo centered, so we’ll have your company name in a large font like this and we’re also going to add in a quick line of text to explain what you do. For this, you’re going to want to create a new layer and name it “info”. We’ll be using the same font we’ve been using, but making it 14pt and #e14f09.

Now, you’re going to select the “Front” folder and then hit SELECT > ALL. Now, you’re going to head to LAYER > ALIGN LAYERS TO SELECTION > VERTICAL CENTER. This is going to ensure that your text is centered properly from top to bottom.

At this point, you’re ready to save your work. Check with your printer to know what file type they’re after (TIFF, JPG, PSD, AI and so on). You’re also going to want to ensure that the bleed layer is invisible so you don’t have a bright red border around your business card.

Some extras for you, all included in the downloadable psd file

Below are screenshots of a couple of other styles I created using this same basic set up. They’re all in their own folders in the psd file. Have fun with them

Astagram Studios- A Creative Studio- Official Blog » Tutorial

Signup Form With PHP, jQuery and CSS3

demo.html

Step 2 – CSS

styles.css

Step 3 – jQuery

script.js

sample error response

Step 4 – PHP

submit.php

'.join('',$errors).'

Conclusion

A Guide to Google Analytics and Useful Tools

The GA Tracking Code

To access your tracking code

The Dashboard and Analytical Reports

Interpreting Reports

Analytics and Flash and Flex Content

Analytics and Ecommerce

Step-by-Step to enabling Ecommerce Reporting

Analytical Goals

Step-by-Step to setting up Goals in Analytics

Custom Reporting

Quick Start Guide to Custom Reporting

Google Analytics, Adsense and Adwords

Step-by-step guide to linking Adsense and Analytics

Campaign Tracking and AdWords Integration (Breeze Presentation)

Step-by-step guide to linking AdWords and Analytics

Google Analytics Desktop Apps

Google Analytics Firefox Extensions

Grease Monkey Firefox Extensions

CMS & Website Plugins & Extensions

WordPress Plugins

Drupal Module

Joomla Module

Mobile Apps

Google Analytics Tips and Ideas

Articles, Tutorials and Tools

Blogs about Google Analytics

And finally…

How to design a print ready business card design in photoshop

Step 1: Setting up your document

Step 2: Creating your bleed guides

Step 3: Setting up the background of our business card

Step 4: Adding in your company name

Step 5: Adding in your information

Step 6: Setting up folders for “front” and “back” designs

Some extras for you, all included in the downloadable psd file

Download the Photoshop file here

`'.join(' ',$errors).'`