Personalization is everything – we figured this out a long time ago.
With that being said, it’s still surprising to me that every time I need immediate assistance, it is so hard to find the relevant local phone numbers on a website.
Good thing we have Marketo Real-Time Personalization (RTP) installed on www.marketo.com. We can leverage the RTP Visitor API to dynamically change the phone number that a web visitor sees in different sections of the website.
Wow! Can you believe this? How does this magic work?
First, you’ll need to have RTP installed on your web site as described here.
Next, follow the instructions below and implement the JavaScript code on your website:
- Insert your international phone number in the defaultPhone configuration
- Insert the HTML element id(s) in the divIds configuration
- If you want to make the phone number a click-to-call link for mobile browsers, then set the mobileLink configuration to true.
- Map the different locations with their phone numbers in the cityPhone, statePhone, and countryPhone configurations
For example, here are sample values for configuration settings:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
defaultPhone:"+1.503.608.4679", // Optional divIds:["phoneId1","phoneId2"], mobileLink: true, cityPhone: { "<a href="#">yanir</a>": ["San Mateo", "San Francisco"], "+353.1.242.3000": ["tel-aviv"] }, statePhone: { "+1.650.376.2300": ["CA"], "+1.650.376.2302": ["OR"] }, countryPhone: { "+1.650.376.2300": ["United States"], "+353.1.242.3000": ["Israel"] } |
Finally, insert an HTML anchor tag that contains an id matching one of the ids in divIds (from step 2 above). For example, if you specified “phoneId1” in divIds, then your HTML anchor tag would look like this:
|
1 |
<a href="tel:+1800229933" id="phoneId1">+1800229933</a> |
The script will check if there is a match in this order: cityPhone > statePhone > countryPhone > defaultPhone You can also replace the phone numbers with text (Example: “Join our San Francisco User Group!”) or HTML code and dynamically change the content based on the geo-location. Enjoy!
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<a href="tel:+1800229933" id="phoneId1">+1800229933</a> <script> (function(a){ rtp('get','visitor',function(yc){ var location = yc.results.location; var loop = true; var phoneChanged = false; console.log(yc.results); function checkObj(obj){ return Object.getOwnPropertyNames(obj).length >0; } function changePhone(p){ d=a.divIds; for(i=0;i<d.length;i++){ if(document.getElementById(d[i]) !== null){ document.getElementById(d[i]).innerHTML = p; if(a.mobileLink){ document.getElementById(d[i]).href= "tel:" + p; } console.log(p); } } loop = false; phoneChanged = true; } function matchLocation(loc,objc){ for (var key in objc) { for(i=0;i<objc[key].length && loop;i++){ if (!loop) { return true;}; val = objc[key][i]; //console.log(loc + location[loc] + " ? " + val); if(location[loc].toLowerCase() === val.toLowerCase()){ changePhone(key); } } } } if(checkObj(a.cityPhone)){ matchLocation("city",a.cityPhone); }else if(checkObj(a.statePhone)){ matchLocation("state",a.statePhone); }else if(checkObj(a.countryPhone)){ matchLocation("country", a.countryPhone); }else if(!phoneChanged && a.defaultPhone.length > 0 ){ changePhone(a.divId,a.defaultPhone); } }); })({ defaultPhone:"", // [Optional] the number to show if visitor does not match the mapping below divIds:["phoneId1","Floater"], //the phone HTML element ID, can be <div>, <a>, <span>, <p> etc. mobileLink: true, //if you use click to call link (with href="tel:") you can also change its number cityPhone: { "<a href='#'>yanir</a>": ["San Mateo", "San Francisco"], "+353.1.242.3000": ["tel-aviv"] }, statePhone: { "+1.650.376.2300": ["CA"], "+1.650.376.2302": ["OR"] }, countryPhone: { "+1.650.376.2300": ["United States"], "+353.1.242.3000": ["Israel"] } }); </script> |