Webvanta Blog: Creating Effective Websites

Capturing Source Codes to Track Marketing Results

If you are collecting leads or orders on your site, you should know where those prospects or orders are coming from. It’s the only way to know which of your marketing techniques is working.

Of course, you can always have a field in your form that asks “how did you find us?”, but often this doesn’t yield accurate information. And it’s always best to keep the number of form fields to a minimum, especially when capturing leads.

Fortunately, it’s not difficult to automatically capture some information about the source of your visitors. In this article, I’ll explain how to use source codes added to your URLs. In a future article, I’ll show how you can also capture the referrer address.

Adding Source Codes to Your URLs

If you are placing ads or getting links from other sites that will allow you to customize the link, the most straightforward approach is to add a source code to the URL, using a URL parameter. The resulting URL looks like this:

www.mysite.com/landing-page?s=sourcecode

In this example, I’ve shown the link being to a landing page, but it could just as well be a link to your home page:

www.mysite.com?s=sourcecode

I’ve named the source-code parameter “s”, but you can name it whatever you want; I like the conciseness of single-character names, but you can be more verbose if you prefer.

Once you have this all set up, you can make up source codes with abandon. Every ad, and every link, can use a unique source code. You don’t need to do any special setup for each code—but you do, of course, need to keep track of which codes go with which sources.

Capturing the Source Code

Now that you have a source code in the URL, you need to use it on your site.

First, you need to extract the source code parameter from the URL. This is easy to do with a little bit of JavaScript. There’s a handy jQuery plugin that makes this super-simple: parseQuery.js.

You’ll need to grab the source code from the parseQuery page, and add it to your site. If you’re building a Webvanta site, we recommend that you create a folder named “js” in the Files area, and upload the file there. Then load the file in the head section of your page, like any JS file. (You should load jQuery first, of course.)

Now, it takes only a tiny bit of JavaScript to store the source-code string in a variable:

sourcecode = $.parseQuery().s; 

If you named your parameter something other than “s”, just put that name after “parsequery().”.

Now we have the sourcecode string from the URL (whatever was after ?s=) in a JavaScript variable named sourcecode.

Saving the Source Code

Now you can insert the source code into your lead capture or order form, presumably in a hidden field. For example, your form may have a field such as:

<input type="hidden" name="determined-by-the-form-destination" id="sourcecode" />

The name attribute is used by the system to which you are submitting this form so it knows what to do with the data. If you are adding leads to an email marketing system, such as Constant Contact or MailChimp, then you would:

  1. Use their form-builder interface to add a field to hold this information.
  2. Get the form code from them.
  3. Change the input type from “text” to “hidden” since we don’t want this field to be displayed.
  4. Add or change the ID if needed, since this is what you will use to target the form field with your jQuery code.

If your site is built with Webvanta’s hosted CMS and you are submitting the form to a Webvanta database, you’d add a field to the Custom Item Type to hold the source code, and use the form-code generator to get the code for the form (see Creating Forms for User Submissions). The critical piece that you need is the name attribute for the field, which is how the system knows what to do with this information when the form is submitted.

Now you can use a little jQuery to set the value of this field, using the sourcecode JavaScript variable that you created earlier:

$("#source").val(sourcecode);

Since the form element doesn’t exist until the page is loaded, this should be inside a “document ready” handler. And to avoid creating JavaScript errors, we should test that there is a sourcecode parameter before trying to use it.

Putting it all together, here’s the complete code:

$(document).ready(function() { if (sourcecode = $.parsequery().s) {$("#source").val(sourcecode); }
});

Now, when the form is submitted, the sourcecode from the URL is submitted along with the other information.

Using Cookies to Make the Source Code Persistent

This approach works great as long as the form that the user is completing is on the page that they first accessed, with the source code parameter in the URL. What happens if they navigate to another page, however? And what if they don’t fill out the form on this visit but come back later, using a URL without the source code parameter?

We can address those situations by storing the source code in a cookie. A cookie is a small piece of data that is stored by the visitor’s browser, and which we can access later (unless, of course, the user deletes their cookies).

We’ll use another jQuery library that makes it easy to read and write cookies: jquery.cookie.js. As with the query parsing plugin, you’ll need to download the code, upload it to your site, and then load the plugin in the head section of the page, after jQuery is loaded.

Now, instead of taking the source code from the query string and immediately setting the value of the hidden field, we store it in a cookie:

if (sourcecode = $.parseQuery().s) { $.cookie('mysite_lead_source', sourcecode, { expires: 180 });
}

You can name the cookie whatever you want—that’s the first parameter in the call to the cookie function. The second parameter is the value, which is the variable we’ve set from the query string. The third parameter is a set of options, the only one of which we’re using is the expire value (in days). If you don’t set this value, then the cookie will be a session cookie and will disappear as soon as the user quits their browser. We’ve set it to 180 days (6 months) so we’ll retain this sourcecode for any subsequent visits within six months. If a visitor returns to the site using a URL without a source code, the prior source code will still be there in the cookie. (If they return to the site using a URL with a different source code, then the cookie will reflect the most recent source code.)

Setting the Source Code From the Cookie

Now we use the cookie to set the value of the hidden form field:

$("#source").val($.cookie('mysite_lead_source'));

Remember that this line of code needs to be in a document ready handler, since it is modifying a DOM element. The code that sets the cookie does not need to be inside the handler, but it doesn’t hurt to put it there. So we can put all this code together as follows:

$(document).ready(function() {
if (sourcecode = $.parseQuery().s) {
$.cookie('mysite_lead_source', sourcecode, { expires: 180 });
}
$('#source').val($.cookie('mysite_lead_source'));
});

To translate this into English, this code is saying:

  1. Wait until the document has been loaded and is ready for the DOM to be manipulated
  2. If there is a query parameter with the name “s”, store the value in the JavaScript variable “sourcecode” and then save that value in a 6-month-lifetime cookie named “mysite_lead_source”.
  3. If there is an element with the ID of “source”, set its value to the value retrieved from the cookie.

This last statement deserves a little more explanation. There is no conditional in the last line of code, but when you use jQuery to modify an element, it doesn’t cause any problems if the element doesn’t exist. (You could optimize the speed of the page slightly by only putting this line of code on pages that actually include a form with the source field, but the benefit is negligible and it’s convenient to just put this in the head section across the site so you can put forms on any page without having to worry about it.)

Note that you do not want the last line of code to be inside the conditional block, because you want to get the value from the cookie even if there is no source code in the URL for the current page.

If the form is on the same page on which the cookie is set, the cookie is just written and read in two consecutive actions, which is fine.

If the is no source code in the URL for the current page, but there is a source code cookie, then the value from the cookie is used, telling us how the user reached the site.

Finally, if the cookie is not present, the the value of the source field on the form will be set to null.

In part 2 of this series, I’ll show how to capture the referrer address as well.

Topics: Web Design

Add Your Comments

(not published)