הסבר כללי
עליכם להטמיע את הסריקפט (מופיע בהמשך) ותוכלו לפרסם מספרי טלפון באתרי הפרסום שלכם מתוך מאגר שניתן לכם.
לכל מספר טלפון תוכלו להצמיד פרמטרים מיוחדים שלכם (ראו דוגמא מטה) אשר תקבלו אותם בחזרה עם פרטי סיכום השיחה.
שדה | סוג שדה | דוגמא | תיאור |
token | מחרוזת | xxxxxxxxxyyyyyyyyyyyyyzzzzzzzzzzz | טוקן זה יסופק לכם על ידי וויסנטר והוא יוצמד למאגר מספרי טלפון שישוייך לכם. |
visitorInfo | אובייקט | { “glid”:”wqer54ytw345uye589y”, “fname”:”Chuck Norris” } | אובייקט עם מידע שלכם אשר תוכלו לשלוח אל Lead Tracker API, המידע ישוייך למספר טלפון אשר נמצא בחשבונכם. |
actions | אובייקט | מצורפת דוגמא מטה | סט של פעולות שניתן לבצע ברשימת הסלקטורים באלמנטים של HTML. |
actions.call | מערך | מצורפת דוגמא מטה | רשימה של סלקטורים אשר עבורם יושם מאזין של Click כדי לבצע שיחה למספר טלפון מתוך תגית של tel:. |
actions.href | מערך | מצורפת דוגמא מטה | רשימה של סלקטורים אשר hrefs יוחלף על ידי מספר טלפון. |
actions.text | מצורפת דוגמה מטה. | מערך | רשימה של סלקטורים אשר הטקסט יוחלף על ידי מספר טלפון. |
דוגמאות
דוגמא עבור actions.call
דוגמא HTML בצד לקוח actions.call, עבור ניסיונות ובדיקה תוכלו ללחוץ כאן.
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
הקובץ הנ"ל צריך להיות חלק מהHTML שלכם על מנת שהשירות יעבוד.
תוכן של הקובץ נמצא גם כאן.
לחלופין תוכלו לשמור את הקובץ בשרת אצלכם ודרך הHTML לבצע הפנייה אליו.
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)}}}();