code for marketers

Transcription

code for marketers

CODE FOR MARKETERS
Draft Revision 5
Jonathan van Clute
11.21.10
1
CODE FOR MARKETERS
GETTING STARTED ............................................................................................... 4
Intro to Coding – What & Why .....................................................................................4
Quick & Dirty CPanel/WHM .........................................................................................5
Quick & Dirty FTP .........................................................................................................8
BASICS.................................................................................................................. 9
HTML Text Formatting .................................................................................................9
HTML Layout with Tables ...........................................................................................13
Styling HTML Elements ..............................................................................................18
CSS Basics ..................................................................................................................21
On-Page vs. External ..................................................................................................24
Comments .................................................................................................................25
iFrames & Framesets .................................................................................................27
WYSISWYG vs. Text....................................................................................................29
Form Basics ................................................................................................................31
DIVs & SPANs.............................................................................................................32
Adding Sound ............................................................................................................34
ADVANCED .........................................................................................................35
Photoshop & Alternatives ..........................................................................................35
HTML vs. PHP.............................................................................................................37
JavaScript/AJAX Basics ...............................................................................................40
Wordpress Theme Editing Basics ...............................................................................43
Understanding File Paths ...........................................................................................44
PHP Variables & Arrays ..............................................................................................49
GET vs. POST ..............................................................................................................55
Query Strings .............................................................................................................57
Applied Query Strings & Logic ....................................................................................59
Geotargeting..............................................................................................................66
SESSION Variables......................................................................................................70
Function Basics ..........................................................................................................71
2
Logic & Loops .............................................................................................................72
Web Scraping.............................................................................................................73
Understanding Errors .................................................................................................76
Web Development Software......................................................................................77
BLACK HAT ..........................................................................................................78
What Exactly Is "black hat"? ......................................................................................78
Cookie Stuffing...........................................................................................................79
Cookie Prepop ...........................................................................................................84
Flash Cookies .............................................................................................................85
Referrer Spoofing.......................................................................................................86
IP Spoofing.................................................................................................................87
Click Trapping ............................................................................................................88
Proxies .......................................................................................................................89
Creative Form Submission..........................................................................................90
CPA Slice & Dice .........................................................................................................91
Reading Browser History............................................................................................92
Cross Domain Form Ripping .......................................................................................93
3
GETTING STARTED
Intro to Coding – What & Why
Don't Fear the
Code!
4
Quick & Dirty CPanel/WHM
WTF!?
I will forever remember the first time I saw CPanel. "WTF" definitely describes my
reaction. There is so much stuff! The reality is however, most people will only ever need
about 10% of what's there. The rest you can totally ignore and if you need it, you'll
probably know.
There are two camps that CPanel elements fall into for me, those I use frequently, and
those I set up once and forget. Here are the components of CPanel that I find I use
repeatedly:










Email Accounts – For setting up email users @yourdomain.com.
BoxTrapper – A decent whitelist spam blocker, it will send everyone who
emails your account(s) an email that they must reply to, for their original email
to get through.
File Manager – I rarely ever use this myself, since I much prefer an FTP
client. However it has one fantastic feature which is the ability to unzip a file
directly on the server. It is hundreds of times faster to upload a zip file and
unzip it in File Manager, than to unzip it on your computer and upload the
files via FTP. Just remember to delete the zip file from the server after you're
done unzipping it.
Awstats – If you want to see the raw stats on your server, this is the place. I
don't really find this terribly useful every day but on occasion it reveals some
interesting facts about who is visiting my server, and what they're doing.
Subdomains – If you want to add subdomains (subdomain.domain.com) this
is the place.
Addon Domains – This is where people on lower-end shared accounts will
add extra domains to their server. If you're on a VPS or dedicated server you
really don't need this at all.
MySQL Databases – This is where you go to set up MySQL databases and
users. Most of the time you'll always do the same 3 steps: 1) Create database.
2) Create user. 3) Assign user to database.
PHPMyAdmin – This is where you administer the database you created in
the previous option. If you want to manipulate the DB directly in any way,
this is where you do it. Make sure you're certain what you're doing though!
Fantastico – A "push button" installer for all kinds of things. Almost all
CPanel hosts that I've seen include Fantastico, and it makes installing
Wordpress and many other complex scripts a breeze. If you have a dedicated
server without Fantastico, you can probably add it to an existing CPanel license
for a few bucks a month.
Cron Jobs – Cron as in "chronograph". I know, it's not spelled correctly, but
such is life. This is where you set up timers to execute certain things at
5
prescribed intervals. Loads of applications here, too many to possibly cover.
Also the syntax of cron is very specific and tricky to master since it can differ
from one host to the next. If you really want to get into executing things on
timers, you'll probably have to talk to your host's support to find out exactly
the proper syntax to use for that host. I always end up searching Google.
And here are the ones I mostly "set & forget":




