Google Analytics IP Address Tracking Script with PHP

Google Analytics is by far the most widely used web analytics software, free or enterprise level, but it has several downsides, including lack of IP address tracking. You are able to drill down to the Service Provider names but that does not provide enough detailed data, especially if there are several users that use the same ISP but are in no other way related to each other, which can be a problem when analyzing traffic data.

Google Analytics obviously uses IP address tracking in their system but they choose not to reveal that data to its users for privacy reasons. This really does not make much sense to me since nearly every other web analytics tool allows you to track IP addresses. But luckily there may be a way around that by adding custom tracking variables with PHP (although it may be against Google Analytics TOS, which I am not really sure what will happen if you break the TOS).

So, here is how you can do track IP addresses in Google Analytics with this PHP and JavaScript script:

“javascript:__utmSetVar(‘php echo IP address function’)”>

Now you will be able to look up IP addresses in the User Defined field of the Visitors tab in the Google Analytics dashboard.

Magento Google Analytics Funnel for Tracking Each Step of One Page Checkout

Magento Google Analytics – I have spent the entire afternoon working on a client’s Magento website. As an update to my previous post “Magento One Page Checkout vs. Multipage Checkout“, I needed to set up a Google Analytics funnel to accurately track each step of the One Page Checkout process. Because it obviously only uses one page and AJAX, the default Google Analytics configuration is not able to track each of the six steps of the checkout process to determine where the visitors are abandoning their transactions. Clearly, it is very valuable to have that information available. Luckily for us, we are able to do just that. Here are the steps:

1. Open up the template file /app/design/frontend/default/YOURTEMPLATENAME/template/checkout/onepage.phtml in a text editor or WYSIWYG web editor such as Dreamweaver.

2. Paste the following code to the very bottom of the onepage.phtml file (You may have to replace the quotes in plaintext for it to work, fyi):

<script type=”text/javascript”>
Checkout.prototype.gotoSection = function(section) {
try {
pageTracker._trackPageview(‘<?php echo $this->getUrl(‘checkout/onepage’) ?>’ + section + ‘/’);
} catch(err) { }

section = $(‘opc-’+section);
section.addClassName(‘allow’);
this.accordion.openSection(section);
};
</script>

3. Save and upload the template file and you are done with the hard part and you will now be able to track the views of each of the six steps!

4. Now if you want to set up the Google Analytics conversion tracking and funnel to determine where the users are dropping off, you can do so by creating a new Goal in Google Analytics and by using the following settings:

Goal Type: URL Destination
Match Type: Head Match
Goal URL: /checkout/onepage/success/

Funnel Steps:

Step 1: /checkout/onepage/
Step 2: /checkout/onepage/billing/
Step 3: /checkout/onepage/shipping/
Step 4: /checkout/onepage/shipping_method/
Step 5: /checkout/onepage/payment/
Step 6: /checkout/onepage/review/

And that’s it!

Break Out of IFrame Automatically with JavaScript

I’m sure I’m not the only webmaster who gets a little peeved when other websites link to your site but enclose your site in an IFrame with their site navigation or banner ads on the top frame. Well, look no further. Here is a great snippet of JavaScript to insert into the HEAD of any/all pages of your site to automatically break out of the IFrame!

<script type=”text/javascript”>
<!–
if (top.location!= self.location) {
top.location = self.location.href
}
//–>
</script>

Screening Anchor Text in Contact Form Spam

I wrote a blog post last year about “How to Stop Contact Form Spam” and it seems to do the job to weed out the bots from hitting your form processing script automatically and submitting a bunch of spam. However, it looks like one of my websites is getting hit manually by a person or script – they are filling out all of the required fields with a valid-formatted email address and actually clicking the submit button to access the confirmation page. However, they are flooding the “Message” textarea box with thousands of pharmaceutical words, some of which are hyperlinked to their spam sites. The most logical way I can think of to combat these spammers is to screen out all submissions that have keywords in the anchor text of any links submitted. I don’t want to disallow URLs completely, but only those that contain custom anchor text. I’ve Googled variations of “anchor text contact form spam” but have come up with nothing.

