DID Tracker API

DID tracker API allows Voicenter customers to track incoming calls from your web sites, mini sites, landing pages, etc. It is mostly used when you wish to follow, exam and diagnose how many calls were received from clients who had left their contact info on your various online platforms. Use the following easy to implement JS script for advertisement tracking of calling numbers from your websites.
did tracker api scheme

 

General Explanation

 

This API give you a lot of tools and access to vital information such as which client/lead had left their contact details in your landing page.
Did that client received a call? And incase they did, did you the call help convert the lead to an existing client?

This API can measure the effectiveness of your google ads, landing pages and any other web advertisement you may have.

All you have to do is follow the JS script shown below.

 

Usage

 

init method accepts the following arguments:

 

Argument Accepts Example Description
tokenStringxxxxxxxxxyyyyyyyyyyyyyzzzzzzzzzzzThis Token will be provided by Voicenter and will be assigned to a pool of DIDs (phone numbers) associated under the same “did tracker” settings.
visitorInfoobject{ “glid”:”wqer54ytw345uye589y”, “fname”:”Chuck Norris” }Any object which will be send to DID Tracker API to be temporarily stored and assigned to this DID.
actionsobjectsee examples belowList of actions to perform on a list of selectors (html elements).
actions.callarraysee examples belowList of selectors to which will be applied 'click' listener to make a call (tel: to dial) to a DID.
actions.hrefarraysee examples belowList of selectors which hrefs will be replaced with DID.
actions.textarraysee examples belowList of selectors which text will be replaced with DID.

 

HTML Example

 

HTML Example for client side using all actions at once (not the common practice but just to
show all actions in a single script):

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 
          
<script type="text/javascript" src="./index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(

‘xxxxxxxxxyyyyyyyyyyyyyzzzzzzzzzzz’,
{
glid:”wqer54ytw345uye589y”,
fname:”Chuck Norris”
},
{
href: ['.replace-my-href', '#replaceMyHref'],
text: ['.replace-me', '#replaceMe'],
call: ['.call-me', '#callMe']
})
.then(function (DID) {
console.log(`DID: ${DID}`)
})
</script>

 

Action Examples

 

Call_Example.html

 

URL for voicentercdn, please press here.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 
          
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DID TRACKER EXAMPLE</title>
</head>
<body>
<button class="call-me">
Call Me by class
</button>
<button id="callMe">
Call Me by id
</button>
<script type="text/javascript" src="../index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
},
{
call: ['.call-me', '#callMe']
})
</script>
</body>
</html>

 

href_example.html

 

You can view this actions cdn here.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 
          
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DID TRACKER EXAMPLE</title>
</head>
<body>
<a href="test" class="replace-my-href">
I will have a new href by class
</a>
<br>
<a href="test" id="replaceMyHref">
I will have a new href by id
</a>
<script type="text/javascript" src="../index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
},
{
href: ['.replace-my-href', '#replaceMyHref']
})
</script>
</body>
</html>

 

text_example.html

 

You can view this action's cdn here.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 
          
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DID TRACKER EXAMPLE</title>
</head>
<body>
<p class="replace-me">
I will be replaced by class
</p>
<p id="replaceMe">
I will be replaced by id
</p>
<script type="text/javascript" src="../index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
},
{
text: ['.replace-me', '#replaceMe']
})
</script>
</body>
</html>

 

no_action_example.html

 

You can view this action's cdn here.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 
          
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DID TRACKER EXAMPLE</title>
</head>
<body>
<script type="text/javascript" src="../index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
})
.then(function (DID) {
console.log(`DID: ${DID}`)
})
</script>
</body>
</html>

 

Index.min.js backend file

 

This javascript file should be included in your html file for the function to work.
the content is also available here.
so you can easily copy-paste this in the html body (as shown in previous examples):

 

1
2
3 
          
<script type="text/javascript"
src="https://cdn.voicenter.co/cdn/Scripts/did_trace_worker/index.min.js"></script>
<script type="text/javascript">

 

or save it on your server and refer to its local location:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 
          
const VC_DID_TRACKER=function(){const t={href:[],text:[],call:[]},n="voicenter_did_tracer_did";let
e={};function o(){return!!e.actions.href&&!!e.actions.href.length}function
i(){return!!e.actions.text&&!!e.actions.text.length}function
r(){return!!e.actions.call&&!!e.actions.call.length}function
c(t,n){t.forEach((function(t){try{[...document.querySelectorAll(t)].forEach((function(t){n(t)}))}catch(t){console.
error("[VOICENTER_DID_TRACKER]:",t)}}))}function u(){return localStorage.getItem(n)}function
f(){window.location.href=`tel:${u()}`}function
a(t=!1){if(!t&&u()){if((localStorage.getItem("voicenter_did_tracer_did_exp")||0)>Date.now())return
Promise.resolve()}return function(t="",n={}){try{return
fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)}).then((function(
t){return
t.json()}))}catch(t){console.error("[VOICENTER_DID_TRACKER]:",t)}}(`https://api.voiceswitch.io/didTracker/get
DidForUser?token=${e.token}`,e.visitorInfo).then((function(t){const o=t.did;let
i=60*t.didExpiryHours*60*1e3;i>2147483647&&(i=2147483647),localStorage.setItem(n,o),window.voicenter_
did_tracer_did=o,e.autoRefreshDID&&setTimeout((function(){a(!0).then((function(){s(),l(),d()}))}),i-5e3)}))}func
tion s(){o()&&c(e.actions.href,(function(t){t.href=`tel:${u()}`}))}function
l(){i()&&c(e.actions.text,(function(t){t.innerText=u()}))}function
d(){r()&&c(e.actions.call,(function(t){t.addEventListener("click",(function(){u()?f():a().then(f)}))}))}return{init:fu
nction(n,c={},f=t,h=!0){return
e={token:n,visitorInfo:c,actions:f,autoRefreshDID:h},e.token||console.error("[VOICENTER_DID_TRACKER]:
Token must be provided"),o()||i()||r()?o()||i()?new
Promise((function(t){a().then((function(){s(),l()})).then((function(){t(u())}))})):(r()&&d(),Promise.resolve()):a().the
n(u)}}}();