Place your message here

Your Guide to Professional
Web Site Design and Development

Web Development
HTML Codes
HTML Tips
Javascript Snippets
216 Safe Colors
Symbols
Web Directory
Web Resources
Internet Channels

Web Development: Business, Advertising, Internet Marketing, Promotion and Web Site Design

| Web Development | HTML Codes | HTML Tips | Javascript Snippets | 216 Safe Colors | Symbols | Recommendations |

Inserting Affiliate Codes Into Links and Forms

By William Bontrager

If you have your own affiliates, you may wish to insert affiliate codes into links and forms. Reasons for doing this might include

1. Tracking an affiliate code from page to page.

2. Pre-filling in an affiliate code into a form text or hidden field, to

   • Receive the affiliate code via email.

   • Record the affiliate code in a database.

   • Email an affiliate URL to someone else.

   • Have the affiliate code available when processing the rest of the submitted information.

3. Redirecting the site visitor to a different page, customized for the affiliate code.

The Web Page URL

In order to use the affiliate code in links and forms, the URL of the web page in the user's browser must be followed by either a question mark or a hash mark ("?" or "#") and then the affiliate code. Without those, the JavaScript presented in this article won't have an affiliate code to process.

Here are examples of what I mean:

http://WillMaster.com/page.html?AF33
http://WillMaster.com/page.html#AF33

In both of those examples, the affiliate code is "AF33". In one, the affiliate code is appended to the URL with a question mark and in the other it is appended with a hash mark.

Domain URLs (without specifying a particular web page) can also have the affiliate code appended. Examples:

http://WillMaster.com/?AF33
http://WillMaster.com/#AF33

Notice that a slash character follows the domain name. The slash is necessary for some browsers to properly translate the URL.

The Affiliate Code Extractor

The following eleven lines of JavaScript, when placed in the HEAD section of your web page, will extract the affiliate code from the web page URL:

<script type="text/javascript" language="JavaScript"><!--
function GetAffiliateCode() {
var DefaultAffiliateCode = 'mydefaultcode';
var thisurl = location.href;
var ql = thisurl.indexOf('?
if(ql < 0) { ql = thisurl.indexOf('# }
if(ql >= 0) { return thisurl.substr(ql + 1); }
return DefaultAffiliateCode;
}
ThisAffiliateCode = GetAffiliateCode();
//--></script>

In the third line of the above JavaScript, you can specify a default affiliate code to use when the web page URL doesn't provide one. If you want a blank or null affiliate code for the default, remove all text between the two apostrophes (but keep the apostrophes).

Line by line, the above JavaScript:

Line  1 -- Tells the browser that the following lines are
           JavaScript.

Line  2 -- Begins function GetAffiliateCode().

Line  3 -- Stores a default affiliate code into variable
           DefaultAffiliateCode.

Line  4 -- Stores the URL in the browser's address bar into
           variable thisurl.

Line  5 -- Stores the location of the question mark in the
           URL into variable ql.

Line  6 -- If the URL has no question mark, store
           the location of the hash mark into variable ql.

Line  7 -- If the URL had a question mark or a hash mark,
           returns all the text in the URL that follows the
           mark.

Line  8 -- This line runs only if there was no question mark
           or hash mark in the URL. It returns the default
           affiliate code.

Line  9 -- Marks the end of function GetAffiliateCode().

Line 10 -- Runs function GetAffiliateCode() and stores the
           value the function returns into variable
           ThisAffiliateCode. Variable ThisAffiliateCode
           can now be used to insert the affiliate code
           into links and forms.

Line 11 -- Tells the browser that the lines of JavaScript
           end here.

Inserting Affiliate Codes Into a Link

If you insert the affiliate code into your intra-site links, so the affiliate code is appended to the URL with either a question mark or a hash mark, you'll be able to send the affiliate code with the visitor, from page to page, without the use of cookies.

Inserting the affiliate code can be done with JavaScript. This is an overview of how to do it:

For more information,
[anchor tag link goes here]
Click Here</a>

Not all browsers are JavaScript-enabled. If it's important that default HTML is inserted even when JavaScript isn't available for a browser, then use the NOSCRIPT tag to specify the HTML for that contingency.

Here is a working example of JavaScript to insert an affiliate code into a link. The affiliate code is appended to a hash mark -- the affiliate code being that which the JavaScript in the HEAD area extracted when the page was being loaded:

For more information,
<script type="text/javascript" language="JavaScript"><!--
document.write('<a href="http://mydomain.com/page.html#');
document.write(ThisAffiliateCode);
document.write('">');
//--></script>
<noscript>
<a href="http://mydomain.com/page.html">
</noscript>
Click Here</a>

document.write() prints the content between the parenthesis.

If you're printing a string of characters, enclose the characters between apostrophes or quotation marks. Whatever you decide to enclose the characters with, if you use the same character as one of the characters that are to be printed, precede the character with a backslash. Example:

document.write('He\'s back!');

To print the contents of a variable, put the variable between the parenthesis, not enclosed with apostrophes or quotation marks.

Inserting Affiliate Codes Into a Form

Any form processed by a script that allows custom fields can have affiliate codes inserted into form field values. For example, this will take the affiliate code extracted from the URL and insert it into a hidden filed named "afc":

<script type="text/javascript" language="JavaScript"><!--
document.write('<input type="hidden" name="afc" value="');
document.write(ThisAffiliateCode);
document.write('">');
//--></script>
<noscript>
<input type="hidden" name="afc" value="something">
</noscript>

That hidden field can be processed by the form's CGI program just like any other custom hidden field. If the program can update a database with form field names, like Master Form can do, then the affiliate code might be used to measure performance or other statistics.

If you're providing "recommend this site" forms and want your affiliate's code to be part of the recommended URL, the hidden field representing the URL being recommended can be modified to append the affiliate code with either a question mark or a hash mark. Here is an implementation example for use with Master Recommend Pro:

<script type="text/javascript" language="JavaScript"><!--
document.write('<input type="hidden" ');
document.write(' name="siteURL" ');
document.write(' value="http://mydomain.com/page.html#');
document.write(ThisAffiliateCode);
document.write('">');
//--></script>
<noscript>
<input type="hidden"
name="siteURL"
value="http://mydomain.com/page.html">
</noscript>

For Master Recommend (the free version) replace "siteURL" with "siteurl" in both places.

If you want to offer a form field where the user can type in the affiliate code (or sponsor's code, as in the example), yet pre-fill in the code whenever possible, do something like this:

Your sponsor's code:
<script type="text/javascript" language="JavaScript"><!--
document.write('<input type="text" name="afc" value="');
document.write(ThisAffiliateCode);
document.write('">');
//--></script>
<noscript>
<input type="text" name="afc" value="something">
</noscript>

Redirecting To a Customized Page

If you have a CGI program that generates customized pages with affiliate information embedded in it, the following code can redirect the site visitor to the CGI script. The affiliate code is sent to the script, which allows the script to customize the page for the visitor.

<script type="text/javascript" language="JavaScript"><!--
var URL = 'http://mydomain.com/cgi-bin/script.cgi?' +
ThisAffiliateCode;
location.href = URL;
//--></script>

Notice that there is no NOSCRIPT tag here. If the browser is JavaScript-disabled, the page would not be redirected and everything on the original page would be displayed, whether or not it is between NOSCRIPT tags.

To load faster in JavaScript-enabled browsers, you might put all of the rest of the page between NOSCRIPT tags. This would enable the browser to ignore images and tables and such, and run the JavaScript redirection code sooner.

Will Bontrager

About the Author:

William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:possibilities@willmaster.com

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Back