Real-time Landing Page Tracking

Follow

Overview

In this article, we will be focusing on Retreavers capability to track data in real-time based on form capture.

We are proud of the fact that Retreaver is the most customizable platform in the call tracking market today. Here is just one of the many ways we are able to route calls, skipping the need for an IVR and capturing customer intent by interacting with your landing pages instead.

Here is a short 20 second demonstration of Retreaver tracking form data in real-time.



Guide

Step 1:

Create your Retreaver Campaign.

For a step-by-step guide to creating a campaign, please visit our guide on setting up your first call tracking campaign.

Step 2:

Navigate to the buyers menu and select the buyer you’d like to route calls to from the form. We're going to add/update routing tags to the buyer using the example above where the key:value pairs are:

  • product_interest:Retreaver Call Tracking
  • product_interest:Life Insurance
  • product_interest:Health Insurance
  • product_interest:Credit Card Debt

You do not have to create these tags, this step is just a reminder that any tag values added from the form will be used to match call buyers. Please ensure your endpoints accept your new tag values for each of your form fields if they are used for filtering purposes.

Type "product_interest" in the Key area, if the tag does not exist, it will be automatically created when you finish the process. Next, type "Retreaver Call" Tracking in the Value area and click Done, then click on Update Call Buyer.

For more information on tags visit our guide on Tags.

image5.png

Once you Update this Call Buyer, you can confirm that the tag was added by looking at the Tags area in the Buyer Overview:

image4.png

Step 3:

Repeat the above action for every buyer you’d like to categorize with a new key:value pair from the appropriate form.

Step 4:

Click on New Number Pool for your chosen Campaign

image7.png

Step 5:

Customize the requirements of the Number Pool as seen below. View our guide for a more in-depth guide on creating number pools. Number pools are essential for dynamic number insertion and tracking on your page, they serve as temporary containers for tags before they are stored in a call. Each unique visitor on your landing page will be provided an available number from the pool.

image6.png

Step 6:

Now it’s time to configure the Retreaver JS Settings. The screenshots below will detail what has to be done:

image2.pngHere we are specifying which numbers to replace on our landing page using number replacement.

image1.png

Be sure to use the Advanced script by clicking the Advanced accordion and copying the code.  Paste this script in the <head> portion of your page. As of this point your page should be automatically replacing numbers on your page from the supplied number-pool, however tracking form values into tags requires a few additional steps.

Step 7:

We've provided a code sample that can be implemented on your page to support form data tracking using a function called "updateTags()".

Replace "campaign.request_number(function (number)" with the "campaign.auto_replace_numbers(function (number)" method and place all provided code snippets in-between this code block.

RealTime-TrackingSetup.png

 

Note

Your form fields will have their own unique labels, refer to your form source code to identify which field labels to track for.

There are various methods that can be used to extract & store your form values - each method is catered to work with a particular form layout:

When the form field name is static and can be referred by ID
1) form_first_name = document.getElementById('first_name').value;

When the form field is nested inside a label block with a separate input field
2) form_first_name = $("label:contains('First Name')").parent().find('input').val();

When the form field name is dynamically generated [ Hubspot Forms ] 
3) form_first_name = $("input[id*='firstname']").val();

 

//These variables will store your form data, You must customize it to suit your form
var first_name, last_name, email, phone_number, state, type_of_insurance;
          
//Each field in your form comes with a label and a child input element, by going into the parent of the label, you can access the sub-elements 
//From the parent of the label, you can find the input element within, pulling the value and using it to update the numbers tags
function updateTags() {
   first_name = $("label:contains('First Name')").parent().find('input').val();
   last_name = $("label:contains('Last Name')").parent().find('input').val();
   email = $("label:contains('Email')").parent().find('input').val();
   phone_number = $("label:contains('Phone Number')").parent().find('input').val();
   //Instead of finding an input element shown above, we find 'select' now as thats the element type holding the value in a select scrollbar
   state = $("label:contains('State')").parent().find('select').val();
   type_of_insurance = $("label:contains('Type of Insurance')").parent().find('select').val();

   //update tags associated with displayed number, key:value - where key is created and managed within the retreaver platform, 
   //and value is pulled from our previously stored variables
   number.replace_tags({
      first_name: first_name,
      last_name: last_name,
      email: email,
      phone_number: phone_number,
      state: state,
      type_of_insurance: type_of_insurance
   });
}

 

Step 8:

The final step is to call the updateTags() function anytime the form is changed. The real-time tracking system works by using a helper function that controls when updateTags should run.

RealTime-Tracking2.png

Note

