AJAX Integration User Guide

Introduction

When using jQuery Mobile as a framework, Delacon tracking server does not work properly with jQuery Mobile as most of the pages navigation are using Ajax to get the content of the next link page instead of total refresh of the convention web page navigation.

jQuery Mobile introduce two technical issues with Delacon tracking code. It is difficult to define the telephone number needed to be displayed using Delacon convention (numdiv_<cid>_x). Another issue is Delacon tracking code does not have way to be working with way jQuery Mobile Ajax update model.

As Delacon tracking is expected the customer to define their numbers using DIV or SPAN with the id defined in certain convention. However, in jQuery Mobile environment, it is extremely difficult to using the id as multiple pages will be in the DOM tree and customer needs to have a clear picture of the id used in each page and ensure they are not overlapping. As some of the customer is using CMS to design their website, it is extremely difficult to coordinate this with different party.

When jQuery Mobile access another page using the standard jQuery Mobile button, it accesses the new page using Ajax and just increase the content enclosed by the body tag. Currently, customer needs to put the standard Delacon tracking code to the body or attaching Delacon tracking code to the page initialising event. Although this solution will force the page to display the correct telephone number, it make the Delacon tracking code to run multiple time in the page which make the call back timer to be confused.

Custom way of updating the telephone number

Although the current way of updating the telephone number using the div or span with an id following Delacon convention satisfied most Delacon customer, there are occasion requests to make this more flexible. Here are some of the requests received.

In environment like jQuery Mobile or some CMS system, keep track of the id is a nightmare
To display the telephone number in a dialog box
To display the telephone number in some custom way as changing the page content to Delacon convention involves a lot of other parties
The telephone number displayed needs some client side logic to determine which cid is in used.
Display the telephone number images instead of telephone number in text.

As it is very difficult for Delacon tracking code to cover all these different situations, it is much easy to just allow a hook to allow client to get the tracking numbers and execute their own display logic by themselves.

The hook that is proposed is a custom JavaScript function and if this function is defined in the customer page, Delacon tracking code will call this function with an array of object of the cid(s) and telephone numbers.

The propose signature of this custom function is:

updateTelephoneNumberExt(arrayObject)

where arrayObject is an array of Object and each object has four properties (cid, number, tracking, defNumber)

Here is example of how this is used in the custom web page.

function updatePhoneNumberExt(phoneNumberArray) {

for (var I = 0; I < phoneNumberArray.length; i++) {

var phoneNumberObj = phoneNumberArray[i];

var cid = phoneNumberObj.cid;

var number = phoneNumberObj.number;

// using jQuery to update the telephone number with class numdiv_<cid>

$(‘.numdiv_’ + cid).each(function(index, element) {$(this).text(number);});

}

Ajax way of trigger Delacon tracking code

Delacon will introduce a new way of trigger Delacon tracking code if the page is updated in Ajax way. Instead of call Delacon server using the standard Delacon tracking code, Delacon will introduce a function in the Delacon tracking code that will be downloaded to the customer web page. Instead of calling Delacon standard tracking code again, customer web page should check the existing of this new function and call this.

The signature of this new function is - plaPageReload(cids, extraTracking, extraTrackingOption);

cids: the same definition as the tracking code cids. example: "", "68", "68,9770"
extraTracking (optional): for extra tracking.
extraTrackingOption (optional): the option for extra tracking, refer to the extra tracking definition
extTracking/extraTrackingOption are for extra tracking usage only and are optional parameters.

Here is an example how it is used. Put the following code just before the body tag of the jQuery Mobile.

If (typeof plaPageReload == “function”) {

plaPageReload();

}

else {

// Put the Delacon standard tracking code here

var cids= ….....

}

New function to get the tracking code number

In order to assess the tracking phone number returned by the Delacon server, a new function is provided to allow the page to access the tracking number.

The signature of this function:

getTrackingPhoneNumber(cid, defaultNumber); cid can be integer or string.

The return value is the tracking number for that cid.

<script>

function demoGetCallTrackingNumber(){

alert(“The tracking number for cid 9077 is “ + getTrackingPhoneNumber(9077));

alert(“The tracking number for cid 9078 is “ + getTrackingPhoneNumber(“9078”, “09 8123 4567”));

}

</script>

<input type=”button” onclick=”demoGetCallTrackingNumber();”>Demo

getTrackingPhoneNumber</input>

Summary

With the introduction of these two changes, Delacon tracking code will be able to provide a lot more flexible to over different customer requirements and the way Ajax page refresh.