Forums

Tracking referrals and Javascript in a form

fabaya 22 Aug, 2010
Hello, Chronoform people: Im trying to make a referral program Im my website. I found this tool http://www.willmaster.com/library/features/visitor-page-view-history-breadcrumbs.php#G1282419260064 to track visitor´s web history in Javascript with cookies. Because my contact forms sometimes are at 2 or 3 links of landing page that I build in HTML; the HTTP_REFERER method that Im embedded in framed Chronoforms sometimes dont allow me to track the affiliate link referral. The only way I can control this problem is with the usage of the mentionated tool. The problem is that I really dont know how to execute this Javascript simultaneusly with Chronoform and send the values that the retrieve JS generates in a hidden field with my chronoforms.

This is the javascript code for web history tracking



<script type="text/javascript"><!--
// Obtained from http://www.willmaster.com/
//
// Specify maximum number of history links to keep, 
//    minimum 1.
var MaximumNumberOfLinks = 15;

// Specify cookie name.
var CookieName = "HistoryLinks";

// Specify number of days cookie is to remain on visitor's 
//    computer. (Use 0 to delete cookie when browser closed.)
var DaysToLive = 366;

// No other customizations required.
var HistoryLink = new Array();
var HistoryTitle = new Array();
var CurrentPage = new String();
var HistoryContent = new String();
DaysToLive = parseInt(DaysToLive);
MaximumNumberOfLinks = parseInt(MaximumNumberOfLinks);
if( MaximumNumberOfLinks < 1 ) { MaximumNumberOfLinks = 10; }

function GetCookie() {
var cookiecontent = '';
if(document.cookie.length > 0) {
   var cookiename = CookieName + '=';
   var cookiebegin = document.cookie.indexOf(cookiename);
   if(cookiebegin > -1) {
      cookiebegin += cookiename.length;
      var cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      cookiecontent = document.cookie.substr(cookiebegin,cookieend);
      }
   }
if( cookiecontent.length < 3 ) { return; }
cookiecontent = unescape(cookiecontent);
var historyList = cookiecontent.split('&');
for( var i = 0; i < historyList.length; i++ ) {
   var link = historyList[i].split('=',2);
   HistoryLink.push(link[0]);
   HistoryTitle.push(link[1]);
   var temparray = link[0].split('~amp;');
   link[0] = temparray.join('&');
   temparray = link[1].split('~amp;');
   link[1] = temparray.join('&');
   HistoryContent += '<'+'p>'+'<'+'a href="'+link[0]+'">'+link[1]+'<'+'/'+'a>'+'<'+'/'+'p>';
   }
}

function PutCookie() {
if( HistoryLink.length < 1 ) { return; }
var len = HistoryLink.length;
while( HistoryLink.length > MaximumNumberOfLinks ) {
   HistoryTitle.shift();
   HistoryLink.shift();
   }
var pairs = new Array();
for( var i = 0; i < HistoryLink.length; i++ ) { pairs.push(HistoryLink[i]+'='+HistoryTitle[i]); }
var value = pairs.join('&');
var exp = new String();
if(DaysToLive > 0) {
   var now = new Date();
   now.setTime( now.getTime() + (DaysToLive * 24 * 60 * 60 * 1000) );
   exp = '; expires=' + now.toGMTString();
   }
document.cookie = CookieName + "=" + escape(value) + '; path=/' + exp;
}

function RecordCurrentPage() {
var link = document.URL;
var title = document.title.length > 1 ? document.title : 'Untitled';
CurrentPage = '<'+'p>'+title+'<'+'/'+'p>';
var temparray = link.split('&');
link = temparray.join('~amp;');
var temparray = title.split('&');
title = temparray.join('~amp;');
HistoryLink.push(link);
HistoryTitle.push(title);
}

GetCookie();
RecordCurrentPage();
PutCookie();
//--></script>



This + the above, is the code for retrieve harvested info:

<script type="text/javascript"><!--
if(HistoryContent.length) {

document.write('<'+'div ');
document.write(' id="visitorhistory" ');
document.write(' style="border-style:solid; border-width:1px; padding:0 5px 10px 20px;">');

document.write('<'+'h3>You were here:<'+'/h3>');

document.write(HistoryContent);

document.write('<'+'h3>You are here:<'+'/h3>');

document.write(CurrentPage);

document.write('<'+'/div>');

}
//--></script>



It it´s posible to run this JS with chronoforms and save the result in a hidden field to send with email.

Im very bad at programming please help me!
GreyHead 22 Aug, 2010
Hi fabaya ,

I have a neat solution for this that works inside Joomla. But if I understand correctly you have some pages that are completely outside Joomla??

In that case I I think that the simplest answer is to modify your second code snippet so that it writes its output to a hidden input and then that can be included with the other form inputs.

Bob
fabaya 22 Aug, 2010
Hi Bob, thanks again.