Place the debounce code directly below the closing bracket of the update_tags function.

//Helper function controls the rate that a supplied function runs, updating too frequently is resource expensive
function debounce(func, wait, immediate) {
     var timeout;
     return function() {
        var context = this, args = arguments;
var later = function() { timeout = null; if (!immediate) func.apply(context, args); };
var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }
} //calls updateTags function every 0.250 seconds, updating tags associated with the current displayed number based on current values stored on your form var debounced = debounce(updateTags, 250); //Ontop of timed updating, anytime the form is altered or submitted, run your custom updateTags function again $('form').change(debounced).submit(updateTags); $('input').keyup(debounced); debounced();

Note

The debounce method might have trouble executing on certain form providers, in which case you may use the code snippet below to regularly call the "updateTags(); method instead:

setInterval(function(){ updateTags(); }, 500);


More information about Debounce can be found here.

Place the code in the <head> portion of your website and hit refresh. You are now ready to test your campaign.

Retreaver acts quickly and will automatically change the displayed phone number as well as track the necessary data in real-time!

If you're having trouble setting up real-time page tracking, feel free to contact support.


 

Here is a reference script of the final product:

<script type="text/javascript">
(function () {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.async = true;
scriptElement.defer = true;
scriptElement.src = document.location.protocol + '//dist.routingapi.com/jsapi/v1/retreaver.min.js';
scriptElement.onload = scriptElement.onreadystatechange = function () {

Retreaver.configure({
host: 'api.routingapi.com',
prefix: document.location.protocol == 'https:' ? 'https' : 'http'
});

//Initialize Campaign Instance
var campaign = new Retreaver.Campaign({campaign_key: 'SECRET_CAMPAIGN_KEY'});


//Replace numbers on the page using auto_replace_numbers
campaign.auto_replace_numbers(function (number) {


//Initialize Variables to store form values
var first_name, last_name, email, phone_number, zip, product_interest;

//Assign form values to Retreaver tags
function updateTags() {
first_name = $("input[id*='firstname']").val();
last_name = $("input[id*='lastname']").val();
email = $("input[id*='email']").val();
phone_number = $("input[id*='phone']").val();
zip = $("input[id*='state']").val();
product_interest = $("select[id*='product']").val();

//update tags associated with displayed number, key:value
//key is created within retreaver platform,
//value is pulled from our previously stored variables
number.replace_tags({
first_name: first_name,
last_name: last_name,
email: email,
phone_number: phone_number,
caller_zip: zip,
product_interest: product_interest
});
}

//Debounce calls a function based on a supplied timer, used to call update tags
//*NOTE* If Debounce method is not working on your hosting platform, use setInterval() instead:
//setInterval(function(){ updateTags(); }, 500);

//Debounce section that can be replaced via setInterval()

function debounce(func, wait, immedi te) {
var timeout;
return function () {
var context = this, args = arguments;

var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};

var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
}
}

//calls updateTags function every 0.250 seconds
var debounced = debounce(updateTags, 250);

//Ontop of timed updating, anytime the form is altered/submitted, run updateTags function again
$('form').change(debounced).submit(updateTags);
$('input').keyup(debounced);
debounced();

//Debounce section that can be replaced via setInterval()

});//end of auto replace numbers

//OPTIONAL: Click-To-Call Functionality Starts here
$('form').on('submit', function () {

//Store form values
visitor_first_name = $("input[id*='firstname']").val(),

visitor_last_name = $("input[id*='lastname']").val(),

visitor_email = $("input[id*='email']").val(),

visitor_phone_number = $("input[id*='phone']").val(),

visitor_zip = $("input[id*='state']").val(),

visitor_interest = $("select[id*='product']").val();

//Fetch a campaign number to initiate a call with
campaign.request_number({}, function (retreaver_number) {

//Initiate a call using a requested number, pass tags in "key:value" format
retreaver_number.initiate_call(visitor_phone_number, {

first_name: visitor_first_name,

last_name: visitor_last_name,

email: visitor_email,

phone_number: visitor_phone_number,

caller_zip: visitor_zip,

product_interest: visitor_interest

}, callInitiated); //Initiate Call

}) //Campaign.request_number

});//On Form Submit

//Callback function used to notify form filler of impending call
function callInitiated() {

alert("Your form has been successfully submitted, An agent will call you shortly.");
}

// Click-To-Call Functionality Ends here

};//On load

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(scriptElement);

})();

</script>


Web Tracking doesn't have to end on a single page! Use Parameter Mapping to pass data along from site to site and paint a complete picture of your callers sales journey.

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.