As many of you know, I’ve been working on programming the TTZMedia’s Affiliate Banner System for the last several months for John Chow, and there’s always ongoing maintenance to do. Speed and load optimization, design fixes, and stats modules upgrades, referral program add-ons, etc.

One of the things that came up as we started accepting more affiliates who are not friends with John Chow was this : CLICK FRAUD.

So many affiliates are starting to take advantage of it, logging more clicks than they should, that are not deserved.

Here are some of the more obvious signs that I can disclose :

• One ip address has dozens, or in one case, 119 clicks over a 2 month period.
• You see a CTR of over 20%, while the views are logging quite a bit. If you had 5 view and 1 person clicked it, that’s 20% CTR. But If you have hundreds of views, or thousands, with a double digit CTR, there’s something wrong.
• We see multiple clicks from the same ip address that logged into the affiliate admin section.

There are more that I won’t disclose as that’s my algorithm secrets. BUT.

All of the above can be scanned and noted with very simple database management queries, and are easy to detect. Right now I’ve ran some scripts that I wrote this evening to zap these extra clicks, and there have been thousands of clicks removed already over the last hour or so, with more to come.

We’re not stupid. Those signs are easy to find. It’s very easy for us to determine whether an affiliate is messing with us or not. Proxy servers, automatic page refreshers are all gimmicks. We know. So does our affiliate provider, shopping.com. If the logs don’t match, you’ll be booted. Simple as that.

I’ll note roughly how many clicks are removed by the end of the evening.

ActiveX controls - a method of an embedded controlling system that gets deployed on your computer from a website so that certain websites can perform more robust functions - that’s what it is basically. It was a Microsoft creation, and when the internet was young and not as powerful, it was a goldmine for web-based software. Some major websites that use ActiveX controls is MLSLINK for realtors (Multiple Listing Service which provides real-time online listing data). Also, Quickbooks online (an accounting management system that tracks income and expenses) uses ActiveX control for their online platform.

It’s getting out of fashion. It’s in its dying breaths, because web languages have evolved enough to be able to handle very complex tasks in a visually friendly and speedy manner without having to rely on ActiveX controls anymore. I have observed how the MLSLINK system works and all of these functions could be performed just the same (if not better) using a blend of Javascript, AJAX, and robust server-side scripting using PHP or ASP.

Why use ActiveX controls to program your stuff, when other more common codebases can handle it all the same, and you have more learning resources for Javascript/PHP/AJAX online than ActiveX documentations? Also note that having to install ActiveX to be able to use a platform is a tedious task. The whole point of many web-based software is so that you can observe and modify your data from virtually anywhere in the world where you have internet. If I were using Quickbooks online, and I was in a hotel far away from home, it would take me a few extra steps to be able to use it at that computer.

Javascript, PHP, AJAX is more than enough to create very robust and functional data handling web-applications, and you don’t need to install anything everytime you use it on a different computer.

Down with ActiveX controls - in comes Web 2.0.

I’m sure so many people have been talking about this, and I will pitch my 2 cents in to this concept which is one of the greatest pinnacles of Web 2.0 - “Segregation of Data and Presentation”

You guys are all going “What…???” if you don’t know much about web design. And even if you do, if have been focusing only on the small stuff like how to make that PNG show on IE or how to apply transparency on objects, you won’t get this right away - here’s an opportunity for you to think bigger and wider.

A while ago when the internet was first developed, data was kept within a website, and not transferred externally very often. And even when it was, it was done thorugh each individual’s own ways of doing it rather than in a universally accepted formet. In other words, data was not transferrable. If you want to read something, you go to that site - there’s no other way. Also, before the CSS2 days, there was a time when modifying the design or controlling the whole layout was such a pain in the ass. Now it’s all changed. And here’s how :