Yes Bob my base site is builded in html with some areas with joomla framed contents. Thats because templates in Joomla are in general bad looking for my taste. This script give me the ability to track visitor landing page far from contact forms, to verify if the initial url was from a referral. But you got the idea. I need modify the second code snippet so that it writes its output to a hidden input and then that can be included with the other form inputs. I really dont know how. Can you give me a hint? Is passing javascript to PHP? can you point me a tutorial? Plus I dont know why: but in this javascript is necesarily to include the first snippet in order that everything works... I guess first snippet must be included in javascript box.

Bob thanks again
fabaya 23 Aug, 2010
I know this is a little stupid but I made the following form in order to make the requested javascript work.

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_9" name="mailto" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<input value="<?php echo <script type="text/javascript" src="http://localhost/Site/xxx/wpscripts/beadcrumbdisplay.js"></script>; ?>
" id="hidden_7" name="historia" type="hidden" />

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Enviar" name="button_6" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>



Where http://localhost/Site/xxx/wpscripts/beadcrumbdisplay.js is an external javascript that contains the two snipetts above mentionated. But the form present nothing with this setting and removing the tags <script.. and </script>
fabaya 23 Aug, 2010
I try this too:


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_9" name="mailto" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<input value="<?php if ( !$mainframe->isSite() ) {return;}
$doc =& JFactory::getDocument();
$doc->addScript('http://localhost/Site/xxx/wpscripts/beadcrumbdisplay.js"');
?>" id="hidden_7" name="historia" type="hidden" />

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Enviar" name="button_6" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>

But instead of write the Javascript in the hidden field, the javascript is executed directly in the form.
fabaya 26 Aug, 2010
Sorry for grinding but Im getting a bit desperate here: im going to production next week and I really dont know how to solve this problem. I get the feeling that this is imposible, however fortunately I found this thread (http://www.chronoengine.com/forums.html?cont=posts&f=5&t=18565 where you Bob explain a similar use of chronoforms that I need. I hope you can help me
fabaya 26 Aug, 2010
Im really driving crazy with this. But Im found that Im not the only with this problem of not wanting to rely on HTTP_REFERER METHOD to track affiliates. Because this obviously wont work as the visitor may well have visited other pages on your site before to arrive to the contact form.

http://www.warriorforum.com/programming-talk/92433-tracking-url-keyword-php.html


I am updating this dreadful investigation just in case if another member has the same problem
nml375 27 Aug, 2010
Hi,
What you should do, is to include the script in the document header, such as using the JDocument->addScript() method. However, as Bob mentioned, you need to alter your second script to add the value to a form input rather than simply writing a set of div-tags.

I would probably re-write that piece something like this (assuming there's already a hidden form-input with the id "historia". This does rely on MooTools, though this is usually loaded with CF.

<?
$script = "window.addEvent('domReady', function() {
  $('historia').value = HistoryContent;
});";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>


/Fredrik
fabaya 27 Aug, 2010
Ey, thanks a lot for the response. I make the same way you describe but nothing happens. This is a picture with all my chronoform settings for this forms
Can you take a look in order to indentify some inapropiated set that can be the reason of the problem.

Thanks again
nml375 27 Aug, 2010
Hi,
Do you get any JavaScript errors?

/Fredrik
fabaya 27 Aug, 2010
No Fredrik. The mail get sended: the mailto field writed ok! But nothing related to the cookie retrieve. Also I change
<?php
if ( !$mainframe->isSite() ) {return;}
$doc =& JFactory::getDocument();
$doc->addScript('http://localhost/Site/Nivacom/wpscripts/beadcrumb.js"');
?>

for
<?php
if ( !$mainframe->isSite() ) {return;}
$doc =& JFactory::getDocument();
$doc->addScript('"http://localhost/Site/Nivacom/wpscripts/beadcrumb.js"');
?>

adding one " ahead of the http:// just in case...

But nothing happens...
fabaya 27 Aug, 2010
Debug ON image


Plus All seems to be good with the path, because if I redirect to a complete js file with "Create cookie" and "get cookie" scripts together, I get the results of history browsing in the form screen.

GreyHead 27 Aug, 2010
Hi fabaya,

I can't read the images but I did get your code to work like this. First add this div into the Form HTML
<div id='history' ></div>
Then add this code into the JavaScript box (this includes the breadcrumb.js code):
// Obtained from http://www.willmaster.com/
//
// Specify maximum number of history links to keep,
//    minimum 1.
var MaximumNumberOfLinks = 15;

// Specify cookie name.
var CookieName = "HistoryLinks";

// Specify number of days cookie is to remain on visitor's
//    computer. (Use 0 to delete cookie when browser closed.)
var DaysToLive = 366;

