Funnel’s DNI script can automatically update phone numbers on your website using the UTM parameters and/or referrer domains of a user’s initial visit.
Before implementing the DNI script on your website ensure that you have mapped the Marketing/Campaign Source ID’s within your Funnel account. These Campaign ID’s will reflect the UTM parameters and referrers to the associated Lead Source. If you need assistance with the mapping, your Funnel Account Representative or the Customer Support team can help get this setup.
When you are ready to implement DNI, simply add this script just before the closing </body> tag in the HTML of your website:
<script src="https://integrations.funnelleasing.com/dni/v1/dni.js"></script>
<script>FunnelDNI("FUNNEL_API_KEY_HERE", FUNNEL_COMMUNITY_ID_HERE);</script>
Either your Funnel Account Representative or Customer Support team can provide you with the appropriate API Key and Community IDs. Your API Key is a string and will need to be wrapped in quotes. Your Community ID is an integer and will be without quotes.
Once this script is implemented, it automatically looks for elements on the page with the class names DCRPhone and DCRPhoneHref, and updates their contents with the appropriate lead source phone number.
DCRPhone the script will replace the the content of the element with the phone number.DCRPhoneHref the script will replace the href attribute with a tel: link to the phone number.<a class=“DCRPhone DCRPhoneHref” href=“tel:555-555-5555">555-555-5555</a>If the UTM parameters and or referrers do not map to a phone number, no replacement will occur, so we strongly recomend including a default phone number in the page source.
If you’d like to do something more custom with phone number, the script also accepts a callback function, which will be called when the phone number is loaded:
<script src="https://integrations.funnelleasing.com/dni/v1/dni.js"></script>
<script>
FunnelDNI("FUNNEL_API_KEY_HERE", FUNNEL_COMMUNITY_ID_HERE, function(data) {
console.log(data.lead_source_id);
console.log(data.phone_number);
console.log(data.campaign_info);
});
</script>
For example, you might be using Funnel’s API to submit leads from your website and want to get the lead source specified by the UTM parameters or referrer or the captured campaign info parameters (see Campaign Info) to submit along with your leads, you can program such behavior into the callback function.
As an alternate method of implementing a callback function, you may specify an onPhoneNumberReady parameter:
<script src="https://integrations.funnelleasing.com/dni/v1/dni.js"></script>
<script>
FunnelDNI({
"apiKey": "FUNNEL_API_KEY_HERE",
"communityId": FUNNEL_COMMUNITY_ID_HERE,
"onPhoneNumberReady": function(data) {
console.log(data.lead_source_id);
console.log(data.phone_number);
console.log(data.campaign_info);
}
});
</script>
If you have custom classnames you’d like to use in place of DCRPhone and DCRPhoneHref, you may specify those with the phoneNumberSelector and phoneNumberCTCSelector parameters:
<script src="https://integrations.funnelleasing.com/dni/v1/dni.js"></script>
<script>
FunnelDNI({
"apiKey": "FUNNEL_API_KEY_HERE",
"communityId": FUNNEL_COMMUNITY_ID_HERE,
"phoneNumberSelector": ".customClass",
"phoneNumberCTCSelector": ".customClassHref",
"onPhoneNumberReady": function(data) {
console.log(data.lead_source_id);
console.log(data.phone_number);
console.log(data.campaign_info);
}
});
</script>
If you want to capture certain query string parameters that can be passed in and associated with a lead on
creation, you can specify these parameters in the campaignInfoParameters option:
<script src="https://integrations.funnelleasing.com/dni/v1/dni.js"></script>
<script>
FunnelDNI({
"apiKey": "FUNNEL_API_KEY_HERE",
"communityId": FUNNEL_COMMUNITY_ID_HERE,
"phoneNumberSelector": ".customClass",
"phoneNumberCTCSelector": ".customClassHref",
"campaignInfoParameters": ["gclid", "utm_source", "utm_medium", "utm_campaign"]
});
</script>
The above example demonstrates how you can capture the
Google Click Identifier (GCLID) so that it will be associated
with the lead on creation, but any other query parameters that are specified will also be captured. Adding any other query parameter in is as simple as updating campaignInfoParameters with the parameters you’re looking to capture like so: "campaignInfoParameters": ["gclid", "utm_source", "utm_campaign", "utm_medium" ]. These parameters
are also accessible in the JavaScript Callback via the campaign_info property:
<script src="https://integrations.funnelleasing.com/dni/v1/dni.js"></script>
<script>
FunnelDNI({
"apiKey": "FUNNEL_API_KEY_HERE",
"communityId": FUNNEL_COMMUNITY_ID_HERE,
"onPhoneNumberReady": function(data) {
console.log(data.campaign_info);
}
});
</script>
Note: the campaign_info property is passed to the callback function as an object containing all the
campaign info keys and values:
...
"onPhoneNumberReady": function(data) {
console.log(data.campaign_info); // { gclid: "abc123" }
}
This makes it easier to add other campaign info parameters that you that you may
also want to be set on the lead, but it is important to note that Funnel’s API expects this
parameter to be sent in query string form, i.e. gclid=abc123, so you will need to convert
the object to that format before adding it to your request:
...
"onPhoneNumberReady": function(data) {
if (!data.campaign_info)
data.campaign_info = {}
// example: add your custom campaign info parameters
data.campaign_info.utm_source = 'yelp';
// example: convert campaign_info object into query string accepted by Funnel's API
var campaignInfo = Object.keys(data.campaign_info).map(k => k + '=' + data.campaign_info[k]).join('&');
console.log(campaignInfo); // gclid=abc123&utm_source=yelp
}
Please check these common errors:
DCRPhone and DCRPhoneHref are on phone numbers with DNI (DCRPhoneHref is only needed to make it a link)</body> tagIf you checked the above and are still experiencing issues, please contact your Funnel Account Representative or the Customer Support team.