1. XMLXML stands for Extensible Markup Language. It is extendable, self-definable, and most importantly it carries PURE DATA. JUST DATA. It requires external files or parsing to be formatted into a visual layout. Well, that sucks, no? No, it does NOT suck. This gives flexibility. Same data from 1 source can be parsed and presented in a gazillion different ways on a gazzilion different platforms. It’s awesome. It rocks.How do you think RSS feeds work? Blogs all spit out an RSS feed that looks something like this :

   <item>
   <title>The Most Brutal, Most Honest Review Me Post Ever</title>
   <link>http://feeds.feedburner.com/~r/JeffKeeConsulting/~3/117634970/</link>
   <comments>http://blog.jeffkee.com/2007/05/17/the-most-brutal-most-honest-review-me-post-ever/#comments</comments>
   <pubDate>Fri, 18 May 2007 06:14:23 +0000</pubDate>
   <dc:creator>Jeff Kee</dc:creator>

   <category><![CDATA[Stupid People]]></category>
   
   <category><![CDATA[Comedy]]></category>
   
   <category><![CDATA[Cool Websites]]></category>
   
   <guid isPermaLink="false">http://blog.jeffkee.com/2007/05/17/the-most-brutal-most-honest-review-me-post-ever/</guid>
   <description><![CDATA[While a lot of the PayPerPost items force you to be postive about a product in order to qualify for the payout, Review Me does not ask for that. You can be completely honest with any kind of reviews for anybody, and I found one that made me laugh at the end.
   Who did this? None [...]]]></description>
   <content:encoded><![CDATA[<p>While a lot of the PayPerPost items force you to be postive about a product in order to qualify for the payout, Review Me does not ask for that. You can be completely honest with any kind of reviews for anybody, and I found one that made me laugh at the end.</p>
   <p>Who did this? None other than a fellow blogger, and also my client (one of the bigger accounts!), <a href="http://www.johnchow.com" target="_blank">John Chow</a>!</p>
   <p>He was asked to serve up <a href="http://www.johnchow.com/seven-day-system-for-making-money-online-but-for-who/" target="_blank">a review for this scam of a pyramid scheme</a>, and he cleanly exposes the dark sides of it - about how ONLY the guy who owns the website will leech off your efforts while chances are you won’t get any back!</p>
   <p>This review is a MUST-READ, just so you can read the last sentence on John’s review - and I won’t reveal it here! <a href="http://www.johnchow.com/seven-day-system-for-making-money-online-but-for-who/" target="_blank">Read for yourself about this scam</a>!</p>
   
   <div class="feedflare"><a href="http://feeds.feedburner.com/~f/JeffKeeConsulting?a=ux3UbqQ8"><img src="http://feeds.feedburner.com/~f/JeffKeeConsulting?i=ux3UbqQ8" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/JeffKeeConsulting?a=8F2o8VPA"><img src="http://feeds.feedburner.com/~f/JeffKeeConsulting?i=8F2o8VPA" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/JeffKeeConsulting?a=0qrO7oFl"><img src="http://feeds.feedburner.com/~f/JeffKeeConsulting?i=0qrO7oFl" border="0"></img></a></div>]]></content:encoded>
   <wfw:commentRss>http://blog.jeffkee.com/2007/05/17/the-most-brutal-most-honest-review-me-post-ever/feed/</wfw:commentRss>

   <feedburner:origLink>http://blog.jeffkee.com/2007/05/17/the-most-brutal-most-honest-review-me-post-ever/</feedburner:origLink></item>

   OK, I know this just looks like gibberish. But this file defines the data. This files defines the title, link, date/time, author, content, categories of my blog post. Based on this XML, any engine can display this any way it wants to, without any security risk to my actual data on my server!

   This is also the backbone of how aggregator sites like Technorati works. It collects the XML data from selected blogs (such as your favorites) and displays it all together in the Technorati-crafted format! How amazing is that?

   Newspaper websits now offer this. You don’t need to visit the actual site to get the news - now you can put the XML feed, or more commonly known as RSS feeds, on your RSS reader/aggregator and you can get it all!

2. AJAXThis has more emphasis on the performance and presentation within a website. AJAX stands for Asynchronous Javascript and XML. AJAX works like this :AJAX is a technology that allows you to interact with the server using minimal amount of data (just the data that you need to send in) and then get the results back without refreshing the whole page. Usually, to indicate success, or for the functional purpose, the AJAX code includes scripts to update a part of the existing webpage that you already have open on your browser. That way it reduces the amount of time you spend waiting for the whole page to reload when you input a comment, or fill out and submit a form etc. It makes things go faster, easier, and also it reduces bandwidth for mega-sized websites like Facebook. I already raved about how much I love and respect Facebook because they follow the Web 2.0 trend with AJAX and all.
3. CSSUsually a lot of Web 2.0 pitches do not include CSS, because it is not as new and fresh as XML and AJAX technology. BUT. Why is CSS important?You can build a website out of purely DIVs, with content in it. By itself you’ll just have DIVs after DIVs piled up in rows. However. With CSS, you can define the presentation of the entire website!!! Check out the CSS Zen Garden for more details on how that works, if you’re not sure.What does this mean? Well, that means, once again, the data is segregated from the presentation. While this is different in nature from XML parsing, this still gives the web developers option to design the same content in many different ways. This means that when you want to re-design your website, you often don’t even need to touch the HTML files - you just modify your CSS and all the elements can be defined (if you’re savvy enough with CSS!).

   While this technology has been available for years, as it developed from CSS1 to CSS2 and what not, this is becoming more and more prominent of a technology as computers are no longer the only devices that surf the net. My Blackberry can surf the net. So can Palm Treos, and cell phones, and, well, of course, computers. These devices have different screen-size capacities, as well as different functionalities (my Blackberry cannot run Javascript). Obviously, to spit out the same website layout as you would on a computer wouldn’t look too good on any other platforms, nor would it work very well.

   <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
   <link rel="stylesheet" type="text/css" media="print" href="print.css" />
   <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

   Here’s how the multi-CSS works. Basically, when this code is inserted, the same bloody page will render differently in different type of equipment it is being read by. When a printer tries to print it, it will display it based on print.css. When it’s from a hand-held device with limited screen size, and processing functionality, it will use the mobile.css presentation.

That’s Web 2.0. Segregation of data from presentation gives flexibility, transferrability. It makes data transparent. It makes data fluid.

The internet revolution has barely begun.

It’s so common these days to see pop-ups in websites. When you click on the privacy statement, you see a pop-up. When you click to view the disclaimer (if you ever do) you see a pop up. Or, the page switches over entirely.

I can never shut up about how much of a big fan I am in making website processes simpler. Of course, there are factors such as my time (which is usually subject to my clients’ budgets), as well as difficulty and how easy it is to maintain, but I’m the type that tosses in the extras when I am able to make life better for my clients and their clients as well.

My most recent small-update job was for my client Rhonda Sherwood, who got a website off me back in November of 2006. This website is very neatly and cleanly built with text links instead of graphic links without sacrificing the neat looks, and is one of my better design jobs. She needed to add a link at the bottom to show a disclaimer for legal purposes.

Conventional wisdom would do the following :

Add a link that opens a pop-up window which contains the disclaimer. Using a Javascript pop-up in order to eliminate the menubars, status bar, and buttons would be a bonus.

However. I chose to use some fancier techniques that Facebook uses which makes their website so much better than Myspace - use a floating DIV layer that shows up and disappears. This is done like this :

1. We start with a DIV with id=”disclaimer”. Once that is in place, and filled with the content you wish to show (the actual text), let’s move onto the initial CSS.
2. The initial CSS needs to hide it. That’s done by display:none;. Do NOT use display:hide in this case - display:hide attribute will still lay out the page as if the element was there, which would result in a big hole. display:none will show it as if it was never there, which is what we want to begin with. Also, to make sure this shows up on top of the other items on the page, put in z-index:12; or maybe even a higher number if you have other elements with z-index attributes on your page.

   #disclaimer
   {
   display:none;
   z-index:12;
   width:600px;
   height:auto !important;
   border:2px solid #CCCC99;
   background:#eeeeee;
   color:#333333;
   position:absolute;
   left:100px;
   bottom:50px;
   padding:5px;
   text-align:justify;
   }

   The rest of the CSS should be self-explanatory.

3. Now let’s write out a simple Javascript code that will toggle this box on and off. There are many ways to write this script, and perhaps you could write it so that it can control any other element on the page. In this case, this 1 DIV was all we needed to toggle so I kept it simple and linear.

   <script language=”JavaScript” type=”text/javascript”> function showdisclaimer() {
   document.getElementById(’disclaimer’).style.display=’block’;
   }

   function hidedisclaimer() {
   document.getElementById(’disclaimer’).style.display=’none’;
   }

   </script>

   Each of the functions will either show or hide the element with the id=”disclaimer”.

4. Now, the switch needs to be in place. On the link to the disclaimer, put this in the A tag instead of the usual.

   <a href=”#bottom” id=”bottom” onclick=”javascript:showdisclaimer();”>View Disclaimer</a>

   If you did the usual thing and put href=”#”, this would scroll the page up to the top. By setting the anchor to id=”bottom” and also linking back to it via href, we’ve accomplished our goal of ensuring the page does not scroll back up. Without the href=”" attribute, the link does not behave like a link - it will not turn your cursor to a hand when you put your mouse over it, or behave like a link under the CSS design (such as underline coming up when you hover your mouse). On cliking it, it triggers our Javascript function.

5. Now, once the disclaimer layer is open, it needs to be able to close itself. At the end of the disclaimer DIV, let’s put this in:

   <a href=”#bottom” onclick=”javascript:hidedisclaimer();”>Close</a>

   This link will basically close the DIV layer.

The gizmo is live at Rhonda Sherwood’s site right now - go check it out!

I was developing a website on my testserver, which both myself and my client accessed through client.jeffkee.com subdomain. Throughout development, there were a lot of AJAX modules to be put in - AJAX modules that should not be hacked.

Basically the best way to check for the header is to use the $_SERVER['HTTP_REFERER'] variable, and make an if() statement to ensure that the server-side PHP file pertaining to the AJAX module was called by a file within my own server. The $sitepath variable was set to http://client.jeffkee.com/ for match verification.

Once it was moved to the real server, www.clientserver.com (hypothetically let’s say that was the domain), this caused some problems. Some clients had accessed the site without the www. in front. That means that http://clientserver.com will NOT match the $sitepath variable (which was now set to http://www.clientserver.com/. Options to fix this were the following. And as you can imagine, out of the 3 options I skimmed through in my head over a minute or so, the 3rd one was the charm.

1. Make an alternate $sitepath variable. Make $sitepath2 = http://clientserver.com, and make an if statement with the || (means “or” in PHP) so that either one can satisfy the security measurements.The problem with this method is, obviously, it’s time consuming. I had a few AJAX modules, and to change them all would be a hassle, and when adding new AJAX module I would always have to remember to add the alternate variable to the if() statement.
2. All the internal links should be re-written with the $sitepath variable put in, so that as soon as you leave to another page it links to http://www.clientserver.com/

   Once again. Very time consuming, probably worse than the above option. Also, if one of the AJAX-employing files were to be bookmarked on the client’s side without the www., it would still not work.

3. Use an .htaccess file to re-write the URL automatically for any of the files in that location to append to have the www.

   This method was the obvious winner. It only took 6 lines of code, not to mention it did not require me to modify any of my other files whatsoever.

Here’s how this works.

The .htaccess file is a method that ONLY works on Apache servers. If you’re on a Windows server, this tutorial won’t help you.

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^clientserver.com [NC]
RewriteRule ^(.*)$ http://www.clientserver.com/$1[L,R=301]

RewriteCond %{HTTP_HOST} http://clientserver.com [NC]
RewriteRule ^(.*)$ http://www.clientserver.com/$1[L,R=301]

I’m going to be honest with you, I don’t know what all the lines mean, and all I know is that it works.  This way, whether the website is typed in as clientserver.com on the URL field or http://clientserver.com, it will automatically re-route via a 301 redirection to http://www.clientserver.com.

Of course, if you want to use this code, you should change the clientserver to whatever server you are working on. Oh, and the .htaccess file should be placed in the folder where you want this to apply, and it will automatically apply to all sub-folders as well!