// No other customizations required.
var HistoryLink = new Array();
var HistoryTitle = new Array();
var CurrentPage = new String();
var HistoryContent = new String();
DaysToLive = parseInt(DaysToLive);
MaximumNumberOfLinks = parseInt(MaximumNumberOfLinks);
if( MaximumNumberOfLinks < 1 ) { MaximumNumberOfLinks = 10; }

function GetCookie() {
var cookiecontent = '';
if(document.cookie.length > 0) {
   var cookiename = CookieName + '=';
   var cookiebegin = document.cookie.indexOf(cookiename);
   if(cookiebegin > -1) {
      cookiebegin += cookiename.length;
      var cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      cookiecontent = document.cookie.substr(cookiebegin,cookieend);
      }
   }
if( cookiecontent.length < 3 ) { return; }
cookiecontent = unescape(cookiecontent);
var historyList = cookiecontent.split('&');
for( var i = 0; i < historyList.length; i++ ) {
   var link = historyList[i].split('=',2);
   HistoryLink.push(link[0]);
   HistoryTitle.push(link[1]);
   var temparray = link[0].split('~amp;');
   link[0] = temparray.join('&');
   temparray = link[1].split('~amp;');
   link[1] = temparray.join('&');
   HistoryContent += '<'+'p>'+'<'+'a href="'+link[0]+'">'+link[1]+'<'+'/'+'a>'+'<'+'/'+'p>';
   }
}

function PutCookie() {
if( HistoryLink.length < 1 ) { return; }
var len = HistoryLink.length;
while( HistoryLink.length > MaximumNumberOfLinks ) {
   HistoryTitle.shift();
   HistoryLink.shift();
   }
var pairs = new Array();
for( var i = 0; i < HistoryLink.length; i++ ) { pairs.push(HistoryLink[i]+'='+HistoryTitle[i]); }
var value = pairs.join('&');
var exp = new String();
if(DaysToLive > 0) {
   var now = new Date();
   now.setTime( now.getTime() + (DaysToLive * 24 * 60 * 60 * 1000) );
   exp = '; expires=' + now.toGMTString();
   }
document.cookie = CookieName + "=" + escape(value) + '; path=/' + exp;
}

function RecordCurrentPage() {
var link = document.URL;
var title = document.title.length > 1 ? document.title : 'Untitled';
CurrentPage = '<'+'p>'+title+'<'+'/'+'p>';
var temparray = link.split('&');
link = temparray.join('~amp;');
var temparray = title.split('&');
title = temparray.join('~amp;');
HistoryLink.push(link);
HistoryTitle.push(title);
}
window.addEvent('domready', function() {
  GetCookie();
  RecordCurrentPage();
  PutCookie();
  $('history').setHTML(HistoryContent);
});
Just the last few lines have been changed to write the code into the div after the page loads.

Bob
fabaya 27 Aug, 2010
Thanks a million Bob but no luck! Even when We are more closer and the <div id='history' ></div> render the code inside chronoforms and outside hidden field value. Putting this div in a hidden field value:

<input value="<div id='history'></div>" name="history" type="hidden" />

Doesnt write the script result in the hidden field value and thus after is unable to send it by email.

I try this too:

<input value="<div id='history'></div>" id="history" name="historia" type="hidden" />


And every cartesian combination of order in that the div appears. In any case $_POST Array: Array [historia] => send nothing

But something strange happens when I transform this field in a textarea. Then the script runs smootly and write to the text area plus get sended by email:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_9" name="mailto" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_element cf_textarea">
    <label class="cf_label" style="display: none;">History</label>
    <textarea class="cf_inputbox" rows="3" id="history" input value="<div id='history' ></div>" cols="30" name="historia"></textarea>
    
  </div>
  <div class="cfclear"> </div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Enviar" name="button_6" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>


... and form Javascript Bob writed in the second box


Why am feeling that the hidden field is the problem?

Chronoform write some special hidden fields?

The are any method to dissapear this textarea from the view of the visitor and get rended an send equally?


Thanks my friends to give me hope!!!! (:
GreyHead 27 Aug, 2010
Hi fabaya,

You can't embed line-breaks in a text or hidden input without encoding them first. And I guess that the quotes will also break the page HTML.

Try using the textarea with style='display:none;'

Bob
fabaya 27 Aug, 2010
Bob the submitted code in textarea is in style="display: none" but get displayed
<div class="form_element cf_textarea">
    <label class="cf_label" style="display: none;">Comentarios</label>
    <textarea class="cf_inputbox" rows="3" id="history" input value="<div id='history' ></div>" cols="30" name="historia"></textarea>
GreyHead 27 Aug, 2010
Hi fabaya ,

Errr . . .no, the label has the style, not the textarea.

Bob
fabaya 27 Aug, 2010
Sorry Bob Im a stupid...

Thanks a million to you and Fredrik

You are amazing....

I promise you to learn more and be a better student!!!
This topic is locked and no more replies can be posted.