Real-time Landing Page Tracking

Follow

Overview

In this article, we will be focusing on Retreaver’s 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

Creating a campaign with routing settings based on form-fill is EASY.

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 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

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.

image5.png

Once you Update 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 key:value pair from the appropriate form. For more information on tags visit our guide on Tags.

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.png

image1.png

 As of this point your page should be automatically replacing numbers on your page from the supplied number-pool, however to also track 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()". Place your form-specific version in-between the "campaign.auto_replace_numbers(function (number)" method

RealTime-TrackingSetup.png

Note

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

//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
   });
}

You are now storing form values and using them to update the tags associated with the number displayed on your page. 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 

//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();


More information about Debounce can be found here.


You are now ready to test your campaign. Place the code on the website and refresh. Retreaver acts quickly and will automatically change the displayed phone number as well as track the necessary data in real-time!

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.