Default Address – This is where you set your "catch all" email address. This
is the address where all emails that are sent to non-existent accounts, will be
sent. So if someone sends an email to [email protected], even
though that account doesn't exist, the email will still go somewhere. This is the
easiest way to make all emails to a certain domain, go to your actual email
address without having to set anything up.
FTP Accounts – Here you'll manage your FTp users and accounts. Normally
an FTP account is automatically created when you set up a domain, so you
may not need this very much if ever. But should you need to set up additional
FTP accounts for anyone, this is the place.
Hotlink Protection – "Hotlinking" is the practice of directly loading images
from someone else's server, on your web pages. It results in that person's
bandwidth and server usage being consumed, which in some cases could
seriously upset them or cost them money. If you want to make sure nobody
can do this to you, enable hotlink protection here.
Index Manager – This lets you disable the default view of a directory if you
wish. Normally when you create a directory on most hosts, this is disabled
which means visitors can access the "root" of any directory and see everything
in it. Disable this if you don't want people to be able to snoop through your
directories and find stuff (including Google!).
Everything else in CPanel has a purpose, but will rarely apply to your every-day
marketer.
CPanel themselves provide tutorial videos covering many of the things it does. They
aren't the best ones ever made, for example they seem to have no audio which is
unfortunate. But if you don't mind reading, they'll probably be helpful:
http://www.cpanel.net/products/cpanelwhm/cpanel11/tutorials.html
There's also a good suite of tutorials (not video though) here:
http://www.siteground.com/tutorials/cpanel/
6
7
Quick & Dirty FTP
8
BASICS
What is HTML
anyway?
HTML Text Formatting
HTML (Hyper Text Markup Language) is not really a programming language, it’s what
is known as a "markup language". And it is pretty much literally that – you "mark up"
your normal language with certain symbols and characters, which will mean something
to a web browser when it reads (or "interprets") the page.
I'm sure you've seen markup before. Ever had a paper corrected by a teacher? That's
markup!
For example… I might want to make a certain word bold in a sentence, for emphasis.
Forgetting for a moment that I’m using a fancy word processor, and imagining that I
was using a thin pencil and paper, how would I communicate to someone that they
should interpret something as bold?
Example sentence:
The quick brown fox jumped over the lazy dog.
I want the word "over" to be bold (no drawing thick lines allowed!). In plain English,
it might look like this:
The quick brown fox jumped (bold this)over(stop bolding) the lazy dog.
Not very pretty is it? No, but it would tell us what word is supposed to be changed,
and how. Of course this isn’t very natural for us humans, but computers are all about
instructions. So in HTML, it would look like this:
The quick brown fox jumped <b>over</b> the lazy dog.
The <b> is called a "tag", or to be more precise an "opening tag" since it has a "closing
tag" counterpart of </b>. This is, obviously, the bold tag.
When a web browser encounters this tag combination, it interprets them as
instructions, and displays to you the human being, a bold word like so:
Much better isn’t it?
At its most basic, that’s all HTML is… just simple formatting commands to change the
appearance of text on our screens. Of course it can do much more once you get below
9
the surface, but basic text formatting is something we marketers are going to use a lot
(see, I just did it! ;)
Formatting Tags
Here are the text formatting tags you will probably use the most:
<i> </i> - italicize
<b> </b> - bold
<u> </u> - underline
To see these in action for yourself, open a new document in a pure text editor. Do not
use a Word Processor like Microsoft Word or even WordPad for this, as such
programs can badly corrupt even simple code. Use Notepad or a similar true text
editor. I happen to like Edit Pad Pro personally. In your new document, type a test
sentence with an html tag or two, such as:
The quick <b>brown</b> fox jumped <i>over</i> the lazy dog.
Save this file under any name you like, ending in .html, such as "text.html". Once
saved, open the file in a web browser (you can probably just double click it to have the
computer automatically open it in a browser). You should see something like this:
Ta-da! You’ve just written HTML from scratch! Not really so hard or scary is it?
Now let’s move on to a few other simple text modifiers you’ll want to know about, in
particular the <p> and <h>, or paragraph and header, tags
Paragraphs
At first glance, it might not seem like the paragraph tag is terribly important, but when
we get into styles in a little while, you'll see just how important they really are. All the
<p> tag really does from the viewer's point of view, is start a new paragraph and put a
small amount of space between each one. Here's a brief example:
<p>This is the first paragraph of text.</p>
<p>And this is the second paragraph. See the spacing?</p>
This is the first paragraph of text.
And this is the second paragraph.
See the spacing?
When you want to break up your text into easily readable blocks, this is the simplest
way to do it. You may have seen people create line breaks with the <br>, or break tag,
and you can indeed do that… but they don't quite behave the same and as I already
mentioned, paragraph tags will become very important when we add styles in a short
while.
10
HTML Header
Tags
To create big, eye-catching headlines you will want a quick and easy way to make large
font sized text. While it is possible to specify exactly what font size and style you want,
etc., there is a "quick & dirty" way to do this using the header tags. There are a whole
bunch of them but they all follow the identical format. Each one just gets
progressively smaller (by default anyway). Here are the tags:
<h1> </h1>
<h2> </h2>
<h3> </h3>
See a pattern yet? Most people probably never use more than just <h1> or <h2> for a
headline and a subheadline, but it’s good to know that there are more available when
you get more into using CSS (don’t worry, we’re not getting into that yet!)
So your HTML might look like this:
<h1>The quick brown fox jumped over the lazy dog.</h1>
<h2>Suddenly the dog sprang to life and bit the fox!</h2>
Once again when saved and opened in a browser, it might look something like this:
Suddenly the dog sprang to life and bit the fox!
Combining &
Nesting Tags
You’ve now created a headline and a subheadline. And of course you can get fancy by
combining or "nesting" tags, to mix basic formatting tags inside your headlines, like
this:
<h1>The quick <i>brown</i> fox jumped over the lazy dog.</h1>
<h2>Suddenly the dog <u>sprang</u> to life and <i>bit the fox!</i></h2>
Now we’re having fun! The above might look something like this:
Suddenly the dog sprang to life and bit the fox!
Pretty cool huh? There’s just one more text formatting function I’ll share with you,
and we’ll move on. This tag is technically one you shouldn’t use because it’s being
slowly phased out of the HTML specification (known as "deprecated"), but it’s so
wonderfully simple to use and is still supported by all modern browsers, that it’s not
going to give up easily.
11
In the Middle
It’s the <center> tag. I bet you can already guess what it does can’t you? A picture is
worth a thousand words, so here are two of them!
This is a line of text that is not centered.
<center>This is a line that is centered.</center>
This is a line of text that is not centered.
This is a line that is centered.
As you can no doubt see, the line wrapped in the <center> opening and closing tags, is
centered on the page. Simple but very useful, especially when creating salesletter or
landing page headlines!
That’s it for basic text formatting. Try experimenting with these tags yourself and see
how they work together. Make sure you always remember to open and close the tags, or
unexpected results will occur.
Next stop… join me at the <table>!
12
HTML Layout with Tables
Set the Table
I’m going to make "real" web designers cringe with this section, because I’m going to
use a few features of HTML for things they were not really intended. But as a
marketer, I care first and foremost about what gets results quickly with the least hassle,
and quite often… that means tables!
So what exactly is a table anyway? Well basically it’s a grid. You’ve probably seen
Excel before, or at least some sort of spreadsheet, right? Or graph paper? You get the
idea. A whole bunch of squares, evenly spaced, that you can put stuff in. But the
beauty is, they don’t have to be evenly spaced, and you can put anything in them that
you want… including other tables! But I’m getting ahead of myself. Here is a table in
one of its
simplest
forms:
So it’s an
empty 2 by 2 grid. How exciting! But while this may be what a table wants to be by
default, we can make it do many other things. Yes we can use it for
simple lists like so:
Color Size
Red
Small
Blue
Medium And that’s exactly why tables were developed in the first place, to
display orderly lists of data that belong in rows & columns. They
Green Small
also happen to be ideal for many of the kinds of pages marketers
Yellow Large
need to make, like squeeze pages, salesletters, or any other kind of
landing page. We just need to tweak them a bit to serve our
purposes ideally.
But first, there are a few tags you need to know about. Here they are:
<table> </table> - Starts and ends the table
<tr> </tr> - Starts and ends a specific Table Row
<td> </td> - Starts and ends a specific cell containing Table Data
Tables can get confusing if you don’t start off on the right foot with them. First, it’s
critical to remember that as with almost everything in HTML, each aspect of the table
– the table itself, and its rows and columns – need to have both an opening and a
closing tag. If you start off structuring your table this way, it will be much easier to
troubleshoot when strange things inevitably begin happening with your layout.
Here is a simple 2 by 3 cell table, in HTML:
<table>
13
<tr>
<td>header 1</td>
<td>header 2</2>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</2>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
Still with me? Breathe! =) If it doesn’t already make any sense, don’t worry it will
soon. Here’s what the above might look like in your browser:
header 1 header 2 Now allow me to explain the tags, in case you’re not clear by
example what exactly each one is doing.
cell 1
cell 2
cell 3
cell 4
<table> - This tag tells the browser "From this moment until
further notice, we are creating a table." Always make sure you
end the whole table with its counterpart, </table>.
- This tag says "We’re starting a new row of the table now." Remember that in
any table, columns are the vertical sections, and rows are horizontal. Just remember
columns as in Greek or Roman columns to remember vertical. That’s what always
works for me. ;) Each row must be closed with the </tr> tag when complete.
<tr>
- Officially this stands for "table data" but basically it defines each actual cell of
the table, which contains information. So every single cell is going to have a <td> and a
</td> tag, to start and end the cell.
<td>
It’s vitally important that these tags be laid out properly, so it’s easiest to do this from
the outset.
Like I said earlier, this is how tables want to be used by default. As marketers we’re
going to use them for slightly different purposes.
Landing Page
Layout
One of the most common things marketers want to do with a landing page, is have an
image to the side of some text, such as a headline or bullet points. Maybe it’s images
related to each selling point of the product, or maybe it’s just something eye-catching
to the right of a headline. Whatever the reason, tables are the simplest way to
accomplish this task. But first let’s cover another vital tag – the <img> tag.
14
Adding Images
as you might have guessed, means "image" and it’s the first tag we’re going to
cover which does not use a closing tag. The image tag can have many things added to it
which we’ll get into later, but the most fundamental one is that it needs to know what
image you want to use. This is also known as defining the source of the image.
<img>
Here is an example of a properly formatted <img> tag:
<img src="http://mydomain.com/images/marketing.jpg">
This tag is the first one we have dealt with that contains an additional parameter,
known as an attribute. Attributes simply give additional information that the tag needs,
in order to do its job. If we used an image tag without the 'src' attribute for example, it
would have no idea what image we wanted to use in that location.
The browser should now display the actual image, and not just the URL of the image.
In this example, it would look like this:
Again let me mention that this tag does not require a closing tag, so don't go putting
</img> at the end of it.
15
Aligning Images
and Text
Now that we know how to add images, it's time to put one in our table so we can put a
text caption next to it. Here's the code followed by the browser result:
<table>
<tr>
<td>This Is Our Text Caption</td>
<td><img src="http://mydomain.com/images/marketing.jpg"></td>
</tr>
</table>
There we have it, a very
simple one row high, two
column wide, table with text
This Is Our Text Caption
in one cell and an image in
the other. As a marketer, I
might use this to align a cool
graphic next to a list of
product benefits for example, like this:
It's Fast!
It's Good!
It's Cheap!
16
The code for this example might look something like this:
<table>
<tr>
<td>It's Fast!</td><td><img
src="http://mydomain.com/images/thumbsup.jpg"></td>
</tr>
<tr>
<td>It's Good!</td><td><img
</tr>
<tr>
<td>It's Cheap!</td><td><img
</tr>
</table>
Notice in this example, I let the code for both columns run together on one line, just
so it might be easier to read and see visually how it matches to the result above.
Any time you need to line up rows or columns of things in an orderly fashion, using a
table is the fastest and easiest way to do the job. But they don't really look like much
do they? Let's spice things up with <style>!
17
Styling HTML Elements
Inline vs. CSS
Generally speaking, there are two ways to add customizations to your HTML: either
"inline" or using a "stylesheet". For now I'm going to focus only on the former and
we'll discuss the latter, later.
"Inline" simply means it happens directly within the flow of your code. Every time you
want a particular style to occur, you have to specify it at that point in the code. But
what exactly is a style in HTML anyway?
Styles are actually a lot of things. Way more than I can reasonably cover in fact… but
that's OK because most of the time, we marketers only need to know about a few of
them and we'll use them over and over in our campaigns. At their simplest, styles are
attributes that allow us to specify the way certain HTML tags are going to end up
looking. Much like how we could use the text formatting tags to define how text
would look, we can use styles to define how just about any HTML element will look,
including tables. Before we dive into the deep end however, we have to talk about the
syntax of styles. It's very important because if it's not exactly right, the styles won't
work.
First here is an example of a simple, properly formatted style tag that has been added to
a simple image tag:
<img style="width:50%; height:50%;" src="http://mydomain.com/images/marketing.jpg">
It's probably fairly clear already, but the above style code is specifying the width and
height for the browser to draw the image. This is a quick way to manipulate the
dimensions of an image.
IMPORTANT NOTE: When altering the image via HTML like this,
the full size image is still downloaded by the viewer's browser! This
means that if you have a gigantic image, and you adjust its width
and height down to just 5% so that it's the right size, your poor
visitor's browser still has to first download the entire full size image
and then shrink it down.
This is a terrible idea as it results in very, very slow page loads. It's
is a great way for me to illustrate styles for educational purposes,
but a terrible idea in practice. Don't do it. Resize your images to
the largest size you will actually need them to be, in an image
editor before using them on your pages.
18
The syntax is clearly shown in this example, but I'll break it down for you here just to
be sure you don't miss anything vital.
Just like any other attribute, the style tag must come somewhere after the initial tag
definition which in this case is "img". The order of attributes doesn't actually matter, it
could be <img src="…" style="…"> or it could be <img style="…" src="…"> and the
code will behave the same. The style attribute is always followed by an equals sign, and
then an opening quote to begin defining the parameters themselves.
After the opening quote, comes the first parameter you want to define. In this case it is
width.
The parameter name must be followed by a colon (not a semicolon!).
Next comes the appropriate value for this parameter. Parameters all have their own
allowed values and I'll list some of them later. In this example I've chosen to use a
percentage, which will set the width of the image to 50% of its original size whatever
that may be.
To end this parameter, we must use a semicolon (not a colon!).
Now we have the option of repeating these steps to add more parameters (which we
do with height).
We must always end the style definitions with a closing quote.
So there you have the proper syntax for inline styles. You can apply these to nearly any
tag though it makes more sense on some than others. In particular I use them most
often with tables, paragraphs, and images.
Basic Text
Formatting with
Styles
Now, let's style some text. There are so many possibilities here they can be quite
staggering. Using styles to define the attributes of your text allows you to go way way
beyond just bold, italic, and underline. You can do just about anything your mind can
come up with if you learn styles well enough, but I'm going to cover just the basics that
I find are most often needed in my business.
First let's talk about how to replicate what we learned at the very beginning – the basic
bold, italic, and underline tags. We can achieve the same things with styles, and
combine them all together if we wish. To do so we're going to use a paragraph tag to
define a block of text, like so:
<p>Here is a block of text that we are going to style in various ways.</p>
19
Adding a style tag to the opening paragraph tag, will style the entire paragraph. This is
important to note because at the beginning, we were styling individual words within a
sentence. You can combine both methods of styling in a single block if you wish.
Here's an example:
<p style="font-weight:bold; font-style:italic;">Here is a <u>block of
text</u> that we are going to style in various ways.</p>
This code might look something like this in a browser:
Here is a block of text that we are going to style in various ways.
As you can see, the style equivalent of bold is font-weight:bold; and the style
equivalent of italic is font-style:italic;. We can also replicate the underline effect
using text-decoration: underline; but remember, these will affect the entire
paragraph of text if applied to the paragraph tag.
20
CSS Basics
WTF is CSS?
First things first, CSS is an acronym and stands for "Cascading StyleSheets". Now go
ahead and forget that because it's completely unimportant and you'll never need to care
about it again.
What matters to you and I, is that CSS has a structure of its own, that needs to be
properly followed in order for it to work. Fortunately you already know most of it, and
the rest we're going to discuss now.
CSS is actually the code you've already been using with inline styles. It's the exact same
attributes, and they do the same things with the same basic syntax. But by putting CSS
in its own block at the head of the page, we'll be able to make sweeping, page-wide
changes very easily.
I'm sure you've seen something like this at the top of HTML pages before:
<style type="text/css">
body {
font-family: Arial, Sans-Serif;
background-color: #EDEDED;
}
.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}
.inline-widgets #wp-calendar caption, .blogname, .blogdesc {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, SansSerif;
}
.posttitle, #comments, #respond .title, #respond.pre27, #trackbacks {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, SansSerif;
}
.commentlist li, #commentform input, #commentform textarea {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.sidebars {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#page {
width: 763px;
}
</style>
Believe it or not, this is a stylesheet.
21
CSS Structure &
Syntax
After our previous chapter on inline styles, you might even recognize some of it as
familiar. The difference here is, everything has been defined up front, rather than
"inline" at each line of code where it was needed. The great thing about that is, if we
want to make a change to every paragraph tag on the entire page, we can just change it
in the stylesheet up at the top.
Using a stylesheet is actually quite simple, and though I still often fall back on inline
styles out of laziness, stylesheets are really the better approach.
Where previously we had:
<p style="font-weight:bold; font-style:italic;">Here is a <u>block of
text</u> that we are going to style in various ways.</p>
We can now define our styles in the stylesheet area, and apply them to as many <p>
tags as we want. Here's how this same example might look, using CSS instead of an
inline style:
<head>
p {
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>Here is a <u>block of text</u> that we are going to style in various
ways.</p>
</body>
Notice that I can still mix the regular text formatting <u> tag, even though I've got CSS
in effect as well.
So now I've defined the style of the paragraph tag in a <style> block which would
allow me to have as many separate paragraphs as I wanted, but they could all share the
exact same formatting. To change the formatting for all of them, just change the CSS!
Here are the key elements of CSS blocks:
1. They don't actually have to go in the <head> area, but that's traditionally
where they are found.
2. They should always start with <style type="text/css">
3. Each individual element that you want to style, is listed by only its
letters, separated by spaces if you want multiple attributes to share the
same styling.
22
4. The style attributes start being defined after an opening curly brace.
5. Attributes follow the same syntax as described previously with inline
styles.
6. The specific element must be ended with a closing curly brace.
7. The entire style block is closed with a </style> tag.
That's really all you're going to need to know about CSS most of the time, though there
is a ton more to it if you really want to learn it all. For a much more thorough tutorial
all about CSS, go to http://www.csstutorial.net/ and you can dive deep.
Most of the time when I play with CSS, it's either just making slight alterations to an
existing page's CSS (a template for example, or a Wordpress theme) or it's defining just
a few simple attributes on a few elements. Just understanding its basic structure and
syntax will allow you to tweak most any page you find yourself using, to look how you
want.
23
On-Page vs. External
External CSS
One possible downside to putting the stylesheet right there on your page is that it's a
little bulky and makes the overall page code harder to read for a developer (and
possibly web crawlers as well). Fortunately there's an easy way to push all this stuff off
onto another file (an external stylesheet), and simply include that page within your main
one with a single line of HTML. That mythical line might look something like this:
<link rel="stylesheet" href="http://www.domain.com/styles.css"
type="text/css" media="screen" />
Don't even concern yourself with what any of the attributes in this tag mean, just use
this code on your main HTML document in the <head> area, and change the URL to
point to your actual stylesheet document wherever it is (you can call it anything as long
as it ends in .css). In that document would simply be the code block you would have
put on the page from the previous example:
p {
font-weight:bold;
font-style:italic;
}
It does not need to be surrounded in any <style> tags because the line calling it from
your main page, already handles that.
This concept of "external" files will come into play later with Javascript as well, so this
isn't the last time you'll see it referenced.
Enough about styles, as you can see there's plenty to learn here to keep you busy for
years if you really want to know it all. This should give you the most basic building
blocks though to add or modify stylesheets to your marketing pages.
24
Comments
Not Just for Spam!
When programmers are writing code, it's not uncommon for them to want to include
notes in the code, either for themselves or anyone else who may work on it at a later
date. Anything written within these special "comment characters" will be ignored, so
it's also a handy way to temporarily "turn off" code from your page, without deleting it.
HTML, Javascript, and PHP all have their own ways of handling comments, though
there is some overlap between the latter two. Here are some examples:
HTML Comments
<body>
<h1>This is a headline that will be seen.</h1>
<!—
<h2>This line has been commented out</h2>
This section will also be ignored
Because it's still inside the comment block tags.
-->
</body>
So the opening comment tag is 
Javascript Comments
<script type='text/javascript'>
function(function_name)
{
Alert('Hello World');
// This line is a comment and does nothing
*/
These lines are also comments.
See how it's possible to comment out multiple lines all in a block?
Very useful!
*/
}
We have two methods of commenting with Javascript, we can either places two slashes
at the start of any line we want to be ignored, or we can "comment out" multiple lines
in one block with the opening /* tag and the closing */ tag.
25
PHP Comments
<?php
Echo "Hello World!"; // This part will be ignored
# This line will also be completely ignored.
/* We can also comment out blocks like with Javascript.
This section will all be ignored.
Feel free to mix & match comment styles! */
?>
As you can see, PHP shares two of the comment methods with Javascript, but adds a
third method using the hash symbol #. Note also that only the block commenting
methods need to have a closing tag, the slash and hash methods only need an opening
tag, and they stop having any effect as soon as you start a new line. These are also all
valid examples depending on which type of code you're writing of course:
# This is a block of text that will be ignored.
// Even though it's on multiple lines,
# and we aren't using block commenting,
// it will all still be completely ignored
// because we have used multiple single line
# comment methods.
Comments are extremely helpful when you come back to a page at a later date and
can't really remember what you were doing, so use them liberally! Remember however
that HTML and Javascript comments will be visible by the visitor if they view the
source of your page. PHP comments are not visible to anyone without access to the
actual source file on the server.
One other oddity to make note of is that Javascript and CSS often appear to be
commented out, but they really aren't. I know that sounds weird, but just take my
word for it. This is due to some older browser not handling JS or CSS properly, and
looks like this:
<!—
// bunch of css code goes here
// and here
//-->
</style>
Look at the last comment tag – see how it's commented out itself?? Like I said, very
weird… but you'll see it a lot. Don't worry it's normal.
26
iFrames & Framesets
I was Framed!
In the marketing world, you'll encounter iFrames a whole lot. But what exactly are they
and why are they used so much?
First let's talk about the two primary framing methods out there. iFrames, and
Framesets. They're not the same thing, don't behave the same way, and are most
useful for different applications.
You can find lots of information on the differences between these two methods of
framing, but in my mind it primarily comes down to one question:
Do I want to load part of another page into my own, or do I want to mimic
another entire page as if it were my own?
I think of Framesets as being used in cases where I want another page to appear in the
entire browser window, as if it were my own page. I use iFrames when I want to bring
part of another page into my own page.
Here's a simple example of Frameset code:
<frameset rows="100%,*">
<frame src="http://domain.com/page.html">
</frameset>
This will display the framed page full screen, taking up the entire browser window, but
on your domain.
Here's a simple example of iFrame code:
<iframe src="http://domain.com/page.html" width="800" height="600"
frameborder="0">
</iframe>
This will display the framed page in a box on your page that is 800 pixels wide, by 600
pixels tall, and will have no line (border) around it.
There are many more options available for how you format the frame itself, and you
can google iFrames and Framesets if you want to know all of them. For marketing
purposes though, this is all you'll need most of the time.
It should probably be noted that iFrames are largely hated outside of the marketing
world. Other webmasters often see them as stealing, since they can be used to display
another site's content with the appearance of it being yours.
27
Busted!
It is entirely possible to prevent other sites from framing one's content, through the use
of code commonly referred to as a "frame buster". Some affiliate networks employ
frame busters as well because they don't want their affiliates framing the offers. You'll
know you've been "busted" if you set up a frame page, and when you try to visit it your
browser gets suddenly redirected to the actual URL you're trying to frame, rather than
your framed page. I have never found a reliable way to defeat frame busting, since it
happens in the user's browser (javascript) when the framed page is loaded, and is not
within your page's control.
28
WYSISWYG vs. Text
What You See Is
Sometimes What
You Get
We human beings are visual creatures, so it's not really natural for us to think like a
computer – in code. We like to see things laid out in a visual representation, rather
than look at some coded characters and then try to imagine in our minds what it might
look like once a machine has interpreted it.
This is where "WYSIWYG editors" come into play. This acronym stands for "What
You See Is What You Get" and in theory, it sounds pretty good. You don't have to
know any code, you just drag & drop stuff where you want it, and basically lay the
content out like you would in a word processor, and magically HTML comes out the
other end that will work on the internet.
In practice, I can't stand WYSIWYG editors. Primarily because they tend to produce
extremely "bloated" code, with lots of extra stuff that isn't necessary and only serves to
slow down page loading times and increase bandwidth requirements. They also have a
nasty habit of generating code that works in one browser platform, but not another.
Here's an example of what I mean. I typed up 3 simple lines of text into a web-based
WYSIWYG editor, and here is the code it produced:
<h1 style="text-align: center;">This is an <span style="text-decoration:
underline;">example</span>.</h1> <span style="font-family:
monospace;"><span style="font-weight: bold;"></span></span>I have a <span
style="font-style: italic;">couple of <span style="background-color:
rgb(255, 255, 51);">paragraphs</span></span><span style="background-color:
rgb(255, 255, 51);"> </span>of <span style="font-weight: bold;">text
</span>here.<br><span style="text-decoration: underline;">How does this
<span style="font-weight: bold;"><span style="color: rgb(255, 0,
0);">WYSIWYG</span> </span>editor handle it?</span><br>
I can create the same end result by typing the code directly in a text editor, and it would
look like this:
<center><h1>This is an <u>example</u>.</h1></center>
<p>I have a couple of <i style="background-color:yellow;">paragraphs</i>
of <b>text</b> here.</p>
<p><u>How does this <b style="color:red;">WYSIWYG</b> editor handle
it?</u></p>
They produce the same visual result in a browser, but which one requires less
bandwidth? Which one is easier to read? This is why I always advise marketers to
avoid programs like Dreamweaver or other WYSIWYG editors, and just learn the
handful of HTML tags you actually need to use as a marketer. Now if I want a
complex design that is graphically rich etc., I will turn to a real designer and they will
29
probably use Dreamweaver. Let them. That's what it's for – designers! Unless you want
to become a web designer for a living, do yourself a favor and stay away from tools
meant for them.
30
Form Basics
Collecting
Information
The most common use for forms is to ask your visitors to give you some piece of
information. In marketing this could be a name or email address, or it could be their
payment information, credit card number, choices of size or color of a product, or
anything else you can imagine. Just like their paper counterparts, forms are for
collecting information. And also like their paper counterparts, once you have the form
filled out, you have to do something with the information it contains.
The most basic tag required in any form, is actually the <form> tag itself. This is what
will define the form, and will need to be closed with a </form> tag when the form is
done.
Here's an extremely basic form example:
<form action='http://www.domain.com/page.php' method='POST'>
Name: <input type='text' name='name' value=''><br>
Email:<input type='text' name='email' value=''></br>
<input type='submit' value='Submit' name='Submit' />
</form>
This is about as simple as a form can get. It defines the page we're going to submit the
information to (the "action" parameter), and the "method" we're going to use (I'll talk
about methods later in the GET vs. POST section). Then it asks for two pieces of
information, a "name" and an "email". Lastly it defines a simple submit button that
will say "Submit" on it (the "value" parameter).
So this code will display two fields labeled appropriately, and a button for the user to
click. When clicked, the information entered into the fields will be sent to
http://www.domain.com/page.php and what happens from there, is up to the
information on that page. It's worth noting that the visitor themselves is also sent to
that address, so you would typically pay some attention to how that page looks.
Forms will play a big part in any marketing, and there is a whole lot more that can be
done with them than I've shown here. Later in the advanced section we'll start getting
into some of the more creative and complex things forms are capable of. If you'd like
more details on the basics of forms, here are some good resources:
http://www.tizag.com/htmlT/forms.php
http://www.phpf1.com/tutorial/php-form.html (this one's a bit more advanced)
31
DIVs & SPANs
DIVide & Conquer
Very often we'll want to make stylistic adjustments to entire sections of a page. Maybe
to align an entire paragraph on the page, or adjust the position of an image, etc. This
calls for the ability to define a section of the page, and manipulate it as one big block.
Enter the <div> and <span> tags.
At first glance it might appear that these two tags are the same, but while they are very
similar in most respects, there are a few critical differences that will determine when
you use one over the other.
stands for division and does what its name suggests. It defines an actual division
on your page and allows you to adjust things about whatever is contained within that
division. It has its counterpart closing tag </div> as well to define the end of the
division. Here's an example of proper usage:
<div>
<div>
ways.</p>
</div>
Now in this example, nothing would especially seem to be happening from the use of
the div tags. At most you might notice that where you started the div, there appears to
be a paragraph break. And that is the primary difference that we care about between
<div> and <span> - <div> will create a paragraph break, while <span> will not. This
means you can use <span> inline, like this:
<p>Here is a <u>block of text</u> that <span>we are going to style</span>
in various ways.</p>
Of course here again, it won't look like the span tag did anything because by itself, it
doesn't. Where both of these tags become most useful is by adding a <style> tag to
them. Like so:
<div style="text-align:center">
ways.</p>
</div>
Or
<p>Here is a <u>block of text</u> that <span style="backgroundcolor:yellow">we are going to style</span> in various ways.</p>
32
The div example would center align everything in the div block, and the span example
would highlight the text in the span section, in yellow.
There are other reasons to use one over the other, but most of the time this will be all
you really need to know about both tags. If you really want to dive into these two tags
in much greater depth, here's a resource for you:
http://webdesign.about.com/od/htmltags/a/aa011000a.htm
There are a whole lot of applications for these tags once you get more heavily into
styles, and we're going to talk about some of that next.
33
Adding Sound
34
ADVANCED
Dammit Jim I'm a
coder not a
designer!
Photoshop & Alternatives
No matter how much we may want to avoid mucking about with graphics, at some
point there's just no option. That image is the wrong size or color, or I only want part
of it, or I need to erase the text from it, etc. There are lots of programs for doing
these tasks and even some web-based applications as well. I'm going to discuss
Photoshop as well as point you to some alternatives if you want them.
There are a million different things that crop up in the daily work of any internet
marketer, and while it's great if you have a staff designer you can hand all these things
off to, quite often that's a waste of money. A lot of things I see people pay designers to
do, would only take them 5 minutes or less if they just knew one or two little tricks.
So… let's get tricky shall we?
Photoshop – scary
but not evil.
Of course you can't discuss digital graphic editing without mention of Photoshop, the
undisputed 8,000-pound gorilla, king of all graphics. In my former life as a video editor
and animator, I got pretty familiar with Photoshop on a daily basis. Even still, I had
barely scratched the surface of what it can do. But with all its features, there are only a
few that we marketers really need to understand or care about. Rather than turn this
into a book about Photoshop (goodness knows there are enough of those!) I'm going
to tell you the particular tools you'll find most useful, what their applications might be
to a marketer, and point you to an existing resource about it. So without further ado…
1. Image resizing. When we develop our sales & marketing pages,
quite often we'll pull graphics from all over the place, and they aren't
always at quite the right size for our needs. Simply resizing an image is
one of the most common things you'll need in the realm of graphics
(please remember to resize your source files down, rather than use
HTML to resize them on the fly!). Here's a handy tutorial on resizing
in Photoshop: http://www.youtube.com/watch?v=d-icsO5jK0I
2. Cloning. Who says cloning is illegal? Not in my world! It refers to
the art of taking part of an image and selectively "painting" it onto
another part. It's harder to describe than it is to show, but it has so
many applications like removing text from an existing image you want
to re-use, or painting people or objects out of a picture, etc. Once you
get good with the clone brush, it will be your secret weapon:
http://www.youtube.com/watch?v=WcJbN8CA49c (bonus link for
those with a somewhat dark or warped sense of humor like me…
http://www.youtube.com/watch?v=MWn0lxRNqos)
35
3. Text Effects. Quite often you'll want to have some text effects on
your page that you can't get with HTML itself. Creating the text as an
image instead of HTML is frequently the best possible solution:
http://www.youtube.com/watch?v=iPT5BGTM2-E
http://www.youtube.com/watch?v=fc0vRUErqh0
http://www.youtube.com/watch?v=itkHA27D2RE
In my book, those are the three most often needed tasks that you should be able to
handle yourself. For anything more sophisticated, go ahead and hand it off to a
designer, but most of the time these things should only take you a few minutes. Why
halt your work waiting for a designer to get you something tomorrow, when you can
have it done yourself right now?
New Kids on the
Block
Even though nearly every designer uses Photoshop, there are other options available at
lower costs, and even free. One that I've used because of its ability to open Photoshop
documents with layers, is paint.net (www.getpaint.net). It's free and works well, but it
Windows only.
Another alternative that many people like, is GIMP. I've never used it but know a lot
of people love it – www.gimp.org. Again it's free, open source, and available on
numerous platforms. There's also www.gimpshop.com for those who want a
Photoshop look-alike.
There are loads more… just google "photoshop alternative" and you'll have plenty of
links to follow.
36
HTML vs. PHP
What's the
Difference?
HTML and PHP are two very different things. They're different not only in terms of
code and syntax, but they are meant to accomplish two very different tasks.
Understanding when to use one vs. the other becomes very important when you're
trying to solve specific marketing challenges.
HTML (like JavaScript) is a "client side" technology. PHP is a "server side"
technology. This means that HTML executes itself on your visitor's computer in the
web browser, while PHP does all it magic on your actual server and merely sends
results back to the visitor – usually as HTML.
There are simply certain kinds of things you have to do on the server – things like
database access, managing SESSION variables (we'll discuss those later), handling form
POST data, and more. Other things can only happen in the client's browser, and so
HTML is needed for those. The real power and beauty of HTML and PHP however
is that they were designed from the beginning to work together seamlessly, and it's
using them in combination that allows for so much of the complex rich internet that
we're all used to today.
Putting it all
Together
Using PHP and HTML in the same document is extremely simple, but like everything
else we've discussed here, there is some syntax that must be carefully followed or
everything breaks down.
First, when the server delivers a page to the visitor, it scans through the page, which in
computer speak is called "parsing". While it parses the contents of the page, it looks
for instructions that tell it how to handle what it finds. By default it generally assumes
everything is just HTML and passes it to the browser to deal with (remember, HTML
is client side so the server doesn't do anything with it). But if it finds certain other
instructions, it will first execute those instructions before sending the content to the
browser.
Specifically we're talking about PHP here so that's what we'll be focusing on (there are
many other server side options but PHP is one of the most popular). The server needs
to be told when to begin parsing the content as PHP, and when to go back to treating
everything as HTML. That means PHP has its own set of opening and closing tags
just like everything we've discussed previously. Those tags are:
<?php ?>
So any time you want to start giving the server instructions in PHP, use <?php and
when you're done with PHP, use ?> to end it. Technically you can use <? To open a
PHP block, but some servers won't like that "short tag" and require the full <?php
opening tag. I just use the full tag all the time so as not to ever run into any issues.
37
Always remember to close your PHP blocks! This is critical because if you don't, your
script will definitely not behave properly and may or may not give you any indication of
what's wrong. Here is a sample of a proper PHP block:
<?php
// code goes here
?>
The two slashes are called a "comment" and they tell the server to ignore everything on
that line, that comes after them. Also you'll see later on that each line ends with a
semicolon. This is critical because the code will crash if any line (except for comments)
is not properly "terminated" with a semicolon.
PHP will also ignore all "whitespace" in the file, so it's possible to write the above in a
more condensed fashion like this:
<?php // code goes here ?>
However for readability when looking over my code, I prefer things to be nicely spaced
out and legible.
So if I were going to combine PHP and HTML in a single document, it might look
something like this:
<?php
// do something on the server
?>
<h1>My headline is here</h1>
<h2>This is my subheadline</h2>
<?php
// do something else on the server
?>
<p>Now here goes some paragraphs of text.</p>
<p>They could be anything.</p>
<?php
// do one final task on the server
?>
So as you can see, each PHP code block needed to be opened and then closed again
when it was done. But outside of the PHP blocks, I can just use plain ol' HTML like
any normal HTML document. This document however would need to be saved as a
".php" file, in order for the server to know what to do with it.
One thing to watch out for, is that you never nest PHP tags inside each other. For
example this will not work:
<?php
38
//some code
<?php // some other code ?>
?>
Take care to never place PHP tags inside of other open PHP tags
File Types
To a server, a file is just a file, but how the server interprets that file is generally defined
by the file extension, such as .php, .html, .gif, .jpg, etc. If you forget and call your new
PHP file "something.html" then you will see the raw PHP code (known as "source
code") in the browser, rather than the results of what that code was supposed to do. All
the HTML will still process correctly however.
What Can You Do
With It?
Don't forget also that this code is all processed and executed before the visitor even
received the page. This means you can actually deliver a different page depending on the
results of some PHP. Here are a few examples:
1. Geo-IP delivery (AKA geotargeting). You can serve different content
to the visitor, depending on the IP address they are coming from.
Could deliver content in another language for example, or tailor it for a
certain geographic region, etc.
2. Show ads to visiting guests but not to registered users.
3. Change the layout of the site in some way depending on what browser
the visitor is using.
4. Redirect visitors to another page depending on some factor, such as
their membership status at your site, their IP address, the link they
came to your site from, or many others.
The list could go on for quite a while but those are some of the more common
applications of this server-side capability. Of course actually doing any of this requires
a deeper understanding of PHP, which we're going to get into a little later.
39
JavaScript/AJAX Basics
Should I Avoid it?
A few years ago it was believed that you shouldn't use JavaScript unless absolutely
necessary, because so many people's browsers either didn't support it, or people had it
turned off in order to avoid advertising and some of the nastier malicious things on the
internet.
These days, it's my opinion that JavaScript has become almost as standard as the web
browser itself. Especially with the introduction of AJAX (Asynchronous JavaScript –
I'll mention it more shortly), entire websites are pretty much being built in JS these days
and I just plain never worry about whether or not people will be able to execute any JS
that I choose to use.
What Does JS Do?
So what exactly is JavaScript anyway? JS is what is known as a "client side" technology.
What that means is that it runs in the visitor's browser, and not on your server. This
means you have slightly less control over it since when it actually runs, you don't know
what browser, operating system, etc. the visitor will be using. But that doesn't mean it's
in any way underpowered. JS is capable of many extremely cool things.
In essence, anything your visitor can do with their mouse on your web page, can also
be executed automatically by some carefully crafted JS code. I'll touch on some
specific things later on in the advanced & blackhat sections of this guide, but for now
it's enough to just plant the idea in your mind. If your visitor can do it with the mouse, JS can
do it automatically. Keep that in mind.
One of the big advantages to JS is that, since it is downloaded as code and then
executed by your visitor's computer, it doesn't consume a large amount of bandwidth
to be downloaded. All the heavy lifting work happens by your visitor's computer. Of
course that means that if your visitor has a low powered computer and you send them
a huge JavaScript game or something like that, their browsing experience could suffer
tremendously.
It's way beyond the scope of this guide (and my expertise) to give you detailed tutorials
on coding JS from scratch, and in fact even just knowing enough to tweak small
aspects of existing JS code you might find, requires a lot of learning. For our purposes
as marketers, there are just a couple of points to consider about JS that are the most
important:
External JS
Much like stylesheets, JavaScript can be placed directly into your page "inline", and can
also be placed externally in its own file. There are reasons to do both, but I strongly
suggest moving your JS to an external file if it's a significant amount of code. This will
result in a smaller web page file for web crawlers to download, and they won't have to
40
wade through all that code to figure out what your keywords are, etc. Here is an
example of the proper syntax for including an external JS file:
<script src="http://www.yahoo.com/displaydate.js"></script>
This would load the "displaydate.js" file from yahoo.com, at which point you could
access any of the javascript functions contained in that file. Simply change the URL to
point to your own .js file, containing your javascript code, and you'll have removed all
that code from the body of your page.
If you really want to learn JavaScript in depth, I suggest googling "javascript tutorial" as
you'll find enough information to keep you busy for several lifetimes.
AJAX - Not Just
for Cleaning
Anymore!
In recent years, a new technology has risen to some serious visibility in the world of
JavaScript, and it's known as AJAX, or Asynchronous JavaScript. What this means to
you & me is that it's a method of using JS that allows for simultaneous communication
between the visitor's browser a remote server, without any interaction from the visitor.
This is a Very Big Deal in today's world of web applications!
Picture a stock price web page, that wants to constantly show the current market price
for any number of stocks. The "old school" approach would be to ask the visitor to
type in a stock symbol, click a button, and presto – updated stock prices. But what if
you want to "stream" the prices, and not require the user to click buttons to update
them? AJAX to the rescue.
Using AJAX, the visitor could visit the page, enter their stock symbol once, click a
button and… the prices would simply update live for as long as the visitor was on the
page. With no further interaction from them, they have what looks to them like a live
streaming stock feed.
In reality, the browser is actually submitting that same "button click" the user has to do
in the old approach, but it's doing so automatically in the background, hidden from
view, on a schedule that the programmer can decide. It could update every second,
every minute, or even every millisecond. The faster it updates, the more resources it
consumes on the visitor's computer, as well as bandwidth since every update reloads
the external content again.
This can be a great way to pull live updating news feeds into your page (assuming you
don't already have some sort of RSS feed display capability), or of live updating any
content you want from another page. I've used it to display a true live countdown of
the number of a certain item that were still available for purchase, for example, without
having to use a database to keep track of the sales.
41
Here are two approaches to using AJAX, if you're inclined to play with it yourself:
http://daniel.lorch.cc/docs/ajax_simple/
http://www.nodstrum.com/2007/02/27/ajaxcontentload/
42
Wordpress Theme Editing Basics
43
Understanding File Paths
Where Did I Put
That Thing?
One thing I see people get really hung up on all the time, is file paths. I used to be one
of them! It took me a while to wrap my head around internal vs. external, relative vs.
absolute… it's a bit of a nightmare at first! I'm going to hopefully clear it all up for you
right now.
First, the "path" of a file simply means "where is it located?" Think of it as the address
of a specific file. Just like it's not enough to tell someone you live in "The USA", it's
not enough to tell a computer that the file is "on your server". You have to be specific.
For example:
http://www.domain.com/folder/folder2/file.txt
This is a specific file path. It is 2 levels deep below the "web root" of that domain,
inside a directory called "folder2". The web root is the topmost level of a domain, that
is accessible from a web browser. It's called by many names such as "www",
"public_html", "httpdocs", "content", "web", and possibly others. If you're ever in
doubt about what your web root is, ask your server's support people.
It's easy to think of links on the internet as physical places, but they aren't. They are
just locations of files. And because computers are totally literal, you have to be
absolutely sure you tell them the right location when you ask them to fetch something.
This is complicated however by the concepts of relative and absolute paths.
It's All Relative.
Isn't It?
The previous example of a file path is what's known as an "absolute path". That is, it
absolutely positively points to the exact file you want. There is no room for guesswork
or misunderstanding. It's the internet equivalent to you giving someone your full
complete physical address right down to the room you're in now.
"Hi, my name is Jonathan and I'm located in the third room from the end
on the left at 123 Main St. unit #200, San Francisco CA 95123, USA."
That's how an absolute path would work for a human being. It's a bit long, but there is
absolutely no way to misunderstand it, or end up in the wrong location.
Relative paths however, are a different story. There is all kinds of room for error! So
why use them? They do have their place, but first let me give an illustration of a
relative path:
"Hi my name is Jonathan and I'm in the third room from the end on the
left."
44
Sounds simple, but if you have no idea where these directions are based from, the
chances of finding out which "third room from the end" I'm talking about, out of all the
possibilities in the world, are pretty much zero. A relative path looks like this in
HTML:
<img src="images/picture.jpg">
This tells the server "starting from the directory the visitor is currently in, look for a
directory called 'images' and load the file inside called 'picture.jpg'". And it will work
perfectly provided the file that is requesting it, is located in the correct place. For
example, picture this directory structure:
www.domain.com/
…index.html
…images/
………picture.jpg
…more/
………index.html
We have here a domain with two directories/folders inside, on called "images" and one
called "more". At the top level (web root AKA root) there is also a single file called
index.html (which will normally be loaded by default if no file is specified. This is why
you can just go to www.domain.com instead of having to go to
www.domain.com/index.html). Inside the more directory there is also a file called
index.html.
Now if the image tag above is placed inside the root index.html file, it will look for and
fine the images directory, and inside that it will find picture.jpg, and load it. Life is
good!
But what happens if we place that same tag inside the index.html file, located in the
"more" directory? When you visit www.domain.com/more/index.html the server will
look for an images directory, and not find one because it is looking relative to its current
location. Since it can't find what you're asking for, it displays an error message instead
(the default error code is 404, hence the concept of a "404 error" which simply means
– file not found).
Absolutely
Relative
So there is some danger in relative paths, but they're also extremely powerful! For
example, let's take the same structure as before:
www.domain.com/
…index.html
…images/
…more/
………index.html
45
And let's say we have everything set up exactly how we want it. But then one day we
decide we need a new domain name! After registering our cool new domain, we want
to move this site exactly as it was previously, to the new domain.
If we had used absolute paths everywhere, we would have to change every single path
to every file – javascripts, stylesheets, PHP files, links, everything – in every directory on
the entire site. On a large site, this can easily be thousands of files!
But if we had used relative paths, we could simply copy everything over and we'd be
done! The new structure would look like this:
www.ourcoolnewdomain.com/
…index.html
…images/
…more/
………index.html
Ta da! Change complete. This is because everything is still relatively the same. All the
files and directories still exist relative to each other just like they did on the other
domain. Only the domain name itself has moved.
It would be like taking your entire home – all the rooms, contents, everything – and
moving it into another building somewhere else, exactly as it currently is. Everything
stays the same… the doors, windows, furniture, everything is relatively the same, but
you're in a completely different location. Now a friend who has not visited your new
location would only need to know your new outside address (domain name) but once
they walked through the door, everything would be familiar.
There are other reasons to use relative paths as well, and they can get very powerful as
well as complicated (especially when we start talking about URL rewriting and virtual
paths! But don't worry we're not there yet). I only want to cover one more aspect of
relative paths before I move on.
Ups and Downs
Now that you know you can tell the server to look for something relative from where
the visitor is currently, what if the thing you want it to find exists above the current
directory? Going below is easy since you just tell it all the directories to look in and the
server will look there. But what about going up?
Fortunately this is pretty easy to handle. There is some additional syntax that you'll
encounter more and more as you get into relative paths. They are the "dot" and the
"double dot". Here are a couple of examples:
<img src="./images/picture.jpg">
<img src="../images/picture.jpg">
46
The single dot means start from the current location. Technically it's not needed, since
in this example it would be the same as our original example earlier. But the double
dot is different, and it means "start by going up one level". Beware that you never start
a relative path with a forward slash.
To illustrate, take this file structure:
www.domain.com/
…index.html
…images/
………jpgs/
………………picture.jpg
………………people/
………………………family/
………………………………index.html
…more/
………index.html
Here we have several additional directories in our "images" directory. We have
"picture.jpg" now located in the "jpgs" directory.
So if we were to visit www.domain.com/images/jpgs/people/family/index.html and
on that page we wanted to load the "picture.jpg" image, we would generally do one of
these two things:
<img src="../../jpgs/picture.jpg">
<img src="http://www.domain.com/images/jpg/picture.jpg">
The first approach is using a relative path. Since the "jpgs" directory is two levels up
from the location of family/index.html, we need to tell the server to go up two levels
to find picture.jpg.
We do this by using the double dot, twice ../../jpgs/picture.jpg.
The second approach is using an absolute path, and while this approach is easier for a
human to immediately see where the file is located, if the domain ever changed or the
"images" directory were moved, the path would need to be changed.
Innie or Outie?
Now we come to the issue of internal paths. To make things even more fun, both
types of path can be either relative or absolute on their own. Wheee!
An internal path is a path that is exclusive to the server itself. It points only to files that
are located on that specific server (note that this could include files on other domains,
but the same server, depending on your hosting configuration).
An external path refers to a location that is outside of the server itself, usually a URL to
some location on the web.
47
Here are two examples:
/home/user/public_html/images/picture.jpg
http://www.domain.com/images/picture.jpg
The first example is an absolute internal path. It starts at the highest level of the server
(which varies depending on your server by the way, but this is a common example) and
will always start with a forward slash. The second example is probably pretty familiar
to you, and is an absolute external path, also known as a URL.
So what might a relative internal path look like? Glad you asked!
Assuming that the requesting file (meaning our visitor's location most likely) is at
www.domain.com/images/index.html - our relative internal path to a file in the "user"
directory (notice that it's located outside the web root, which in this example is
public_html) would be:
../../somefile.txt
Looks pretty much the same as our first relative path example doesn't it? Well it is in
fact the same, but with one very critical difference.
Internal paths can actually reach above the domain's web root if your server is
configured to allow it (security restrictions will vary and impact this). This means that
if your server allows it, you can actually store certain files – namely sensitive documents
oar anything you wouldn't want anyone to ever stumble onto on the web (including a
search engine) – above the web root where only your own scripts can access them.
This is the only surefire way to guarantee that a file is never, ever indexed by a search
engine or found by accident by a human being.
If you're on an inexpensive "shared hosting" or "reseller" account, most likely they
have security set such that you can't access anything outside the web root. But if you
have a VPS or dedicated server, you should definitely be able to do this.
Hopefully your brain isn't seizing up too badly from all that path talk. It's important
stuff though and when you get into some of the advanced scripting tactics I'm going to
talk about, knowing your paths can prove to make or break what you're trying to do!
48
PHP Variables & Arrays
So Many Choices,
So Little Time!
One of the most fundamental things you will use again and again in PHP, is the
variable. As its name states, it can be anything – it is literally variable! It is simply a
label, which we can use to "contain" other information that we'll use later. Most of us
probably had to endure some algebra lessons at some point, and that may have been
our first official introduction to variables. Here's a classic example:
A + B = C
We have 3 variables in this example, A, B, and C. We know instantly that they each
represent something, but we have no idea what. In math class they would have us
"solve for the variable" in order to determine their values, but in programming we get
to simply decide what they represent, and go from there.
Here's a mock-code (also called pseudocode) example of a simple math problem:
A = 2
B = 4
A + B = 6
What we've done here, is define two variables, and add them together to get a result.
That's neat an all, but we can get a little fancier and do something like this:
A = 2
B = 4
A + B = C
See what we did? We have actually defined a third variable, to contain the result of
adding our first two variables together! This way, to change the result of C, we just
have to change A or B and C will automatically be changed, because it will always equal
the result of A + B.
Still with me? I know I know, nobody said this was going to include a math lesson…
and believe me you're getting it from a guy who flunked out of Algebra 2! But this
stuff is absolutely critical to even basic PHP scripting, so it's important that you get
some fundamentals.
Let's start showing you some code and hopefully it will start to come together,
especially when you get to hear me echo! (echo… echo… echo…)
Hello… Is There
Anybody In There?
One of the most common PHP commands (called functions) you're going to find
yourself using, is the echo function. It has a nearly identical twin called print. For our
purposes they are interchangeable, but I like echo.
49
All it does, is display something to the screen. No fuss, no muss, just print something
to the screen. Here is probably the most classic beginner's code ever:
<?php
echo "Hello World!";
?>
If you were to save this as a file ending in .php and open it with a web browser running
on a PHP enabled webserver, you would simply see the text "Hello World!" That's all
this code does, it just "echoes" one line of text to the browser.
Now let's add a variable to the mix shall we? Variables in PHP always start with a
dollar sign, and cannot be followed immediately by a number. Other than that you can
use any alphanumeric character for their names, as well as underscores and hyphens
(dashes).
<?php
$variable = "Hello World!";
echo $variable;
?>
Guess what this does? Yep, the exact same thing! The difference is, we have stored
our text into a variable first, which would allow us to re-use that text in other parts of
our script if we wanted to.
We can also perform our math problem from earlier, like this:
<?php
$a = 2;
$b = 4;
$a + $b = $c;
echo $c;
?>
This will simply display the number 6. Note the syntax of the final math operation.
This will not work:
$c = $a + $b;
You always have to have the individual elements first, and their result at the end.
Indentation
You've probably noticed that code is usually written in a certain style, with different
sections indented, or spaced, in certain ways. I've had people tell me they thought
there was something special or important about the way different lines are indented,
but the truth is it's just a personal preference to keep things readable for the code
writer.
50
For example, a more "proper" way to write our earlier stylesheet example, would be
more like this:
p {
font-weight:bold;
font-style:italic;
}
</style>
Notice how the <style> tag opens the code block, and then any code within the tags is
intended by one "tab". And then the paragraph tag has its own sub-block between the
curly braces, which gets indented again by one "tab". It could be a space, a tab, several
spaces, etc. The fact is that the server will just ignore whitespace anyway, so it doesn't
actually matter. Proper indentation however does make it easier on us humans, when
we're trying to see where one code block begins or ends, or figure out where we are
missing a closing tag, etc.
As you start getting into more complex HTML, JavvaScript, or PHP, proper
indentation will make your life a whole lot easier so I strongly suggest you form some
good indentation habits now. If you ever find yourself needing to clean up someone
else's code (or your own where you were sloppy!), there are programs that will try to fix
it all for you after the fact. They're often not perfect, but they can sometimes save the
day! Here's one I've used quite a bit:
http://jsbeautifier.org/
Now getting back to variables, let's talk about groups of variables, Also Known As
"arrays"!
Just a Bunch of
Stuff
So you probably have heard of arrays, and might even have thought they were
something really complicated. But in actuality they're a very simple thing to
understand. In fact I'm certain you already deal with them just about every day of your
life.
What does the word "array" mean? It means a range… a selection… a "bunch" of
things. If you go to the store, you might see an array of brands of coffee. Or an array
of vegetables to choose from. That's quite literally all an array is in programming – it's
a whole bunch of stuff, and you get to decide what that stuff is and where it's stored.
Think of an array as a bucket, and you get to put things in the bucket and give each one
a label attached to it. When you look through the bucket to pull something out, you
can look at the label on each thing to see what it is, and decide if it's what you want or
not.
51
In the computer world, an array also knows what order things were added to it, and
you can easily pull back out the first thing you placed in the array, or the last thing, with
some specific commands. You can also do things like randomize the array (imagine
putting stuff in the bucket and then shaking it all up), or sort it by various criteria,
count how many items are in the array, and so much more.
Arrays are going to be one of the most powerful things you'll learn, because they'll lead
us to working with loops, which you'll soon find out are going to be used a lot. They
are at their heart just another variable, and so their syntax is identical to the variables
we've already worked with. However they contain more than one item, and so have to
be worked with a little differently. Personally I've gotten in the habit of naming my
arrays in a certain way so I can always tell at a glance, what's an array and what's a
simple variable. Here's how I do it:
$variable
$_array
So you can see I put an underscore at the front of my array names. I actually got this
convention from PHP itself, as it has some built in arrays that we'll discuss soon, and
that's how they are named. It just makes my life easier when looking through my code
later, to tell what's an array and what isn't.
To work with arrays, you have to put something in them. Your bucket starts out
empty and so isn't very useful without anything in it. Here's how you might put a
series of words into an array:
$_array = array('blue', 'red', 'green');
Now we have an array called $_array, that contains the names of three colors. Note
the syntax – the array must first be identified as such with the word "array", and then
the items you're putting into the array should be contained between parenthesis, each
one in single or double quotes if it's text (no quotes required if you're storing strictly
numbers), and as I mentioned previously, every line of PHP must end (or "terminate")
with a semicolon.
That's great if you know ahead of time what you want to put into the array, but what if
you want to add something to an array, as you move through your script? Here's
another way to add a single item to an array:
$_array[] = 'orange';
By putting the open and close square brace (don't confuse these with the curly braces!)
after the name of the array, and using an equals sign to assign something to it, we're
adding a single item to the next available slot in the array – in this case the word (or
"string") "orange".
52
Variable variables
It's actually possible to store variables inside an array as well – variables within a
variable. There are lots of reasons you may want to do this as you work with PHP, as
storing a whole bunch of related variables in one place can be very useful in organizing
your data. Here's an example of adding a variable value to an array:
$variable = 'fruit';
$_array[] = $variable;
What we end up with after this, is the string "fruit" contained in our array called
$_array. Notice that when working with a variable like this, we don't need to place it
in single or double quotes, but we do when working with the string "fruit".
By the way, I don't want to leave you thinking that arrays must be called "array" or
variables must be called "variable". You can name them anything you want… for
example:
$fruit = 'apple';
$_colors = array('blue', 'red', 'green');
It will usually make things much easier for you if you use descriptive names.
Global Variables
PHP has a few built in variables of its own, that will always be there and contain some
extremely useful information. Their names are reserved, which means you can't name a
variable of your own with the same names. The three built in variables we will use the
most are:
$_GET
$_POST
$_SERVER
$_REQUEST
Note that these are all in uppercase letters. These variables are case sensitive, and are
known as "global" variables that will always contain information that will be available
to you at any point in any script. All three of them are also arrays, so they each can
contain a number of different elements. Here's a basic description of each:
– the "GET" array contains all the information contained in the URL "query
string". The query string is the stuff after the question mark, in a URL such as
www.domain.com/page.php?var1=blue&var2=red&var3=large
$_GET
– the "POST" array is actually very similar to the GET array in most respects,
but is mostly associated with that were submitted using the POST method. You'll deal
with POST when we get into creating and submitting form data.
$_POST
– the "SERVER" array contains, as you might expect, information about the
server. It has a whole bunch of data in it including the referring URL of the current
$_SERVER
53
visitor, their IP address, and various other information about the visitor and server.
You'll end up mostly using only a couple of the items from this array in your day to day
work.
$_REQUEST – The "REQUEST" array is supposed to hold the contents of both the GET
and POST arrays. In practice though I have found that it doesn't always work as
expected, and I suggest not using it unless you're certain you actually need to. In most
cases POST or GET is going to be more appropriate for your needs anyway.
54
GET vs. POST
Passing Data
Often times we will find ourselves wanting to pass information from one page, to
another. Probably the most common scenario for this, is when a visitor fills out a
form. They provide us some information (like an email address for example), and we
will want to send it somewhere, for some reason. There are two primary ways of doing
this, and both have advantages and disadvantages. Let's examine the differences by
starting off with two nearly identical HTML forms (built using tables with a few extra
bells & whistles!):
Form 1.
<form action='http://www.domain.com/page.php' method='GET'>
<table>
<tr><td align='right'><b>Name</b></td><td><input type='text'
name='name' value=''></td></tr>
<tr><td align='right'><b>Email</b></td><td><input
type='text' name='email' value=''></td></tr>
<tr><td align='center' colspan=2><input type='submit'
value='Submit' name='Submit' /></td></tr>
</table>
</form>
Form 2.
<form action='http://www.domain.com/page.php' method='POST'>
<table>
<tr><td align='right'><b>Name</b></td><td><input type='text'
name='name' value=''></td></tr>
<tr><td align='right'><b>Email</b></td><td><input
type='text' name='email' value=''></td></tr>
<tr><td align='center' colspan=2><input type='submit'
value='Submit' name='Submit' /></td></tr>
</table>
</form>
Spot the difference? They are identical except for the "method" chosen on the first
line. One uses GET and one uses POST. Both forms will accomplish the exact same
thing, but will do it in different ways.
Form 1 uses the "GET method" to pass the information submitted, to another page.
The "action" parameter defines where the information is to be submitted when the
visitor presses the "submit" button defined later in the form. Then that page (a PHP
script in our example) can do something with the information. Since we're using the
GET method, it means that the information will be transmitted by way of a query string,
appended to the destination URL defined by the "action". The final URL might look
like this:
http://www.domain.com/page.php?name=Bob&[email protected]
55
Now how did I know that's how it would look? I'll discuss that in more detail in the
next section, for right this moment either look at the form to figure it out, or wait just a
little while longer for the answer.
The key thing to know here is that the two pieces of information our form asked for –
the visitor's name and email address – have been passed on to our "page.php" script,
which could be located on any domain we like, on any server.
Now for Form 2. It uses the "POST method". It will actually result in the same end
result, of our information being passed to the "page.php" script. But it will do so
"invisibly", without adding anything to the destination URL. The script we send it to,
is simply set up to "listen" for that information, and our form page will quietly transmit
the information to the other page, and nobody will be the wiser.
Both of these methods are very useful, but they both have drawbacks and benefits.
The GET method shows the visitor exactly what information is being transmitted,
since it's all appended right there in the URL for all to see. But on the positive side,
that final URL is able to be bookmarked so if instead of an opt-in form, those values
specified some information the visitor wanted to submit on other occasions, he could
simply bookmark the URL and open it again any other time.
The POST method however, is invisible to the casual observer. It sends the data
behind the scenes and the visitor will not know what information is being transmitted
– if they even realize anything is being transmitted. The downside however is that the
final URL cannot be bookmarked, because future visits to our "page.php" script,
would be missing the submitted information, and the script would typically fail to
execute properly.
There are other technical differences and issues with each approach, but for our
marketing purposes this is pretty much all we need to know about the two methods.
GET submits data in the URL, POST submits it invisibly.
56
Query Strings
"What's a Query?"
Yes, it is.
We're going to be dealing with this subject an awful lot in our marketing, so I want to
cover it in some detail. First let's start off with a definition.
What does the word "query" mean?
The simplest answer is – it means "question". So we can think of a "query string" as a
"question string" – a series of questions we're going to be providing answers to, in our
URL.
In English and many other modern written languages, how does one indicate a
question? I just did it right there – with a question mark! In some languages (Spanish
notably) it is normal to begin and end a questioning sentence with the question mark
punctuation, and that's how we will start our query string in PHP.
The query string always goes at the end of the URL, after you specify the particular
page you want to submit the information to. Here's our earlier example:
http://www.domain.com/page.php?name=Bob&[email protected]
So the query string in this example, is:
?name=Bob&[email protected]
This query string contains two "questions":
1. What is the visitor's name?
2. What is the visitor's email?
The visitor provided the answers to these questions, and we are passing both the
question and its answer, to our "page.php" script for it to process.
Now when you ask someone multiple questions at once, how do you normally do so?
You use "and" to string the questions together:
"What is your name and email address?"
We do the exact same thing in our query string, and we use an ampersand symbol (&) in
place of the English "and":
?name=Bob&[email protected]
So to translate the above into literal English, we would have:
57
Question, name is Bob and email is [email protected]
We can ask lots of questions in our query string and just keep putting them together
with more & symbols, such as:
?name=Bob&[email protected]&phone=555-1212&age=45&eyes=blue
If this query string had been created by a form, then each of these "questions" would
have been a field in the form, for the visitor to fill out.
Technically, the "questions" are called keys and the "answers" are called values. So
"name" would be a key, and "Bob" would be a value. You will see these in coder
forums being called "key/value pairs", but most of us marketers just refer to them as
sub-ids. It's good to know the proper names should you find yourself communicating
with a non-marketer who is doing coding work for you.
Sub-ids are vitally important in today's interactive web, because they are an easy way of
passing information from one page to another, and then doing something with that
information. They are an integral component of the GET method we discussed
earlier. Since they are passed directly in the URL they are automatically using GET.
This means that everything included in a query string, is available to us in PHP without
having to do anything special, and this opens up an entire universe of possibilities.
58
Applied Query Strings & Logic
Mr. Spock was a
Programmer
Logic (the ability to make decisions based on some incoming information) is the
cornerstone of programming, and you're going to use it a lot in PHP, even with just
simple marketing pages. Ever want to display different content to someone depending
on where they're from? You'll need logic to do that. Want to display ads based on the
site the visitor came from? Logic will save the day. Need to track certain visitors to see
what they do on certain pages? Logic! Any time you find yourself wanting to do
anything that is dependent on some other information, that's logic at work.
Let's start off with a simple practical use for logic in your marketing pages – protecting
them from prying eyes.
Protecting Pages
with Query Strings
Quite often when working on web pages, you are working on something you don't yet
want anyone else to see. Works in progress, incomplete code, sensitive data… there
are lots of reasons you want to restrict access to a particular page. There are numerous
"proper" ways to do this – htaccess, passwords, session validation, and more – but
there is also a "quick & dirty" approach that I use quite often. As you'll soon see, it's
far from truly secure, but it's good enough while I'm working on something, to keep
anyone from accidentally (or intentionally) stumbling onto the page.
Put simply, I tell the page to look for a specific sub-id value. If it's not found, it refuses
to display the page. This involves just a couple of lines of code, and our first venture
into using logical operators with PHP. If that sounds scary don't worry, you're already
familiar with logical operators I promise you.
I'll start by showing you the code I use, with comments, then I'll walk you through it.
if($_GET['p'] != 'mypassword') // If the 'p' subid does not equal
'mypassword'…
{
exit('unauthorized'); // …then stop and display 'unauthorized'
}
You can probably already tell what this does just from the comments, but I'll go over it
in detail anyway.
Any logic block needs to start with the most basic of all logical operators – "if". We
use this every day in our normal course of living, making decisions based on various
criteria in the world around us. PHP can do the same thing, and in this case we're
asking it to do something if another condition has been met.
Following the "if", needs to be a set of parenthesis. Within these, we define what
condition we are evaluating. In this case, we want to look at the incoming subid called
"p" and see what it contains. If it is "not equal to" (the exclamation point means "not"
59
in PHP and is also referred to as a "bang") a word of our choosing ("mypassword" in
this example", then something else happens.
Now if our condition has been met, and the "p" subid does not equal "mypassword",
the page should stop loading completely and display a message of our choice. Of
course it could also display nothing and just leave the visitor with a blank page. Often I
would rather do that, than tell the person that there is security in place and suggest that
they keep trying.
There is another approach to this which I'll cover right now but once I do, I think
you'll see why I do it the first way.
Rather than exiting if a condition is not equal to something, we could instead display the
page content if the condition is equal to something instead. This is probably the
approach that makes the most sense the first time you're presented with something like
this, after all we're slightly more used to thinking in terms of "if this is true, do that"
rather than "if this is not true, don't do that". Here's the other approach:
if($_GET['p'] == 'mypassword') // If the 'p' subid equals 'mypassword'…
{
// …then do whatever the page is supposed to do
}else{ // …otherwise…
exit('unauthorized'); // … stop and display 'unauthorized'
}
Requires a bit more code doesn't it? This approach does however introduce us to
another critical component of logical functions, the "else" operator.
Also notice that I used two equals signs to evaluate the contents of the 'p' subid, not
one. This is very important. In PHP and many other languages, a single equals sign
means "set equal to" and actually changes the value of something, but two equals signs
means "is equal to", and is for making a comparison. It's a very simple and common
mistake, to use a single equals sign when you meant to use two, I make that mistake
quite regularly. Always remember that if you're checking to see if something is equal to
something else, you need to use two equals signs.
Do It… or Else!
I'm sure we've all seen in movies or TV shows, or even experienced in real life, the
threat of doing something "or else…" And of course the jokers amongst us would say
"oh yeah? Or else what?" Knowing the answer to this question is going to be vital to
our code running properly and doing what we want, as well as giving us a lot of
flexibility in what we can do!
The most basic building block of logic in programming is probably what's known as an
"if/then/else" block, and that's exactly what we're dealing with in the last example. We
have a single condition we are checking (the "if"), then a single action to take should
60
that condition be met (the "then"), followed by what to do if the condition is not met
(the "else"). But it doesn't stop there, and we can get fairly fancy and have multiple
possible evaluations.
Take this example in plain English:
If the shoe fits, then if it's blue and suede, wear it. Otherwise if
it's leather, set it aside, and finally if it's red and suede, give it to
me, otherwise donate it to charity.
This is a bit awkward to write and see in print, but it's an example of the sort of
complex multi-conditional logic we all employ in life every day. Here's how I might
write this example in PHP:
if($shoe_fits == true)
{
if($shoe_color == 'blue' and $shoe_material == 'suede')
{
// wear it
}elseif($shoe_material == 'leather')
{
// set it aside
}elseif($shoe_color == 'red' and $shoe_material == 'suede')
{
// give it to me
}else{
// donate it to charity
}
}
This is the most literal way to write it, based on my English example. But it's not the
only way, and perhaps not the most organized or efficient way. Consider this instead:
{
if($shoe_material == 'suede')
{
if($shoe_color == 'blue')
{
// wear it
exit;
}elseif($shoe_color == 'red')
// give it to me
exit;
}
}elseif($shoe_material == 'leather')
{
// set it aside
exit;
}
}
// donate it to charity
61
Here we have an example of nested ifs, something you will encounter quite often in
scripts. They are a better way to organize logical analysis, for all sorts of reasons. This
second example would be written a bit different from the first, in plain English:
If the shoe fits, then if the material is suede, then if it's blue wear
it and stop. If it's red give it to me and stop. If the material is
leather set it aside and stop. Under any other condition, donate it to
charity.
With this approach, it's important that each decision section end with an exit;
command, otherwise the script would continue and reach the // donate it to
charity section even though another action had already been taken.
You probably also noticed in the first example that I use a new concept – "and". This
can come in very handy but is not always necessary, as you can see in the second
example where it's not used at all. In theory it's better to require the server to perform
as few decisions as possible, to reach a conclusion about something. In practice
however, you generally won't even be able to notice the speed difference in using
slightly less efficient code. Ultimately whatever gets the result you're looking for, is the
way to do it. Getting comfortable with the logical way a computer has to "think" takes
some time, but eventually will become second nature.
Shorthand
There are multiple ways to write certain things in PHP, and it's mostly a style
preference as to which approach you use. For example there are two decision
functions you'll use a lot – "and" and "or" – but there are two ways to write them:
if($shoe_color = 'blue' and $shoe_material = 'suede')
is the same as:
if($shoe_color = 'blue' && $shoe_material = 'suede')
Also:
if($shoe_color = 'blue' or $shoe_material = 'suede')
is the same as:
if($shoe_color = 'blue' || $shoe_material = 'suede')
The vertical lines in the final example are called "pipes" and on my keyboard is created
by typing "SHIFT-\" (without the quotes of course). Over time I've gravitated
towards the symbolic versions rather than the plain English versions, but in the
beginning I found the English versions easier for me to understand when I was coding.
It's really up to you what you prefer.
62
String Isn't Just for
Cats
Another very important concept, and one that can sometimes be a little hard to fully
grasp, is understanding strings – what exactly they are, and when to use them.
A string simply refers to any literal set of characters, and typically will need to be
enclosed in quotes to be used. For example, in the previous logic examples I checked
to see if certain variables contained a specific word, such as:
if($shoe_material == 'suede')
In this example, "suede" is a string, and you can see that because it's enclosed in single
quotes (could also use double quotes if desired). So the comparison being made, is
against that specific exact string of characters.
On the other hand, look at this example:
Notice that "true" is not in quotes at all. This is because true or false are not strings,
they are known as "booleans" and can also be represented by a 1 or a zero. So in most
cases, these two lines would behave identically:
if($shoe_fits == 1)
because to a computer that thinks in binary (0s and 1s), a 1 represents "true". But don't
make this mistake:
if($shoe_fits == "true")
This would check to see if the variable $shoe_fits actually equals the text (string)
"true", which it would not in this case. Just remember to only put things in quotes like
this, if you literally want to refer to the characters contained there. If you mean to see
if something is true or false, either use the Booleans, or stick to the numbers 1 or 0.
Tracking with SubIDs
Probably the single most common place a marketer is going to encounter query strings,
is with affiliate links. Sub-ID tracking is still the most common way for an affiliate
network to identify who sent a particular click or visitor, and credit the correct affiliate
with a sale, lead, etc. And when you're direct linking it's pretty easy to see how it
works:
http://www.affiliatenetwork.com?a=123&b=xyz&c=ghi&subid=
Here's a fictitious but very typical affiliate link. All you as an affiliate need to do, is put
whatever you want after "subid=" and that information will be recorded in your stats
for you to see. Normally we insert a specific keyword there, or maybe a traffic source,
such as:
63
http://www.affiliatenetwork.com?a=123&b=xyz&c=ghi&subid=adwords
This way you would know that any revenue in your reports that listed "adwords" as its
sub-ID, came through that link.
But what if you want to use your own landing page first, rather than direct linking?
This is where being able to capture and pass query string data around, becomes so vital.
In my experience, most marketers – especially affiliates – don't really understand how
this works, and those that do are in the upper few percent of affiliates. It's well worth
your while to understand this thoroughly!
Let's say I have a landing page containing an affiliate link, located here:
http://www.mydomain.com/landingpage.html
Now I would like to pass a sub-ID to that page, then pass that value through to the
affiliate link on the page, so that it tracks to my affiliate network.
The very first thing to note, is that we can't do it at all right now. This is because the
page in question is an actual physical file, that ends in .html. In order to put PHP code
in the page, it needs to be a PHP file, so we need to change the name of the file to .php
instead of .html, so that the URL becomes this:
http://www.mydomain.com/landingpage.php
This assumes of course that your web server supports PHP, which almost any host
these days should by default.
Now that the page is PHP, we are free to add PHP code to it any way we want.
Remember, HTML and PHP were designed to play nicely together, so everything you
previously had on the HTML version of the page – HTML, JavaScript, CSS, etc. – will
still work just fine.
First we need to decide what sub-ID we will pass to the page. Let's say we want to
pass a keyword… we might go with this:
http://www.mydomain.com/landingpage.php?keyword=
Now we are passing a sub-ID called "keyword" that should contain the specific
keyword we want to track. Usually we'll get that keyword from the traffic network
we're using, through a dynamic token. This is usually referred to as Dynamic Keyword
Insertion and might look like this if you're using Google Adwords:
http://www.mydomain.com/landingpage.php?keyword={keyword}
64
At the time your traffic is sent by Google, {keyword} will be replaced by whatever the
keyword was, that triggered that particular ad.
So we're sending the keyword to the page, but we now have to somehow insert it into
the affiliate link on our page. Let's say that link, with our network sub-ID attached,
looks like this:
http://www.affiliatenetwork.com?a=123&b=xyz&c=ghi&subid=
We just need to append our "keyword" sub-ID, to the end of that link, and it will be
passed along to the affiliate network like magic and show up in our reports.
To do this, we turn to our friend the $_GET array! Remember from earlier that any
values contained in a query string are automatically stored in an array called $_GET.
This makes it very easy for us to grab the incoming keyword and append it. There are
numerous ways to do this, but this is probably the most familiar:
http://www.affiliatenetwork.com?a=123&b=xyz&c=ghi&subid=<?php echo $_GET['keyword']; ?>
(I had to reduce the font considerably to get it to fit on one line)
We are simply telling PHP to print, or echo, the sub-ID "keyword" that is contained in
the array called $_GET. Now, whatever value we put in our "keyword" sub-ID when
sending traffic to our landing page, will automatically be sent through the affiliate link,
and to the network.
Here's a shorthand version that accomplishes the same thing:
http://www.affiliatenetwork.com?a=123&b=xyz&c=ghi&subid=<?=$_GET['keyword']?>
Any time you want to echo any variable and that's all, you can simply type it as
<?=$variable?> and it will do the same thing as the longer "echo" version.
65
Geotargeting
I Found Waldo!
The concept of geotargeting is fairly straight forward – figure out where your visitor is
from based on their IP address, and show them something specifically tailored towards
them. For example you could have your site use different graphics for visitors of
certain countries, or certain color schemes, etc. Or probably the most common use in
marketing – show them a greeting or special that feels like it was tailor made just for
them. "Discount today only for visitors from Seattle, WA!" The truth is, once you
know how to determine where your visitor is, you can do pretty much whatever you
want with that information.
But first, there are some limitations you should be aware of. The biggest of which is
that you don't actually get to know the location of the visitor, you know the location of
their internet connection, which is generally a hub or router nearby. In some case
though it can be quite far away. In my case, whenever a site tries to geotarget me, they
end up thinking I'm in a city roughly 40 minutes away! Apparently that's where the
router my ISP uses to connect me to the internet, is located. Just keep in mind that
using the IP to pull an address is an approximation at best.
The next limitation is if your visitors are using proxies. I'll discuss proxy servers in
more detail later, but for now just know that in some cases your traffic might be
routing through an intermediary, in which case you'll get the location of the proxy,
rather than the actual visitor.
Finally, geotargeting is only as good as the data you have available to you. If the list of
IPs and locations you're using is incorrect, then your final results will be as well. This is
why it's good to use a service that keeps this data up to date for you, and I'm going to
discuss one very popular one now – Maxmind.
If you're feeling adventurous you can head to their website at www.maxmind.com and
follow the instructions from there, or you can just continue reading and I'll give you the
shortcut version.
First, you need Maxmind's database. It's conveniently provided in what's known as a
"flat file database" meaning it's just a file that lives on your server, instead of having to
mess with MySQL and setting up database access.
Download page is here:
http://www.maxmind.com/app/geolitecity
The specific file you need is here:
http://geolite.maxmind.com/download/geoip/database/GeoLiteCity.dat.gz
66
Installation instructions from Maxmind are here:
http://www.maxmind.com/app/installation?city=1
Frankly they will probably confuse more than help most people. Here's all you need to
know:
The database is in a "compressed" format, meaning it has to be "uncompressed"
before it can be used. You have to choices for doing this…
1. Upload it to your server as-is, and then use CPanel's File Manager (or whatever
File Manager your host control panel has if possible) to "unzip" it right there
on the server.
2. Unzip it on your own computer, and then upload that file to your server
wherever you want it to live.
Option #1 is by far the faster method, since this is a pretty big file. Either will work
fine though.
Next you need to download a couple of required files:
http://geolite.maxmind.com/download/geoip/api/php/geoipcity.inc
http://geolite.maxmind.com/download/geoip/api/php/geoipregionvars.php
These should be uploaded to the same location on your server, for example wherever
you chose to put the Maxmind database. You can use the "Save As…" feature of your
browser, to save these files to your computer.
Now for the fun bit… the actual code that does the magic! Here is the code you can
use to start with:
67
<?php
// This code demonstrates how to lookup the country, region, city,
// postal code, latitude, and longitude by IP Address.
// It is designed to work with GeoIP/GeoLite City
include("geoipcity.inc");
include("geoipregionvars.php");
$db_path = "/usr/local/share/GeoIP/GeoIPCity.dat"; // CHANGE AS NEEDED
$gi = geoip_open($db_path, GEOIP_STANDARD);
$record = geoip_record_by_addr($gi,$_SERVER['REMOTE_ADDR']);
echo $record->country_code." ".$record->country_code3." ".$record->country_name."<br>";
echo $record->region." ".$GEOIP_REGION_NAME[$record->country_code][$record->region]."<br>";
echo
echo
echo
echo
echo
echo
$record->city."<br>";
$record->postal_code."<br>";
$record->latitude."<br>";
$record->longitude."<br>";
$record->metro_code."<br>";
$record->area_code."<br>";
geoip_close($gi);
?>
Take this code and place it into a new file called for example "geoip.php" and upload
that to your server.
There are a couple of critical modifications you'll need to make to this script to ensure
it works correctly for you. Specifically, you need to tell it where several components it
needs, are located:
include("geoipcity.inc");
include("geoipregionvars.php");
If these two files are located in the same place as the page your visitors will be landing
on, then you don't have to change anything. If they're located somewhere else
however, you'll need to change them for example like this:
include("../maxmind_files/geoipcity.inc");
include("../maxmind_files/geoipregionvars.php");
Hopefully by now you understand paths enough to handle this.
68
Speaking of paths, there's one more to change:
$db_path = "/usr/local/share/GeoIP/GeoIPCity.dat"; // CHANGE AS NEEDED
This should be the absolute path to your GeoIPCity.dat file, which is the actual Maxmind
database itself. You'll need to be able to figure out what this is since there's no way for
me to know it. Edit the path in that line of code and save the file back to your server.
Now that you've hopefully got everything set up correctly, try loading this page in your
browser, for example:
www.yourdomain.com/geoip.php
If all went well, you should see some information display. It's quite possible it will be
incomplete, for example postal codes and area codes may not be available for every city
in every country, but you will hopefully see some information returned.
You can see from the script where the information is stored, and how to retrieve it:
echo $record->country_code." ".$record->country_code3." ".$record->country_name."<br>";
echo $record->region." ".$GEOIP_REGION_NAME[$record->country_code][$record->region]."<br>";
echo
echo
echo
echo
echo
echo
$record->city."<br>";
$record->postal_code."<br>";
$record->latitude."<br>";
$record->longitude."<br>";
$record->metro_code."<br>";
$record->area_code."<br>";
This is a bit more complex than what you've been exposed to before, but if you just
study the syntax and compare it to the results in your browser, you should be able to
understand what part is doing what.
I usually like to store the parts I plan to use often, in a simple variable to make my life
easier… like this:
$city = $record->city;
$country = $record->country_name;
This just makes it so I have less to remember and type when I want to use the city or
country in my page somewhere.
69
SESSION Variables
70
Function Basics
71
Logic & Loops
72
Web Scraping
If You Build It,
They Will Scrape
Web Scraping (AKA Screen Scraping) is a fact of life on the internet. It refers to the
practice of taking data from another website by “brute force” – acting like a browser
and taking what the browser would normally get. This is as opposed to using an API
(Application Programming Interface), where the target site has actually created a special
set of code for people to use, to get information from the site. When an API is
available, it tells developers “go ahead and access us, and here is the set of information
we will give you at your request.” But quite often, we marketers want to obtain and use
information that is on a web site, but is not made readily available for us to use. This is
one of those areas of the web that gets tricky too, because on the one hand it can be
argued that anything published online is now public for all to use because the internet
is “free” by its very nature, but on the other hand content creators have certain rights
(depending on their country of course) and one of those rights is to protect their
content from unauthorized use.
I’m not going to get into the legal or ethical ramifications of scraping, I’m just going to
show you how it’s done and give some examples of ways to use it. From there, you’re
on your own…
Content Magic
I can say with almost absolute certainty that at some point, you have put an article on
the web. Maybe you wrote it, maybe you got it from a directory like ezinearticles.com.
Or maybe… just maybe… you scraped it.
When content is scraped, it is made available to the web page developer to do with it
whatever he/she wishes. It can be repurposed exactly as it was originally found, or it
can be altered in any of an infinite number of ways. Some of the more common
reasons people modify scraped articles in particular are:

To change the formatting of the article to better fit their site.

To remove the author’s bio information.

To insert advertisements into the article.

To serve as the basis for other articles by “spinning” variations of the article
text.

To mass distribute the article after inserting various links into it.
Since article directories have become so common, they are usually the first place to
look at for scraping content. If you just need a couple of articles, its probably a lot
simpler to just go to the directory and copy the article to be used, just as the directories
intend. But what if you have a dynamic site, maybe created with something like
LPGen for example, and you want to automatically have articles pulled in for any given
73
keyword? You need a web scraper. The specifics of building an article directory
scraper aren’t what I’m after here, I just want to show what’s possible, how easy it
actually is to do, and get your mind going on possible applications.
PHP has a built in function that can actually act as our web scraper. It’s not perfect
and has a few possible limitations, but in many cases it’s going to be just what we need.
It’s called file_get_contents() and here’s an example of how to use it:
$page = file_get_contents(‘http://www.yahoo.com’);
Pretty simple isn’t it? This line will grab the contents of a page – specifically
yahoo.com – and store it in a variable called $page. From there it can be manipulated
just like any variable, this one just happens to contain the HTML of a web page. You
can change the links on the page, adjust formatting, or anything else using PHP’s
normal text formatting functions. For example, if you wanted to change all instances
of a certain word – “yahoo” – to link out to a destination of your choice, you could
use:
$page = str_replace(‘yahoo’,‘<a href=”http://YourLink.com”>Anchor Text</a>’,$page);
This replaces all occurrences of “yahoo” within the $page variable, with an href link to
yourlink.com and your chosen anchor text. So all you have to do now, is display the
altered content!
echo $page;
That’s all there is to it. So to put it all together into its own standalone script…
<?php
$page = file_get_contents(‘http://www.yahoo.com’);
$page = str_replace(‘yahoo’,‘<a href=”http://YourLink.com”>Anchor Text</a>’,$page);
echo $page;
?>
Voila, your first scraper!
You can use this concept to scrape any page you like. You can even pass the scraper a
URL to scrape dynamically using a subid, form, etc. You could combine this with a
little logic and a loop, and dynamically scrape a whole list of pages from file, and do
something to the content of each one. The possibilities are limitless!
There is however one big potential problem with this approach. Not all servers will
allow a request from file_get_contents(). It depends on how the server is
configured, and while I regularly find it’s quite easy to scrape sites with this method,
once in a while I encounter a page I can’t grab and I have to turn to a more
74
sophisticated method. In particular, using a much more complex function called
curl().
75
Understanding Errors
76
Web Development Software
IDE, WAMP, XAMP,
And Other
Alphabet Soup
Usually when we talk about a web server, we're referring to some machine out on the
internet somewhere that we have an account on. Or maybe it's a dedicated server and
the whole box is ours. Either way we tend to think of it as something remote, and not
located where we physically are.
But in actuality, a web server is a piece of software that serves files when they are
requested via the http protocol, which we think of as "the web". It's actually entirely
possible to run your own web server right from your personal computer, and have a
tiny private slice of the web with you at all times.
It's way beyond this manual's scope to explain how to do this, but if you are inclined to
do so just google WAMP or XAMP as they are two common ready-made DIY
Windows webserver packages that you can install yourself. They even include MySQL
and other goodies so you really can emulate a full blown hosting environment all from
your own machine. This is extremely helpful if you want to test or debug things you're
working on, when away from the internet. There are options for Mac and of course
Linux as well, just Google what you're looking for and you'll find it quickly.
Development
Software
When you get really serious about developing code, you may want to get something
that is purpose built to help you do so. This is where an IDE – or Integrated
Development Environment – can be very helpful. Think of them as Super Text
Editors, or "Dreamweaver for Code" if you like. They are loaded with features to help
manage complex projects with lots and lots of files, variables, and other intricate parts.
I don't use one myself, but I probably should… I just find old habits hard to break and
I'm very used to my text editor.
There are tons of IDEs available, and they range in price from under $100 to well over
$1,000. Just google "PHP IDE" and you'll find lots of options, if you don't feel that a
standard text editor is sophisticated enough for your needs.
77
BLACK HAT
A rose by any
other name…
What Exactly Is "black hat"?
The term "black hat" is used by different people to mean different things. My
understanding of its literal origins is in the old Western movies, where you knew the
good guys because they had white hats, and the bad guys always had black hats. The
ultimate example of this to me, was in Mad Magazine's "Spy vs. Spy" comic, where two
identical looking "secret agents" always tried to eliminate each other, and one was white
and the other black. Of course in that example they *both* stopped to any means
necessary, so it wasn't exactly a "good vs. bad" type of comparison.
In my opinion (so take it for what it's worth!), it really depends on what you're doing
with a technique, that defines whether it's "black" or "white". Techniques themselves
are not inherently good or bad, it's in how they're used. Many of the techniques and
tactics I'm going to describe in this section, have very legitimate applications, as well as
fraudulent and even illegal ones. It's up to you to know where your use of a tactic falls,
and be willing to accept the risk involved.
Let me be stupidly clear about this point:
I do not endorse or recommend any of the tactics I am about to describe. Some
of them I have used myself, some I have not. I am merely presenting them so
you know some of what is possible, and what some people do to gain an
advantage in their business.
Some of these things may be illegal and carry severe penalties. If you're in
doubt about using anything in this section, then don't do it. Period. But even
if you never apply any of these tactics, it's vital that you know what your
competition could be doing.
</disclaimer>
Now let's get on to the really juicy stuff.
78
Cookie Stuffing
Cookie Monsters
Probably one of the most widely recognized "back hat" tactics, is that of cookie
stuffing. There are a variety of ways to do it, and a variety of reasons. Believe it or not,
there are definitely what I consider "legitimate" reasons for cookie stuffing, in addition
to other uses ranging from "grey area" to outright fraud. Let's discuss the pros and
cons to this tactic, and then get into the nitty gritty.
First, what precisely is cookie stuffing? Here's part of Wikipedia's definition:
"Cookie stuffing or cookie dropping is when a user visits a website and
as a result of that visit receives a third-party cookie from an entirely
different website (target affiliate website), usually without the user
being aware of it. When (if) the user visits the target website and
completes a qualifying transaction, the cookie stuffer is paid a
commission."
To put it simply, cookie stuffing allows the "stuffer" to receive credit (usually in some
form of payment) for possible transactions that they didn't have to participate in.
The idea behind affiliate marketing in particular, is that affiliates become a sort of sales
force for the merchant, and they go drum up business and drive prospects to the
merchant's website, receiving commissions if those prospects buy something.
This is all well and good when the affiliates do something to add value to the process,
such as warming the prospect up to make them more likely to buy, or educating the
prospect on the benefits of the merchant's product vs. a competitor's, etc.
But classic cookie stuffing allows affiliates to get credit for sales they didn't actually
have any hand in at all. They did nothing to help the prospect in any way, and in fact
didn't add any value to the transaction at all, often times getting credit for a sale that
would have happened anyway, even without their participation.
Imagine the difference between someone who stands in front of a store, encouraging
passers-by to stop in and buy something, and getting paid for any of the people they
brought in, who actually do buy something. Now imagine someone who merely opens
the door for people who were already coming into the store anyway, and who still gets
paid when any of them buy something.
The latter is a classic example of blackhat cookie stuffing – getting credit for customers
who were already visiting the merchant anyway. There are a variety of ways to do this,
as well as some pretty serious consequences for those who get caught.
http://www.revenews.com/kelliestevens/affiliates-indicted-for-cookie-stuffing/
79
Let's Bake!
So how exactly does one cookie stuff? There are more ways than I could possibly
cover, but let's get into some of the most common. Starting with <img> tags.
The first time you start using image tags, it's most likely to do what they're meant to do
– load images so that the visitor's browser displays them. But it turns out that the
image tag isn't very picky, and will attempt to load any URL you put in it. Of course if
what it tries to load is not an image, you'll get one of those "broken image" icons in
your browser, but the page will still do its best to load that URL. Including dropping
any cookies that page may have been designed to drop.
What some clever/sneaky marketers figured out was that you can put your affiliate link
into an image tag, then place that tag onto any web page, and every time you get a
visitor to that page, you'll register a hit to your affiliate link. Now if that visitor ever
goes and buys something (or fills out a lead, etc.) from the merchant's site, the affiliate
will get credit for it.
Clearly this approach won't work terribly well if you're promoting something highly
obscure. For instance promoting affiliate links for "Aunt Bettie's Underwater Basket
Weaving Lecture Series on 8-Track Tape" will probably not have a very high chance of
any of your website's visitors ever finding it and making a purchase.
But what if you could drop cookies to a program that a massive portion of the internet
population all use? The two biggest examples that come to mind for me are eBay and
Amazon. Since so many internet users already use these sites to buy things, the
chances of them doing so after coming through your affiliate link, are fairly high.
Here is an example of a cookie stuffed image tag:
<img src="http://your-affiliate-link.com">
Pretty simple right? There's just one small remaining problem – the broken link icon I
mentioned above. Fortunately that's also easy to solve with a little styling:
<img style="visibility:hidden; height:0px;" src="http://your-affiliatelink.com">
Now this "image" will be completely invisible to the visitor but will drop the cookie for
your targeted affiliate program. Eureka, you're rich! Right? Well not so fast my
friend… a few years back this simple little technique could bring in massive amounts of
money.
Today however, affiliate networks and merchants have gotten a lot smarter, and many
of them actually track what their visitors do after they hit their site. What that means is
all your traffic, will appear to come to the site and then vanish. None of your traffic will
click a single link, or visit a single page of the target website. This is a dead giveaway
80
that cookie stuffing is going on. Additionally, if you use high volume traffic sources
such as PPV to cookie stuff, you won't be able to hide the massive number of "clicks"
you generate, and any time a network sees 1,000 clicks come through in a matter of
minutes, they know it's probably cookie stuffing. Also the image tag will send along
the referring website (i.e. your page) so the network will be able to go look at the page
and see what you're doing if they know what to look for in the source code.
Iframe, You Frame
Moving slightly up the food chain is the use of iFrames. Unlike an image tag which
requests the URL but doesn't know what comes back, an iFrame actually requests and
loads the target URL in a window all its own. It's normally used to display content
from another domain inside your own domain, but it's an easy way to load an affiliate
link as well and have it drop its cookies. It can also be hidden just like the previous
image tag example. Here's what a hidden, stuffed iFrame might look like:
<iframe style="visibility:hidden; height:0px;" src="http://your-affiliate-link">
</iframe>
Note that unlike the image tag, the iFrame tag must be closed with a closing </iframe>
tag.
A downside to the iFrame is that it actually loads just like the page normally would,
which means that in the browser status bar, all the various elements being loaded will
flash by. Anyone paying any attention will easily see what's happening, and in some
cases it can slow down the overall page loading. It can also allow any exit pops on the
framed page, to appear on exit, even though the frame is hidden.
More Hidden than
Hidden
If you've been around the Internet Marketing block a while, you've probably
encountered the idea of the "hidden div" before. In fact we discussed it previously in
the HTML section of this book. But here in our cookie stuffing, I'm using
visibility:hidden instead. Why is that? Actually it's for an extremely good reason. I
don't know the exact technical "whys" behind this, I only know that I've seen this
happen with my own eyes, and am taking action accordingly.
There are some cases, in particular where multiple cookies are dropped by the link,
where using display:none actually causes some of the cookies not to drop. This can of
course result in you not getting commissions, which is generally not a good thing. But
I found that using visibility:hidden still allows all cookies to drop. My theory is that
display:none means just that – display none i.e. nothing whatsoever. Whereas
visibility:hidden also means just that – make the content invisible but still render it
to the browser. I add the height setting because visibility:hidden normally still
takes up whatever amount of screen real estate the element would have taken up
originally, so this just makes it so there is no height to it at all. You can also add a
width: tag if needed. If all else fails, put it at the very bottom of your page.
81
How Not to Stuff
Now that you know how to cookie stuff, you should know when not to do it. You'll see
there are some legitimate reasons to use this tactic shortly, but there are other ways that
can land you in hot water.
1. Don't cookie stuff on sites that you don't own. By this I mean don't try to
cookie stuff in popular forums, or on other people's blogs, etc. Doing so is
very easy to detect, will probably piss people off and could cause you to be
banned from the affiliate program and not get paid.
2. Don't use popups and target the home domain of the merchant. i.e.
don't be an Amazon or eBay affiliate and target amazon.com or ebay.com (or
any other domains they own) for your pops. This is also known as "self
targeting" and again can get you terminated and even facing legal action if the
dollar amount is high enough.
3. Don't cookie stuff everything under the sun. Some seemingly clever
marketers have had the bright idea to send traffic to a site, and cookie stuff
every single product in the Clickbank marketplace in one shot. The idea is to play the
numbers… with that many cookies, these people are bound to buy
SOMETHING from Clickbank right? Especially if you popup and stuff on
the sales pages for all the CB products. Problem is, you've added no value to
the products you've stuffed and are effectively stealing from the merchants.
You're also taking up bandwidth and resources on the visitor's computer to
stuff all those cookies, and it's not hard to spot it going on. Once again if
you're caught, kiss any commission goodbye.
Go Stuff Yourself
Up to this point I've painted cookie stuffing pretty clearly as a "black hat" kind of
thing, and have only talked about it in terms of being something that can get you in a
lot of trouble. But actually there are times when I believe it is absolutely the best thing
for everyone. In particular when you're able to create a landing page that converts
better than the merchant's own page.
It's not uncommon for the "soldier in the trenches" to have a better grasp on what's
happening at the front lines, then the Generals back at headquarters. This is definitely
the case in affiliate marketing where it's quite common for the affiliate to know what
converts better than the merchant or network themselves. The problem is, how do
you get affiliate credit for something if you didn't send people through your affiliate
link?
Answer: Cookie Stuff!
All you have to do is go ahead and put your hidden image link or iframe, on your own
landing page, and if the person makes a purchase or whatever else you need them to
82
do, then you will get credit because the cookie would have been dropped behind the
scenes, on the visitor's computer.
A classic example of this is with Clickbank. Countless merchants on Clickbank have,
quite frankly, horrendously bad landing pages. Even if they convert well for one traffic
source, there is no way they'll convert well for all sources. In particular those classic
long form sales letters typically perform very poorly on sources like PPV. So how do
you promote a CB product with your own landing page? Yep that's right… just cookie
stuff it.
This also gives you another benefit – you can create the appearance of your own sales
funnel, sending them directly to the Clickbank order page for the product, after you've
taken them through whatever optin or presales steps you want. Since you dropped
your cookie at the beginning, the checkout page will credit you for the sale (as long as
they haven't picked up another affiliate's cookie of course).
For example, many affiliates send traffic directly through their CB affiliate link. It's the
holy grail of affiliate marketing right? Direct linking! You don't have to have a website,
your own product, a list, nothing! Problem is after all is said and done, you've got just
that – nothing… other than a few dollars in affiliate commissions if you're lucky.
But how do you build a list if you're direct linking? Well you don't. But you can add
just one small step in between and build your own mailing list that you can use to
presell the product (or others) down the line. Just set up your own landing page that
collects optins (and cookie stuffs your link). Style it to resemble the actual product
look & feel or sales page, so that it feels like they belong together. Then after the
person opts in, send them through your affiliate link as if it were the "thank you" page.
Now even if they don't make a purchase, you've built a list and you can continue to
market to them later.
IMPORTANT SAFETY TIP: If you're going to build lists and engage in email
marketing, PLEASE be careful and compliant. Email is one of the few areas of online
marketing that is heavily regulated and actually has laws and legal consequences
regarding it.
Always use double optin no matter how tempting it is to use single, and always make it
clear what emails they can expect from you before they sign up – then stick to that.
Don't hide your disclosures in such a way that they're nearly impossible to find, make it
easy for those who want to know more about your marketing practices before joining
your list, to find out.
If you don't follow this advice, then be aware of the risk you're taking.
83
Cookie Prepop
84
Flash Cookies
85
Referrer Spoofing
http://www.contentgeneration.org/cpa-redirector-standalone-version/
86
IP Spoofing
87
Click Trapping
88
Proxies
89
Creative Form Submission
90
CPA Slice & Dice
91
Reading Browser History
92
Cross Domain Form Ripping
93
Appendix A.
U S E F U L
C O D E
C H E A T S H E E T
To align any block of content on a page:
<div align="center">
HTML content goes here
</div>
Options for "align" are center, left, and right. Can also use span instead of div.
Basic table layout for a headline, subheadline, image, and call to action:
<table align="center"><tr><td align="center">
<h1>This is my headline</h1>
</td></tr>
<tr><td align="center">
<h2>This is my subheadline</h2>
</td></tr>
<img src="http://domain.com/path/to/image.jpg">
</td></tr>
Here is my call to action!
</td></tr>
</table>
Tag to drop a cookie via a hidden image tag (USE WISELY!!):
<img style="visibility:hidden; height:0px;" src="http://your-affiliatelink.com">
Tag to drop a cookie via a hidden iFrame tag (USE WISELY!!):
<iframe style style="visibility:hidden; height:0px;" src="http://your-affiliate-link.com">
</iframe>
94

code for marketers

Transcription

Similar documents

Toll Tag Request

PETtrac Stainless/Brass Tag Order Form

Almond Olive and Citrus Committees Website

File Processing Using PHP on IBM i

Page Views

Tutorial: Create online polls with PHP and MySQL

Golfland flyer

Party Pictures 2 - CBG International Communications

The Biesbosch Nationaal Park

Creation of the event and analysis