Skip to content
Funnel Leasing

Funnel - Dynamic Number Insertion (DNI)

Introduction

Funnel’s DNI script automatically updates phone numbers on your website using UTM parameters and/or referrer domains from 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.

Embedding the DNI Script

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.

  • For elements with class name DCRPhone the script will replace the the content of the element with the phone number.
  • For elements with class name DCRPhoneHref the script will replace the href attribute with a tel: link to the phone number.
  • You can use both attributes together on an element like this: <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.

Javascript Callback

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>

Customizing Class names

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>

Campaign Info

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
}

Troubleshooting

Please check these common errors:

  • Your API Key is a string and is wrapped in quotes. Your Community ID is an integer and is without quotes.
  • The class names DCRPhone and DCRPhoneHref are on phone numbers with DNI (DCRPhoneHref is only needed to make it a link)
  • Funnel’s script tags are just before the closing </body> tag

If you checked the above and are still experiencing issues, please contact your Funnel Account Representative or the Customer Support team.