Funnel - Dynamic Number Insertion

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.

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"]
});
</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. 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:

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