General Explanation
This API gives you a lot of tools and access to vital information such as which client/lead had left their contact details on your landing page.
Did that client receive a call? And in case they did, did 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.
init method accepts the following arguments:
| Argument | Accepts | Example | Description |
| token | String | xxxxxxxxxyyyyyyyyyyyyyzzzzzzzzzzz | This Token will be provided by Voicenter and will be assigned to a pool of DIDs (phone numbers) associated under the same “lead tracker” settings. |
| visitorInfo | object | { “glid”:”wqer54ytw345uye589y”, “fname”:”Chuck Norris” } | Any object which will be send to Lead Tracker API to be temporarily stored and assigned to this DID. |
| actions | object | see examples below | List of actions to perform on a list of selectors (html elements). |
| actions.call | array | see examples below | List of selectors to which will be applied 'click' listener to make a call (tel: to dial) to a DID. |
| actions.href | array | see examples below | List of selectors which hrefs will be replaced with DID. |
| actions.text | array | see examples below | List of selectors which text will be replaced with DID. |
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>LEAD 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="https://cdn.voicenter.co/cdn/Scripts/did_trace_worker/index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
},
{
call: ['.call-me', '#callMe']
})
</script>
</body>
</html>
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>LEAD 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="https://cdn.voicenter.co/cdn/Scripts/did_trace_worker/index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
},
{
href: ['.replace-my-href', '#replaceMyHref']
})
</script>
</body>
</html>
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>LEAD 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="https://cdn.voicenter.co/cdn/Scripts/did_trace_worker/index.min.js"></script>
<script type="text/javascript">
VC_DID_TRACKER.init(
'token',
{
name: 'John Doe'
},
{
text: ['.replace-me', '#replaceMe']
})
</script>
</body>
</html>
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>LEAD TRACKER EXAMPLE</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.voicenter.co/cdn/Scripts/did_trace_worker/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
const VC_DID_TRACKER=function(){const t={href:[],text:[],call:[]},e="voicenter_did_tracer_did",n="voicenter_did_tracer_did_exp",o="voicenter_did_trace_worker_query_params";let i={};function r(){const t={},e=new URLSearchParams(window.location.search);for(const n of e)t[n[0]]=n[1];return t}function c(){return!!i.actions.href&&!!i.actions.href.length}function a(){return!!i.actions.text&&!!i.actions.text.length}function s(){return!!i.actions.call&&!!i.actions.call.length}function f(t,e){t.forEach((function(t){try{[...document.querySelectorAll(t)].forEach((function(t){e(t)}))}catch(t){console.error("[VOICENTER_DID_TRACKER]:",t)}}))}function u(){return localStorage.getItem(e)}function l(){window.location.href=`tel:${u()}`}function d(t=!1){if(!t&&u()){if((localStorage.getItem(n)||0)>(new Date).getTime())return Promise.resolve()}return function(t="",e={}){try{return fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}).then((function(t){return t.json()}))}catch(t){console.error("[VOICENTER_DID_TRACKER]:",t)}}(`https://did.voicenter.co/didTracker/getDidForUser?token=${i.token}`,i.visitorInfo).then((function(t){const o=t.did;let r=60*t.didExpiryHours*60*1e3;localStorage.setItem(n,(new Date).setTime((new Date).getTime()+r)),localStorage.setItem(e,o),window.voicenter_did_tracer_did=o,i.autoRefreshDID&&setTimeout((function(){d(!0).then((function(){h(),_(),m()}))}),r-5e3)}))}function h(){c()&&f(i.actions.href,(function(t){t.href=`tel:${u()}`}))}function _(){a()&&f(i.actions.text,(function(t){t.innerText=u()}))}function m(){s()&&f(i.actions.call,(function(t){t.addEventListener("click",(function(){u()?l():d().then(l)}))}))}return{init:function(e,n={},f=t,l=!0,g=!0){if(i={token:e,visitorInfo:{...n,siteDomain:window.location.hostname,currentPage:window.location.href},actions:f,autoRefreshDID:l},i.token||console.error("[VOICENTER_DID_TRACKER]: Token must be provided"),g){let t=localStorage.getItem(o);const e=r();t&&(t=JSON.parse(t),Object.assign(i.visitorInfo,t.visitorInfo)),Object.assign(i.visitorInfo,e),localStorage.removeItem(o),localStorage.setItem(o,JSON.stringify(i))}return c()||a()||s()?c()||a()?new Promise((function(t){d().then((function(){h(),_()})).then((function(){t(u())}))})):(s()&&m(),Promise.resolve()):d().then(u)}}}();