Javascript to propagate form fields

[stcrim]

Is it possible to propagate a form field with the keywords someone used in a search engine to get to your site using javascript. In other words someone searched for Red Apples and when they click to your site the keywords are passed to a form field and ready for them to use.

Can those keywords also be passed to the text on the page using JS?

-s-

[MonkeeSage]

Yup, the key is document.referrer -- try a google search, click on a page then alert document.referrer, query words follow the "q="

function google_words() {
// get the referrer string, unescape the escaped chars
 var ref = decodeURIComponent(document.referrer);
// referrer is google?
 var idx = ref.toLowerCase().indexOf("google");
 if (idx!= -1) { // yes it is
// find the query string
 var query = ref.replace(/^.*q=([^&]+)&?.*$/i, "$1");
// clean up quotes
 query = query.replace(/\'¦\"/g, "");
// split on space or plus sign
 var qArray = query.split(/[\s,\+\.]+/);
 // the search words are now in an array called qArray
 // do something with them...
 for (var i = 0; i < qArray.length; i++) {
 alert(qArray[i]);
 }
 }
}

Then you just have to call google_words() somewhere on the page you want to get the search words for.

Ps. This function was converted from PHP from Dean Allen's "Google hilite" script (Here [textism.comtools]).

[MonkeeSage]

Is this what you were looking for?

Jordan

[stcrim]

Jordan,

I have yet to paly with it, but I think it will be very helpful. Do you think it's possible it can work with any search engine?

The goal is to pick up the search terms and pass them into the page in exactly the way someone has searched and perhaps even carry those terms from page to page as someone moves around the site...

-s-

[MonkeeSage]

Yes it can be made to work with most search engines, something like:

function getQueryTerms(theRef) {
 // find the query string
 theRef = theRef.replace(/^.*q=([^&]+)&?.*$/i, "$1");
 // clean up quotes
 theRef = theRef.replace(/\'¦\"/g, "");
 // split on space or plus sign
 var qArray = theRef.split(/[\s,\+\.]+/);
 return qArray;
}
 
function search_words() {
 // get the referrer string, unescape the escaped chars
 var ref = decodeURIComponent(document.referrer), i;
 // referrer is google?
 var idx = ref.toLowerCase().indexOf("google");
 if (idx!= -1) { // yes it is
  var g_Array = getQueryTerms(ref);
  for (i = 0; i < g_Array.length; i++) {
   alert(g_Array[i]);
  }
 }
 // referrer is ATW?
 idx = ref.toLowerCase().indexOf("alltheweb");
 if (idx!= -1) { // yes it is
  var atw_Array = getQueryTerms(ref);
  for (i = 0; i < atw_Array.length; i++) {
   alert(atw_Array[i]);
  }
 }
 // ...
}

Jordan

[stcrim]

Thank you!

-s-

[MonkeeSage]

Sure. :)

It's a nifty trick! Here's what I got right now...

// search words global arrays 
var g_Array = null; 
var atw_Array = null; 
var y_Array = null; 
var vs_Array = null; 
  
function extractQueryTerms(theRef, theEngine) { 
  var qPrefix = "q"; 
  // some SEs use different form names 
  // for their query strings... 
  if (theEngine) { 
   if (theEngine == "y") { // Y! 
     qPrefix = "p"; 
   } 
   else if (theEngine == "vs") { // Vivisimo 
     qPrefix = "query"; 
   } 
  } 
  var re = new RegExp("^.*" + qPrefix + "=([^&]+)&?.*$", "i"); 
  // find the query string 
  theRef = theRef.replace(re, "$1"); 
  // clean up quotes 
  theRef = theRef.replace(/\'¦\"/g, ""); 
  // split on space or plus sign 
  var qArray = theRef.split(/[\s,\+\.]+/); 
  return qArray; 
} 
  
function getQueryTerms(theRef, theEngine, theShortEngine) { 
  var idx = theRef.toLowerCase().indexOf(theEngine); 
  if (idx!= -1) { 
   return extractQueryTerms(theRef, theShortEngine); 
  } 
  else { 
   return ""; 
  } 
} 
  
function search_words() { 
  // get the referrer string, unescape the escaped chars 
  var ref = decodeURIComponent(document.referrer), i; 
   
  // referrer is google? 
  g_Array = getQueryTerms(ref, "google"); 
  // referrer is ATW? 
  atw_Array = getQueryTerms(ref, "alltheweb"); 
  // referrer is Y!? 
  y_Array = getQueryTerms(ref, "yahoo", "y"); 
  // referrer is Vivismo? 
  vs_Array = getQueryTerms(ref, "vivisimo", "vs"); 
  
  if (g_Array) { 
   for (i = 0; i < g_Array.length; i++) { 
     alert(g_Array[i]); 
   } 
  } 
  if (atw_Array) { 
   for (i = 0; i < atw_Array.length; i++) { 
     alert(atw_Array[i]); 
   } 
  } 
  if (y_Array) { 
   for (i = 0; i < y_Array.length; i++) { 
     alert(y_Array[i]); 
   } 
  } 
  if (vs_Array) { 
   for (i = 0; i < vs_Array.length; i++) { 
     alert(vs_Array[i]); 
   } 
  } 
}

Jordan

[MonkeeSage]

Ps. For the always popular google-like hilite, make two new functions, like...

function se_hilite(arr) { // argument is array 
 var doc = document.getElementsByTagName("body")[0].innerHTML; 
 var re = null; 
 for (var i = 0; i < arr.length; i++) { 
  re = new RegExp('[^\=\"¦\/](' + arr[i] + ')[^\"¦\/]', "gi"); 
  doc = doc.replace(re, " <span class=\"se_hilite" + (i + 1) + "\">$1</span> "); 
 } 
 document.getElementsByTagName("body")[0].innerHTML = doc; 
} 
  
function searchWelcome(theEngine) { 
 var doc = document.getElementsByTagName("body")[0].innerHTML; 
 var tmpArr = eval(theEngine + "_Array"); 
 var ret = ""; 
 for (var i = 0; i < tmpArr.length; i++) { 
  ret += tmpArr[i] + " "; 
 } 
 doc = "<div>You searched for:" + ret + "</div>\n" + doc; 
 document.getElementsByTagName("body")[0].innerHTML = doc; 
}

-

Then replace the...

if (g_Array) {  
 for (i = 0; i < g_Array.length; i++) {  
 alert(g_Array[i]);  
 }  
} 
...

...with...

if (g_Array) { 
 searchWelcome("g"); 
 hilite(g_Array); 
} 
...

-

Then make some CSS rules, something like...

.se_hilite1 { 
  display: inline!important; 
  background: #CCCCFF!important; 
  color: gray!important; 
  font-weight: bold!important; 
} 
.se_hilite2 { 
  display: inline!important; 
  background: #CCFFFF!important; 
  color: purple!important; 
  font-weight: bold!important; 
} 
.se_hilite3 { 
  display: inline!important; 
  background: #CCFFCC!important; 
  color: #336600!important; 
  font-weight: normal!important; 
} 
.se_hilite4, .se_hilite5, .se_hilite6 { 
  display: inline!important; 
  background: #CCCC99!important; 
  color: black!important; 
  font-weight: normal!important; 
}

Jordan