As the web continues to evolve, tracking user interaction with your website becomes more and more important. When you understand how users interact with your website, you can discover which pages and keywords are performing well, and which ones need further consideration. While there are many wonderful tools that help you analyze and improve your business by allowing you to optimize your site, there are certain metrics that, while valuable, can be difficult to access.
Imagine that your website provided seven leads. Out of those seven, only one actually converted. Now you can use Google Analytics Goal Tracking (which is where you found out that you received the leads) to discover the seven keywords that were used that ultimately led to the leads. So while you know which keywords were used, you still don’t know which keyword belonged to the lead that actually converted – which would obviously be the most valuable term in the bunch in terms of optimization.
What Are Interactions?
When we talk about user interaction with your website, we are talking about contact forms, subscriptions, purchases, registrations, or any other action the user takes that meets with the goals you set for your website. However, for the sake of brevity, we will only focus on lead generation forms in this article.
Google Analytics Goal Tracking
Using tracking tools, traditionally Google Analytics, you can find out how many people are visiting your site and what led them there (IE: a search engine, another website, etc.) It also allows you to see how many of those visits a lead and what referred them to your site became. The Goal Tracking feature in particular shows you how many visitors a specific web page received, where they came from, and what keywords they used to get there (if it was through a search engine).
While you could use Google Analytics and Goal Tracking to find out how many leads were generated by a Google or Bing search and which keywords generated the most leads over a certain period of time, you still have no insight as to where each specific lead came from. This means that you have no real way to determine whether or not the leads derived from your SEO efforts have actual value as far as your ROI is concerned.
Why Can’t We Track These Specific Interactions?
The biggest problem with industry-level trackers like Google Analytics is that they don’t know how the user is interacting with the webpage (a contact form or a registration, etc.) or the logic behind it (whether it’s a blog, an eCommerce site, etc.)
Losing the Data at the Interaction Page
It is simple for a web designer to integrate a tracking mechanism into the fields of the form submission. While it can be added to the form as another field, the problem is that the referrer information gets lost after the user clicks to a second page. If the user didn’t come to the form page directly from another website or search engine, the data will be lost.
So how can we deal with this?
We can eradicate this problem by saving the referrer data into the Cookies using JavaScript to integrate it into the form as an additional field. Problem solved! And I’ll explain how in a minute.
What about Google Encryption?
If you cannot see the actual referrer from Google, don’t worry. This is the case for everyone as this information is hidden if the user is signed in to any Google account (Gmail, Google+, Docs, etc).
Referrer Information from Encrypted Websites
If you cannot see referrer information from encrypted websites (i.e. websites with https or websites on SSL) don’t get be surprised. This is a web protocol standard. If a user is on an https page and goes to an http page, the referrer information will not be provided because the user is going to a less secure destination from a more secure origin.
However, to cope with this problem you can structure your entire website into https and serve all pages as encrypted so whenever someone links your website or whenever Google crawls your pages, every page’s link will be saved as https. If you just redirect from http to https to get the referrer information it won’t work for referrer information purposes. After coding for https you need to wait for months for your page to be recognized (indexed) as https directly without an http-to-https redirect. Nonetheless, it’s a good investment of your time and effort to maximize referrer information.
A Real-Time Example: Wufoo Forms
Wufoo is a web application that allows its users to build online data collection forms in a matter of minutes. Forms can be updated using their web interface, which makes changes immediately effective. All forms are controlled from a central location. Designing a form is simple due to their interactive, user-friendly design interface.
At Optimum7, we receive heavy amounts of traffic from search engines and from other websites. So do our clients. To keep track of all this traffic and determine who is coming from where, we use a whole bunch of Wufoo forms, not only for ourselves but our clients as well.
Wufoo forms serve a variety of purposes. We use them internally as questionnaires for new clients so we can get more information about them for our various departments.
More importantly, however, we also use them on pages of our own site and our clients’ sites so that visitors can get in touch with us. However, when visitors are reaching out to us, we want to see the referrer information and the search keywords that lead used (if they found us through search).
Because we have so many contact forms on different websites, it’s important that the system we use is centralized. We also need to be able to easily integrate it with any type of website (IE: WordPress, Volusion, Magento, etc.)
Integrating Parameters into Wufoo Forms
Wufoo allows its users to insert parameters into a form using URL Modifications, which can be found at wufoo.com/docs/url-modifications.
The URL Modification system can be used to pass the referrer information to the Wufoo form, which allows us to see dynamic information other than that the user provides manually, like member name if user is registered or referrer information in our case. Wufoo URL Modifications can be used with JavaScript, or you can modify the form’s URL with server-side code.
Saving Referrer Information Effectively
The most effective way to save referrer information is to save it in User Session storage, which is supported by all dynamic web technologies – PHP, ASP.NET, Java Web, etc.
However, this method has a few drawbacks. First, it would require a change in the project files. So if you are not a project developer, or if you’re using software packages like WordPress, major issues may surface down the road. For example, if a software update occurs, your integrated referrer tracking system may be broken because of files that were changed during the update.
While server-side session storage and integration are an effective way to save referrer information, I wouldn’t recommend it to anyone who is not familiar with the development of the project. This is especially true because most projects have a different implementation structure behind them. Some use WordPress, others use Volusion, Magento or hand-coded special projects, and each one would require changes to the code to adopt the referrer tracking system.
So you can write a plugin for WordPress to save referrer information and use it later, but the moment you become involved with a website that doesn’t use WordPress, the plugin is useless and you’re back to square one – looking for a compatible referral tracking system.
Quick, Simple, and Universal Method
What we really need is a way to integrate the referrer tracking system into any website regardless of the server-side implementation structure. We also want a centralized system that we can upgrade just by modifying a single copy. While the system should work for Wufoo forms, we must consider other possibilities and make sure it supports other forms as well.
The answer to this conundrum is JavaScript and Cookies. However, I suggest that you remember the following before going any further:
Run JavaScript logic on every page
- If there is referrer information that does not correspond with the current website the visitor is on, save the referrer’s URL into Cookies.
- Run a custom JavaScript function on the Wufoo form page to collect the URL saved in Cookies, if there is one.
- The logic for storing the referrer URL can be integrated with parsing the search keywords if visitor coming from a known search engine like Google.
This creates a JavaScript file that can be saved on the central website and referenced by anyone with access to the file. When we update our referrer storing system, we will only have to change one file to see the update reflected on each website.
The website that hosts the JavaScript file should support SSL and have a valid SSL Certificate. If the referencing website is on HTTPS (IE: using an SSL) and you do not have a valid SSL Certificate as the host, the visitor’s browser will not display a “successfully encrypted connection” message. The browser URL box will be yellow instead of green and will display a warning to the user along the lines of “There are files loaded from an unencrypted source.” This is a problem because the user may not feel safe, especially if they are on a transaction page and providing sensitive data. It may even cause them to stop completing your form and leave your page.
Our Solution
This is a process that we continue to use successfully here at Optimum7 and hope you can reap the benefits as well. If you are able to implement this successfully, you should be able to see the referral keywords for the user like we do in this screenshot:
JavaScript Codes
To help you out a little more, here are a couple examples of code snippets that are crucial to implementing the referral tracking system we’ve been discussing. This first code block demonstrates how to access the referrer on the first page the user comes to.
/**
* Do we have a valid referrer?
* @return {Boolean}
*/
RememberReferrer.prototype.doesReferrerExist = function() {
var ref = document.referrer;
return !(typeof ref == ‘undefined’ || ref == null || ref == ”);
}
This second piece of code demonstrates how we parse the referrer host’s name. This allows us to determine which known search engine the user employed in their search – Google, Bing, or Yahoo.
/**
* Gets referrer host name without http:// or https://
* @return {* referrer host name}
*/
RememberReferrer.prototype.getReferrerHostName = function() {
var ref = document.referrer;
var referrerHost = ref.match(/https?:\/\/(+)/i);
if (referrerHost.length != 2) return null;
return referrerHost;
}
If you feel that this is something you can do yourself, you can find the code pieces that allow you to save the referrer information into a Cookie by conducting searches like getCookie(name) and setCookie(name, value).
However, if this is something you have questions about or need help with, we have a JavaScript function that works perfectly with Wufoo forms and is easily customizable. It even parses the search keywords!
So if you’re having trouble tracking referral information and getting these key data points that make a world of difference when optimizing your site, we’d be happy to help you with our proven system. Contact us today using one of our Wufoo forms!
Editorial by Jani Seneviratne.