So I will need to figure out how to do this myself, either with PHP and/or JavaScript. I DON’T WANT TO USE A CAPTCHA or any other question to check if it’s a human or not, because there’s a very good chance that it is a human! If anybody has any suggestions, please leave them in the comments!!

Transparent PNGs in IE6

For some unknown reason, a significant amount of people still use Internet Explorer 6 as their browser of choice. Since that’s the case, web developers such as myself have to continue to test our websites in IE6 to make sure they work as desired. The majority of the problems in IE6 caused by CSS can be resolved by using a Global Reset Stylesheet and by building in valid, clean code. However, problems still remain, such as IE6′s inability to support alpha-channel transparency for PNG image files.

There are a number of options for getting PNG transparency to work in IE6:

pngfix.js (http://homepage.ntlworld.com/bobosola/pnghowto.htm) – This is the first “hack” I came across a year or so ago and it’s been the one that I continue to use. It’s a simple JavaScript file that seems to do the job for most regular transparent PNG files in IE6. The biggest downfall I’ve had with it is that it does not support the background-repeat property for tiled backgrounds. Also, on the author’s homepage, he explains how the script hasn’t been updated since 2004 so he suggested to try out the SuperSleight filter.

SuperSleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6) – I’ve also used this before but it’s a bit awkward and clunky since it uses a proprietary filter called AlphaImageLoader. It might be worth looking into if you’re looking for something that has been updated more recently than 2004, but it still does not support the background-repeat property, which is the only reason I would not use the initial pngfix.js.

IE PNG Fix (http://www.twinhelix.com/css/iepngfix/) – This one uses CSS behaviors, which is a custom Microsoft extension to CSS. It apparently also uses the AlphaImageLoader filter that SuperSleight uses. Most importantly, the IEPNGFix v2.0 Alpha version found on the test site apparently now supports the background-repeat property. If that’s the case, then I have found a new PNG fix! I haven’t used it yet but once I do, I’ll update the blog with my observations.

Until Microsoft requires users to update their browsers from IE6, we will always be presented with the problem of PNG transparency. Hopefully, the options above will help!

How to Stop Contact Form SPAM

The majority of the websites I develop for clients have contact forms on them for a variety of reasons. First, it’s more convenient for users to fill out a form within their browser window as opposed to requiring them to open up their email software to write an email from scratch. Second, it’s the primary method of measuring generated leads/conversions, and clients can require exactly the information they need to qualify leads. Third, by using a contact form, clients won’t have to publish an email address on the site for spam bots to harvest. However, contact forms are definitely vulnerable to being flooded with spam and that’s why I am writing this post on how to prevent exactly that. I use a variety of methods which tend to prevent 99% of automated spam submissions:

Step 1. Validate The Form Fields – Check to make sure all required form fields are filled out before processing the form. I posted about a generic form validation script awhile back, and I would still recommend it. It uses JavaScript to check that every required field is filled out and checks that the email address is formatted correctly. It’s simple and nothing fancy. However, it would not be very effective on its own since most bots bypass any JavaScript security measures.

Step 2. Validate The Referrer – If you are using a separate file to process the form, make sure to validate that the form is being submitted from the page with the contact form. This will prevent bots and spammers to automatically access the processing file to spam it. However, the referrer can easily be spoofed and often is, so this method alone is certainly not bulletproof.

Step 3. Hide Fields with CSS – Most bots and spammers will automatically fill out every form field that is on the page. One way to stop them is to insert a blank field in the form but hide with CSS “display: none;”. Add some code to your form processing file to check to ensure that the hidden field remains empty; if it’s not, it’s most likely filled out by a spammer and thus should not be processed.

Follow those 3 steps and you’ll be much better protected against contact form spam.  There are definitely additional measures you can use such as more complicated JS validation, CAPTCHAs, and asking simple questions that only humans can answer (1+2=?, what color is a cardinal?, etc.), but I’ll write more about those in another post.

JavaScript Generic Form Validation Script

Here’s a simple JavaScript form validation script that is easy to implement.  It’s not rock solid but it’s a decent solution for a lot of sites.

http://www.techtoolblog.com/archives/javascript-generic-form-validation